Merge remote-tracking branch 'origin/master'

index.html

@@ -210,6 +210,9 @@
     </div>
   </div>
   <script type="module" src="/src/main.js"></script>
+  <!-- <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=KFEBZ-P2GKZ-A5PX4-7Q6Y7-KXOBF-XCB4C"></script> -->
+  <!-- <script src='https://map.qq.com/api/gljs?v=1.exp&key=KFEBZ-P2GKZ-A5PX4-7Q6Y7-KXOBF-XCB4C&libraries=tools'></script> -->
+   <script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=KFEBZ-P2GKZ-A5PX4-7Q6Y7-KXOBF-XCB4C"></script>
 </body>
 
 </html>

src/views/system/dept/index.vue

@@ -331,7 +331,12 @@ function handleDelete(row) {
 }
 
 function handleSetting(row) {
-  localStorage.setItem('mapDeptRow', JSON.stringify(row));
+  if (!row.pointList) row.pointList = JSON.stringify([]) // 如果pointList为空，则设置为空数组
+  console.log(row, '>>>>>>row000009999');
+  
+  
+  const coordinate = row ? JSON.stringify(row) :'[]'
+  localStorage.setItem('mapDeptRow', coordinate);
   router.push({ path: '/map-setting', query: { deptId: row.deptId } });
 }
 

src/views/system/dept/mapSetting copy.vue

@@ -0,0 +1,315 @@
+<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="drawPolygon">设置画多边形</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>
+      <button @click.stop="onSavePointList">保存地址</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"
+      @click="handleClick1"
+    /> -->
+
+    <tlbs-multi-marker
+      ref="markerRef"
+      :geometries="geometries1"
+      :styles="styles1"
+      :options="options"
+    />
+  </tlbs-map>
+</template>
+<script setup>
+import { ref, watch, onMounted, getCurrentInstance, nextTick } from 'vue'
+import { getMapCoder } from '@/api/map'
+import { updateDept } from '@/api/system/dept'
+import { useRoute } from 'vue-router'
+const { proxy } = getCurrentInstance()
+const route = useRoute()
+const deptForm = ref({})
+const mapDeptRow = localStorage.getItem('mapDeptRow')
+
+const coordinate = ref(JSON.parse(JSON.parse(mapDeptRow).pointList))
+
+onMounted(() => {
+  if (mapDeptRow) {
+    deptForm.value = JSON.parse(mapDeptRow)
+  }
+  console.log(coordinate.value, '>>>>>>zuobiao')
+})
+// 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')
+const latestPointList = ref([])
+const onToggleMode = () => {
+  mode.value = mode.value === 'draw' ? 'edit' : 'draw'
+}
+
+const onSelect = (e) => {
+  console.log('select', e)
+}
+const onDrowComplet = (geomeytry) => { // 绘制完成
+  const pointList = geomeytry.paths || geomeytry.pointList || [];
+  latestPointList.value = pointList;
+  console.log({ pointList }, '这是地址获取到的数据');
+}
+const onAdjustComplete = (geomeytry) => { // 调整完成
+  const pointList = geomeytry.paths || geomeytry.pointList || [];
+  latestPointList.value = pointList;
+  console.log({ pointList }, '这是地址获取到的数据');
+}
+const onDrawError = (e) => {
+  console.log(e)
+}
+
+const getOverlayList = () => {
+  console.log(editorRef.value.editor.getOverlayList())
+}
+
+const onMapInited = () => {
+  // 地图加载完成后，可以获取地图实例，调用地图实例方法
+  console.log(mapRef.value.map, '>>>>>>>地图实例')
+
+}
+
+const control = {
+  scale: {},
+  zoom: {
+    position: 'topRight',
+  },
+}
+
+console.log(coordinate.value, '>>>>>>8888888');
+
+const geometries = [
+  {
+    id: 'firstPolygon',
+    styleId: 'polygon', // 样式id
+    paths: coordinate.value, // 多边形的位置信息
+    properties: {
+      // 多边形的属性数据
+      title: 'polygon',
+    },
+  },
+]
+
+console.log(geometries.value, '>>>>>>geometries');
+
+
+const styles = {
+  polygon: {
+    color: '#3777FF', // 面填充色
+    showBorder: false, // 是否显示拔起面的边线
+    borderColor: '#00FFFF', // 边线颜色
+  },
+}
+
+// function handleClick(e) {
+//   console.log(e, '>>>>>>点击')
+// }
+function onClear() {
+  editorRef.value.editor.select([])
+}
+function onSelectGeometry() {
+  editorRef.value.editor.select(['firstPolygon'])
+}
+function onGetSelectedList() {
+  console.log(editorRef.value.editor.getSelectedList())
+}
+function onSavePointList() {
+  if (!latestPointList.value.length) {
+    proxy.$modal.msgError('请先绘制或调整图形');
+    return;
+  }
+  // 合并所有部门字段和 pointList
+  const payload = {
+    ...deptForm.value,
+    pointList: JSON.stringify(latestPointList.value)
+  }
+  updateDept(payload).then((response) => {
+    if (response.code === 200) {
+      proxy.$modal.msgSuccess('地址保存成功');
+      open.value = false;
+      getList();
+    } else {
+      proxy.$modal.msgError(response.msg || '地址保存失败');
+    }
+  })
+}
+
+// 设置绘制模式
+function drawPolygon() {
+  activeId.value = 'polygon'
+
+  // 获取地图实例
+  // const map = mapRef.value.map
+  // console.log(editorRef.value, '>>>>>>>99999');
+  // console.log(editorRef.value.polygon, '>>>>>>88888');
+
+  // 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 polygon = new Polygon({
+//     points: paths,
+//     fillColor: "#ff0000",
+//     strokeWidth: 12,
+//     strokeColor: "#ffff00",
+//     pattern: [10, 20, 30, 40],
+//     holes: undefined
+//   })
+//   editorRef.value.polygon(polygon);
+    
+  
+  // 设置绘制模式
+  // map.setActionMode('draw')
+  // // 设置绘制样式
+  // map.setDrawStyle({
+  //   color: '#3777FF', // 面填充色
+  //   showBorder: false, // 是否显示拔起面的边线
+  //   borderColor: '#00FFFF', // 边线颜色
+  // })
+  // // 设置绘制类型
+  // map.setDrawType('polygon')
+  // // 设置绘制回调
+  // map.on('draw_complete', (e) => {
+  //   console.log(e, '>>>>>>绘制完成')
+  // })
+
+  // const polygon = mapRef.value.map.addPolygon({
+  //   paths: coordinate.value,
+  //   style: {
+  //     color: '#3777FF', // 面填充色
+  //     showBorder: false, // 是否显示拔起面的边线
+  //     borderColor: '#00FFFF', // 边线颜色
+  //   }
+  // })
+}
+
+const markerRef = ref(null)
+let geometries1 = ref([
+  //  {
+  //     styleId: 'marker',
+  //     position: {
+  //       lat: 39.91799, lng: 116.397027
+  //     }
+  // },
+  // {
+  //   "styleId": "marker",
+  //   "position": {
+  //       "lat": 39.89497826231231,
+  //       "lng": 116.40317446514734
+  //   }
+  // }
+])
+const styles1 = ref({
+    marker: {
+      width: 20,
+      height: 30,
+      anchor: { x: 10, y: 30 },
+    }
+})
+
+const options = {
+  minZoom: 5,
+  maxZoom: 15,
+  // enableClick: true,
+  // enableDragging: false
+}
+
+function handleClick(e) {
+  console.log(e, '>>>>>>>eeee88');
+
+  const poin = {
+    id: `marker-${Date.now()}`,
+      styleId: `marker-${Date.now()}`,
+      position: {
+        lat: e.latLng.lat,
+        lng: e.latLng.lng
+      }
+      // position: {
+        // lat: 39.91799, lng: 116.397027
+      // }
+      
+  }
+    
+  geometries1.value.push(poin)
+  markerRef.value.geometries.push(poin)
+  // updateMarkers
+
+  console.log(markerRef.value, '.>>>>oin');
+
+  console.log(markerRef.value.marker, '.>>>>oin');
+
+  // 更新(markerRef.value.marker
+
+  // console.log(mapRef.value.map.add, '>>>>>>markerRef.value');
+  
+  console.log(geometries1.value, '>>>>>>geometries1');
+
+  //  nextTick(() => {
+  //   mapRef.value.map.invalidateSize();
+  // });
+}
+
+</script>
+
+<style>
+.map-container {
+  width: 100%;
+  height: 100%;
+}
+</style>
+<style scoped>
+.control-container {
+  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;
+}
+</style>

src/views/system/dept/mapSetting.vue

@@ -1,146 +1,218 @@
 <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>
+  <div>
+    <div style="margin-bottom: 30px;">
       <button @click.stop="onClear">清空选中</button>
-      <button @click.stop="onSavePointList">保存地址</button>
+
+      <!-- <button @click.stop="mode = 'draw'">设置绘制模式</button> -->
+       <button  @click.stop="editDrawingPolygon()">编辑地图区域</button>
+
+       <button  @click.stop="saveDrawingPolygon()">保存地址</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>
+    <div id="mapContainer"></div>
+  </div>
 </template>
 <script setup>
-import { ref, watch, onMounted, getCurrentInstance } from 'vue'
-import { getMapCoder } from '@/api/map'
+import { ref } from 'vue';
+import { onMounted } from 'vue';
 import { updateDept } from '@/api/system/dept'
-import { useRoute } from 'vue-router'
 const { proxy } = getCurrentInstance()
-const route = useRoute()
-const deptForm = ref({})
-onMounted(() => {
-  const row = localStorage.getItem('mapDeptRow')
-  if (row) {
-    deptForm.value = JSON.parse(row)
-  }
-})
-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')
-const latestPointList = ref([])
-const onToggleMode = () => {
-  mode.value = mode.value === 'draw' ? 'edit' : 'draw'
-}
 
-const onSelect = (e) => {
-  console.log('select', e)
-}
-const onDrowComplet = (geomeytry) => {
-  // 兼容 geomeytry 里可能的 paths 字段
-  const pointList = geomeytry.paths || geomeytry.pointList || [];
-  latestPointList.value = pointList;
-  console.log({ pointList }, '这是地址获取到的数据');
-}
-const onAdjustComplete = (geomeytry) => {
-  // 兼容 geomeytry 里可能的 paths 字段
-  const pointList = geomeytry.paths || geomeytry.pointList || [];
-  latestPointList.value = pointList;
-  console.log({ pointList }, '这是地址获取到的数据');
-}
-const onDrawError = (e) => {
-  console.log(e)
-}
 
-const getOverlayList = () => {
-  console.log(editorRef.value.editor.getOverlayList())
-}
+const mapDeptRow = localStorage.getItem('mapDeptRow')
+
+const storePolygonArr = ref(JSON.parse(JSON.parse(mapDeptRow).pointList).map((i) => {
+  return [i.lat, i.lng]
+}))
 
-const onMapInited = () => {
-  // 地图加载完成后，可以获取地图实例，调用地图实例方法
-  console.log(mapRef.value.map)
-}
 
-const control = {
-  scale: {},
-  zoom: {
-    position: 'topRight',
-  },
+console.log(storePolygonArr.value, '>>>>>>>>>');
+
+
+let map = null // 地图实例
+let marker = null // 点标记实例
+let polygon = null // 多边形实例
+let editor = null // 几何图形编辑器实例
+
+let mapCenter = ref([40.038515, 116.272185]) // 地图中心点坐标
+let coordinates = ref([40.038515, 116.272185]) // 坐标点
+let polygonArr = ref(storePolygonArr.value) // 多边形坐标点数组
+
+// 初始化地图
+function initMap() {
+  //定义地图中心点坐标
+  var center = new TMap.LatLng(40.038515, 116.272185)
+  //定义map变量，调用 TMap.Map() 构造函数创建地图
+  map = new TMap.Map(document.getElementById('mapContainer'), {
+    center: mapCenter.value,//设置地图中心点坐标
+    zoom: 17.2,   //设置地图缩放级别
+    pitch: 43.5,  //设置俯仰角
+    rotation: 45    //设置地图旋转角度
+  });
+
+  // 绘制多边形
+  drawPolygon(polygonArr.value)
+
+  // 改变地图中心点
+  polygonArr.value[0] && map.setCenter(polygonArr.value[0])
+
 }
-const geometries = [
-  {
-    id: 'firstPolygon',
-    styleId: 'polygon', // 样式id
-    paths, // 多边形的位置信息
-    properties: {
-      // 多边形的属性数据
-      title: 'polygon',
-    },
-  },
-]
-
-const styles = {
-  polygon: {
-    color: '#3777FF', // 面填充色
-    showBorder: false, // 是否显示拔起面的边线
-    borderColor: '#00FFFF', // 边线颜色
-  },
+  
+
+// 绘制多边形公共方法
+function drawPolygon(pathArr = polygonArr.value) {
+  let path = pathArr.map(p => {
+    return new TMap.LatLng(p[0], p[1])
+  })
+
+  //初始化polygon
+  polygon = new TMap.MultiPolygon({
+      id: 'polygon-layer', //图层id
+      map: map, //设置多边形图层显示到哪个地图实例中
+      //多边形样式
+      styles: {
+          'polygon': new TMap.PolygonStyle({
+              // 'color': '#3777FF', //面填充色
+              'showBorder':false, //是否显示拔起面的边线
+              'borderColor': '#3777FF' //边线颜色
+          })
+      },
+      //多边形数据
+      geometries: [
+          {
+            'id': 'polygon133', //该多边形在图层中的唯一标识（删除、更新数据时需要）
+            'styleId': 'polygon', //绑定样式名
+            'paths': path, //多边形轮廓
+          }
+      ]
+  });
 }
 
-function handleClick(e) {
-  console.log(e)
+
+// 显示点标记公共方法
+function showMarker(point = coordinates.value ) { 
+   marker = new TMap.MultiMarker({
+        // id: "marker-layer", //图层id
+        map: map,
+        styles: { //点标注的相关样式
+            "marker": new TMap.MarkerStyle({
+                "width": 25,
+                "height": 35,
+                "anchor": { x: 16, y: 32 },
+                // "src": "img/marker.png"
+            })
+        },
+        geometries: [{ //点标注数据数组
+            // "id": "demo",
+            // "styleId": "marker",
+            "position": new TMap.LatLng(...point),
+            // "properties": {
+            //     "title": "marker"
+            // }
+        }]
+    });
+
 }
+
+// 清空多边形
 function onClear() {
-  editorRef.value.editor.select([])
-}
-function onSelectGeometry() {
-  editorRef.value.editor.select(['firstPolygon'])
+  
+  if (polygon) {
+    polygon.setMap(null); // 从地图移除多边形
+    // 清除编辑器
+    polygon = null;
+  }
+  // 清空路径数据
+  polygonArr.value = [];
 }
-function onGetSelectedList() {
-  console.log(editorRef.value.editor.getSelectedList())
+
+// 绘制多边形
+function editDrawingPolygon() { 
+  if (!polygon) {
+    console.warn('没有可编辑的多边形');
+
+
+    // 初始化几何图形及编辑器
+      editor = new TMap.tools.GeometryEditor({
+        map, // 编辑器绑定的地图对象
+        overlayList: [ // 可编辑图层
+            {
+                //GeometryEditor 以 MultiPolygon（可以理解为多边形图层）激活进行编辑
+                id: 'polygon133',
+                overlay: new TMap.MultiPolygon({
+                    map
+                }),
+            }
+        ],
+        actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, //编辑器的工作模式
+        snappable: true // 开启邻近吸附
+      });
+
+      // 监听绘制结束事件，获取绘制几何图形
+      editor.on('draw_complete', (geometry) => {
+        console.log(geometry);
+
+        const paths = geometry.paths
+        polygonArr.value = paths.map(i => [i.lat, i.lng])
+
+
+        drawPolygon(polygonArr.value)
+      });
+      //围栏绘制完成变成多边形
+
+    return;
+  }
+
+
+  // 初始化几何图形编辑器
+  editor = new TMap.tools.GeometryEditor({
+    map, // 编辑器绑定的地图对象
+    overlayList: [ // 可编辑图层
+      {
+        id: 'polygon133', // 多边形的ID
+        overlay: polygon // 要编辑的多边形图层
+      }
+    ],
+    actionMode: TMap.tools.constants.EDITOR_ACTION.EDIT, // 设置为编辑模式
+    snappable: true, // 开启邻近吸附
+    selectable: true // 开启点选功能
+  });
+
+   editor.on('adjust_complete', (result) => {
+        const newPaths = result.paths
+        polygonArr.value = newPaths.map(point => [point.lat, point.lng]);
+        console.log('多边形更新:', polygonArr.value );
+    });
+  // 监听编辑完成事件
+  // editor.on('draw_complete', (geometry) => {
+  //     console.log(geometry);
+  // });
+  
 }
-function onSavePointList() {
-  if (!latestPointList.value.length) {
-    proxy.$modal.msgError('请先绘制或调整图形');
+
+function saveDrawingPolygon() {
+  if (!polygonArr.value || !polygonArr.value.length) {
+    console.log('>>>>>>xian hui zhi');
+    
+    // ElMessage.error('请先绘制或调整图形');
     return;
   }
-  // 合并所有部门字段和 pointList
+
+
+  editor.stop()
+
+  console.log(polygonArr.value, '.>>>>>pointList');
+  const arr = polygonArr.value.map(i => {
+    return {
+      lat: i[0],
+      lng: i[1]
+    }
+  })
+  
   const payload = {
-    ...deptForm.value,
-    pointList: JSON.stringify(latestPointList.value)
+    ...JSON.parse(mapDeptRow),
+    pointList: JSON.stringify(arr)
   }
   updateDept(payload).then((response) => {
     if (response.code === 200) {
@@ -152,6 +224,16 @@ function onSavePointList() {
     }
   })
 }
+
+
+onMounted(() => { 
+  initMap()
+})
+
+onUnmounted(() => { 
+  // 注销地图实例
+  map.destroy()
+ })
 </script>
 
 <style>