区域地址修稿

src/views/system/dept/mapSetting.vue

@@ -1,141 +1,151 @@
 <template>
-    <tlbs-map ref="mapRef" api-key="KFEBZ-P2GKZ-A5PX4-7Q6Y7-KXOBF-XCB4C" :center="center" :zoom="zoom"
-        :control="control" @click="handleClick" @map_inited="onMapInited">
-        <div style="position: absolute;top: 0;left: 0;z-index: 2000;">
-            <button @click.stop="mode = 'draw'">
-                设置绘制模式
-            </button>
-            <button @click.stop="mode = 'edit'">
-                设置编辑模式
-            </button>
-            <button @click.stop="activeId = 'polygon'">
-                设置画多边形
-            </button>
-            <button @click.stop="activeId = 'circle'">
-                设置画圆形
-            </button>
-            <button @click.stop="getOverlayList">
-                获取图层列表
-            </button>
-            <button @click.stop="onSelectGeometry">
-                选中图形
-            </button>
-            <button @click.stop="onGetSelectedList">
-                获取选中集合图形
-            </button>
-            <button @click.stop="onClear">
-                清空选中
-            </button>
-        </div>
-        <!--vue2使用:active-overlay-id.sync="activeId" -->
-        <tlbs-geometry-editor ref="editorRef" v-model:active-overlay-id="activeId" :action-mode="mode"
-            polygon-id="polygon" :default-polygon-geometries="geometries" :polygon-styles="styles" selectable
-            @select="onSelect" @draw_complete="onDrowComplet" @adjust_complete="onAdjustComplete"
-            @draw_error="onDrawError" />
-    </tlbs-map>
+  <tlbs-map
+    ref="mapRef"
+    api-key="KFEBZ-P2GKZ-A5PX4-7Q6Y7-KXOBF-XCB4C"
+    :center="center"
+    :zoom="zoom"
+    :control="control"
+    @click="handleClick"
+    @map_inited="onMapInited"
+  >
+    <div style="position: absolute; top: 0; left: 0; z-index: 2000">
+      <button @click.stop="mode = 'draw'">设置绘制模式</button>
+      <button @click.stop="mode = 'edit'">设置编辑模式</button>
+      <button @click.stop="activeId = 'polygon'">设置画多边形</button>
+      <button @click.stop="activeId = 'circle'">设置画圆形</button>
+      <button @click.stop="getOverlayList">获取图层列表</button>
+      <button @click.stop="onSelectGeometry">选中图形</button>
+      <button @click.stop="onGetSelectedList">获取选中集合图形</button>
+      <button @click.stop="onClear">清空选中</button>
+    </div>
+    <!--vue2使用:active-overlay-id.sync="activeId" -->
+    <tlbs-geometry-editor
+      ref="editorRef"
+      v-model:active-overlay-id="activeId"
+      :action-mode="mode"
+      polygon-id="polygon"
+      :default-polygon-geometries="geometries"
+      :polygon-styles="styles"
+      selectable
+      @select="onSelect"
+      @draw_complete="onDrowComplet"
+      @adjust_complete="onAdjustComplete"
+      @draw_error="onDrawError"
+    />
+  </tlbs-map>
 </template>
 <script setup>
-import { ref, watch } from 'vue';
-import { onMounted } from 'vue';
-import { getMapCoder } from '@/api/map';
+import { ref, watch } from 'vue'
+import { onMounted } from 'vue'
+import { getMapCoder } from '@/api/map'
+import { updateDept } from '@/api/system/dept'
 const paths = [
-    { lat: 40.041117253378246, lng: 116.2722415837743 },
-    { lat: 40.03942536171407, lng: 116.2726277820093 },
-    { lat: 40.03970460886076, lng: 116.27483769345417 },
-    { lat: 40.041404706498625, lng: 116.27443003983899 },
-];
-const mapRef = ref(null);
-const center = ref({ lat: 40.040452, lng: 116.273486 });
-const zoom = ref(17);
-const editorRef = ref(null);
-const mode = ref('edit');
-const activeId = ref('polygon');
+  { lat: 40.041117253378246, lng: 116.2722415837743 },
+  { lat: 40.03942536171407, lng: 116.2726277820093 },
+  { lat: 40.03970460886076, lng: 116.27483769345417 },
+  { lat: 40.041404706498625, lng: 116.27443003983899 },
+]
+const mapRef = ref(null)
+const center = ref({ lat: 40.040452, lng: 116.273486 })
+const zoom = ref(17)
+const editorRef = ref(null)
+const mode = ref('edit')
+const activeId = ref('polygon')
 const onToggleMode = () => {
-    mode.value = mode.value === 'draw' ? 'edit' : 'draw';
-};
+  mode.value = mode.value === 'draw' ? 'edit' : 'draw'
+}
 
 const onSelect = (e) => {
-    console.log('select', e);
-};
+  console.log('select', e)
+}
 const onDrowComplet = (geomeytry) => {
-    console.log(geomeytry);
-};
+  // 兼容 geomeytry 里可能的 paths 字段
+  const pointList = geomeytry.paths || geomeytry.pointList || [];
+  console.log({ pointList }, '这是地址获取到的数据');
+}
 const onAdjustComplete = (geomeytry) => {
-    console.log(geomeytry);
-};
+  // 兼容 geomeytry 里可能的 paths 字段
+  const pointList = geomeytry.paths || geomeytry.pointList || [];
+  console.log({ pointList }, '这是地址获取到的数据');
+  updateDept({ pointList: JSON.stringify(pointList) }).then((response) => {
+    proxy.$modal.msgSuccess('修改成功')
+    open.value = false
+    getList()
+  })
+}
 const onDrawError = (e) => {
-    console.log(e);
-};
+  console.log(e)
+}
 
 const getOverlayList = () => {
-    console.log(editorRef.value.editor.getOverlayList());
-};
+  console.log(editorRef.value.editor.getOverlayList())
+}
 
 const onMapInited = () => {
-    // 地图加载完成后，可以获取地图实例，调用地图实例方法
-    console.log(mapRef.value.map);
-};
+  // 地图加载完成后，可以获取地图实例，调用地图实例方法
+  console.log(mapRef.value.map)
+}
 
 const control = {
-    scale: {},
-    zoom: {
-        position: 'topRight',
-    },
+  scale: {},
+  zoom: {
+    position: 'topRight',
+  },
 }
 const geometries = [
-    {
-        id: 'firstPolygon',
-        styleId: 'polygon', // 样式id
-        paths, // 多边形的位置信息
-        properties: {
-            // 多边形的属性数据
-            title: 'polygon',
-        },
+  {
+    id: 'firstPolygon',
+    styleId: 'polygon', // 样式id
+    paths, // 多边形的位置信息
+    properties: {
+      // 多边形的属性数据
+      title: 'polygon',
     },
+  },
 ]
 
 const styles = {
-    polygon: {
-        color: '#3777FF', // 面填充色
-        showBorder: false, // 是否显示拔起面的边线
-        borderColor: '#00FFFF', // 边线颜色
-    },
+  polygon: {
+    color: '#3777FF', // 面填充色
+    showBorder: false, // 是否显示拔起面的边线
+    borderColor: '#00FFFF', // 边线颜色
+  },
 }
 
 function handleClick(e) {
-    console.log(e);
+  console.log(e)
 }
 function onClear() {
-    editorRef.value.editor.select([]);
+  editorRef.value.editor.select([])
 }
 function onSelectGeometry() {
-    editorRef.value.editor.select(['firstPolygon']);
+  editorRef.value.editor.select(['firstPolygon'])
 }
 function onGetSelectedList() {
-    console.log(editorRef.value.editor.getSelectedList());
+  console.log(editorRef.value.editor.getSelectedList())
 }
 </script>
 
 <style>
 .map-container {
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 </style>
 <style scoped>
 .control-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1001;
-    display: flex;
-    align-items: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1001;
+  display: flex;
+  align-items: center;
 }
 
 button {
-    padding: 4px;
-    background-color: #fff;
-    margin-right: 5px;
-    border: 1px solid #ddd;
+  padding: 4px;
+  background-color: #fff;
+  margin-right: 5px;
+  border: 1px solid #ddd;
 }
-</style>
+</style>