添加修改标记点在地图上显示名称

Web/src/components/LayersTree.vue

@@ -4,7 +4,7 @@
   </div>
   <div v-else>
     <a-tree class="device-map-layers" @drop="onDrop" v-bind="$attrs" v-if="getTreeData.length">
-      <a-tree-node :id="layer.id" v-for="layer in getTreeData" :key="layer.id">
+      <a-tree-node :id="layer.id" v-for="layer in getTreeData" :key="layer.id" :disabled="true">
         <template #title>
           <div style="display: flex;align-items: center;">
             <FolderOutlined />

Web/src/hooks/use-g-map-cover.ts

@@ -51,6 +51,22 @@ export function useGMapCover() {
       icon: getPinIcon(color),
       extData: data
     })
+    const text = new AMap.Text({
+      position: new AMap.LngLat(coordinates[0], coordinates[1]),
+      offset: new AMap.Pixel(-30, -30),
+      text: name,
+      style: {
+        fontSize: 12,
+        padding: 0,
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+      },
+      extData: {
+        ...data,
+        id: data.id + '_text',
+      },
+    })
+    AddCoverToMap(text)
     marker.on('click', function (e: any) {
       const options = marker.getOptions()
       const id = options.extData.id;
@@ -72,6 +88,23 @@ export function useGMapCover() {
       strokeStyle: 'solid',
       extData: data
     })
+    const coordinatesList = coordinates[0];
+    const text = new AMap.Text({
+      position: new AMap.LngLat(coordinatesList[0], coordinatesList[1]),
+      offset: new AMap.Pixel(-30, -30),
+      text: name,
+      style: {
+        fontSize: 12,
+        padding: 0,
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+      },
+      extData: {
+        ...data,
+        id: data.id + '_text',
+      },
+    })
+    AddCoverToMap(text)
     polyline.on('click', function () {
       const options = polyline.getOptions()
       const id = options.extData.id;
@@ -94,6 +127,23 @@ export function useGMapCover() {
       strokeColor: color || normalColor,
       extData: data
     })
+    const coordinatesList = coordinates[0][0];
+    const text = new AMap.Text({
+      position: new AMap.LngLat(coordinatesList[0], coordinatesList[1]),
+      offset: new AMap.Pixel(-30, -30),
+      text: name,
+      style: {
+        fontSize: 12,
+        padding: 0,
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+      },
+      extData: {
+        ...data,
+        id: data.id + '_text',
+      },
+    })
+    AddCoverToMap(text)
     polygon.on('click', function () {
       const options = polygon.getOptions()
       const id = options.extData.id;
@@ -119,12 +169,14 @@ export function useGMapCover() {
 
   function updatePinElement(id: string, name: string, coordinates: GeojsonCoordinate, color?: string) {
     const elements = getElementFromMap(id)
+    const textElements = getElementFromMap(id + '_text')
     if (elements && elements.length > 0) {
       const element = elements[0]
       const icon = getPinIcon(color)
       element.setPosition(new AMap.LngLat(coordinates[0], coordinates[1]))
       element.setIcon(icon)
       element.setTitle(name)
+      textElements[0].setText(name)
     } else {
       init2DPin(name, coordinates, color, {
         id: id,
@@ -135,11 +187,13 @@ export function useGMapCover() {
 
   function updatePolylineElement(id: string, name: string, coordinates: GeojsonCoordinate[], color?: string) {
     const elements = getElementFromMap(id)
+    const textElements = getElementFromMap(id + '_text')
     if (elements && elements.length > 0) {
       const element = elements[0]
       const options = element.getOptions()
       options.strokeColor = color || normalColor
       element.setOptions(options)
+      textElements[0].setText(name)
     } else {
       initPolyline(name, coordinates, color, {
         id: id,
@@ -150,12 +204,14 @@ export function useGMapCover() {
 
   function updatePolygonElement(id: string, name: string, coordinates: GeojsonCoordinate[][], color?: string) {
     const elements = getElementFromMap(id)
+    const textElements = getElementFromMap(id + '_text')
     if (elements && elements.length > 0) {
       const element = elements[0]
       const options = element.getOptions()
       options.fillColor = color || normalColor
       options.strokeColor = color || normalColor
       element.setOptions(options)
+      textElements[0].setText(name)
     } else {
       initPolygon(name, coordinates, color, {
         id: id,

Web/src/hooks/use-mouse-tool.ts

@@ -5,14 +5,14 @@ import { getRoot } from '/@/root'
 import { MapDoodleEnum } from '/@/types/map-enum'
 import { EFlightAreaType } from '../types/flight-area'
 import { message } from 'ant-design-vue'
+import { ELocalStorageKey } from '../types'
 
 export function useMouseTool() {
   const root = getRoot()
+  const userName = localStorage.getItem(ELocalStorageKey.Username) || ''
 
   const state = reactive({
-    pinNum: 0,
-    polylineNum: 0,
-    PolygonNum: 0,
+    serial: 1,
     currentType: '',
   })
 
@@ -23,33 +23,35 @@ export function useMouseTool() {
 
   function drawPin(type: MapDoodleType, getDrawCallback: Function) {
     root?.$mouseTool.marker({
-      title: type + state.pinNum,
+      title: userName + state.serial,
       icon: pin2d8cf0,
     })
-    state.pinNum++
+    state.serial++
     root?.$mouseTool.on('draw', getDrawCallback)
   }
 
   function drawPolyline(type: MapDoodleType, getDrawCallback: Function) {
     root?.$mouseTool.polyline({
+      title: userName + state.serial,
       strokeColor: '#2d8cf0',
       strokeOpacity: 1,
       strokeWeight: 2,
       strokeStyle: 'solid',
-      title: type + state.polylineNum++
     })
+    state.serial++
     root?.$mouseTool.on('draw', getDrawCallback)
   }
 
   function drawPolygon(type: MapDoodleType, getDrawCallback: Function) {
     root?.$mouseTool.polygon({
+      title: userName + state.serial,
       strokeColor: '#2d8cf0',
       strokeOpacity: 1,
       strokeWeight: 2,
       fillColor: '#1791fc',
       fillOpacity: 0.4,
-      title: type + state.PolygonNum++
     })
+    state.serial++
     root?.$mouseTool.on('draw', getDrawCallback)
   }
 

Web/src/pages/page-web/projects/layer.vue → Web/src/pages/page-web/projects/layer/index.vue

@@ -141,7 +141,7 @@ async function getAllElement() {
 }
 
 function initMapCover() {
-  mapLayers.value.forEach(item => {
+  mapLayers.value.forEach((item: any) => {
     if (item.elements) {
       setMapCoverByElement(item.elements)
     }
@@ -201,8 +201,8 @@ function getCurrentLayer(id: string) {
   const Layers = store.state.Layers
   const key = id.replaceAll('resource__', '')
   let layer = null
-  const findCan = function (V) {
-    V.forEach(item => {
+  const findCan = function (V: any) {
+    V.forEach((item: any) => {
       if (item.id === key) {
         layer = item
       }
@@ -218,13 +218,13 @@ function getCurrentLayer(id: string) {
 function setBaseInfo() {
   const layer = selectedLayer.value
   if (layer) {
-    const geoType = layer.resource?.content.geometry.type
-    layerState.currentType = geoType
-    layerState.layerName = layer.name
-    layerState.layerId = layer.id
-    layerState.color = layer.resource?.content.properties.color
-    layerState.user_name = layer.resource?.user_name
-    layerState.element_from = layer.element_from
+    const geoType = layer.resource?.content.geometry.type;
+    layerState.currentType = geoType;
+    layerState.layerName = layer.name;
+    layerState.layerId = layer.id;
+    layerState.color = layer.resource?.content.properties.color;
+    layerState.user_name = layer.resource?.user_name;
+    layerState.element_from = layer.element_from;
     layerState.height = layer.height
     let coordinate: GeojsonCoordinate
     switch (geoType) {
@@ -272,7 +272,10 @@ async function deleteElement() {
     }
     visible.value = false
     store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
+    // 移除标点
     useGMapCoverHook.removeCoverFromMap(elementid)
+    // 移除文本覆盖物
+    useGMapCoverHook.removeCoverFromMap(elementid + '_text')
     getElementGroups()
   })
 }
@@ -335,9 +338,9 @@ async function updateElements() {
 
 function updateWgs84togcj02() {
   const layers = mapLayers.value
-  layers.forEach(item => {
+  layers.forEach((item: any) => {
     if (item.elements) {
-      item.elements.forEach(ele => {
+      item.elements.forEach((ele: any) => {
         updateCoordinates('wgs84-gcj02', ele)
       })
     }

Web/src/pages/page-web/projects/tsa.vue

@@ -237,7 +237,7 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, reactive, ref, watch } from 'vue'
-import Layer from '/@/pages/page-web/projects/layer.vue'
+import Layer from '/@/pages/page-web/projects/layer/index.vue'
 import { EDeviceTypeName, ELocalStorageKey } from '/@/types'
 import noData from '/@/assets/icons/no-data.png'
 import rc from '/@/assets/icons/rc.png'