feat: 修改经纬度和图标

src/assets/icons/circle.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1695029064053" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2979" width="32" height="32" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M512.00337692 223.62507194c-39.07811828 0-76.40824868 7.54812851-112.02349786 22.7966725-35.61524846 15.24854397-66.28448731 35.85361048-92.03419966 61.53711098-25.75633368 25.82254479-46.28194643 56.45205638-61.51062641 92.02757833-15.26178662 35.70794488-22.88274757 72.93213694-22.88274757 112.07646705 0 39.01190645 7.62096168 76.36852217 22.88274757 111.94404411 15.22868071 35.71456621 35.75429346 66.3440778 61.51062641 92.1666226 25.74971235 25.69012185 56.41895047 46.14952278 92.03419966 61.53049039a284.03475437 284.03475437 0 0 0 112.02349786 22.80329382c39.06487635 0 76.39500676-7.69379412 112.01025522-22.80329382 35.61524846-15.38096763 66.28448731-35.84698987 92.03419965-61.5304904 25.75633368-25.82254479 46.28194643-56.45205638 61.51062642-92.16662258 15.28827122-35.57552195 22.88274757-72.93213694 22.88274758-111.94404412 0-39.1443301-7.5944771-76.36852217-22.88274758-112.07646704-15.22868071-35.57552195-35.75429346-66.21165414-61.51062642-92.03419894-25.74971235-25.67687918-56.41895047-46.28194643-92.03419965-61.53049038C588.39838368 231.17982179 551.06163194 223.62507194 511.99675559 223.62507194m0-82.41364616c50.20167629 0 98.25809517 9.75297643 144.02359033 29.39797427 45.79860107 19.63837652 85.22764104 46.0104785 118.27387798 79.10968462 33.07272152 32.96678243 59.41833818 72.38920181 79.03023011 118.2606353 19.61851326 45.73901058 29.43770153 93.81529271 29.45094418 143.94413656 0.03972724 50.27450871-9.81918826 98.35079085-29.45094418 144.08980216-19.62513458 45.87143423-45.97075126 85.29385288-79.03023011 118.254014-33.03299426 33.10582743-72.43554966 59.47792868-118.27387797 79.12292725C610.19526027 872.88993219 562.19181056 882.78195289 512.00337692 882.78195289c-50.18843363 0-98.19188333-9.89202143-144.02359031-29.39797427-45.85157025-19.63837652-85.26736828-46.0104785-118.28712063-79.1096846C216.62656579 741.30751156 190.28757045 701.8850922 170.66243587 656.00703736 151.03068066 610.27464813 141.17176516 562.19836599 141.21149168 511.93047787c0.01324266-50.13546446 9.83243092-98.21174661 29.45094419-143.94413656 19.61189194-45.88467617 45.950888-85.3004742 79.03023011-118.26725664 33.0396156-33.10582743 72.47527689-59.47130809 118.28712063-79.11630594C413.73866043 150.96440221 461.78845799 141.21142578 511.99675559 141.21142578" p-id="2980" fill="#1296db"></path></svg>

src/components/GMap.vue

@@ -17,7 +17,7 @@
         <a><BorderOutlined class="fz18" /></a>
       </div>
       <div :class="state.currentType === 'circle' ? 'g-action-item selection' : 'g-action-item'" @click="draw('circle', true)">
-        <a><BorderOutlined class="fz18" /></a>
+        <a><a-image :src="cir" :preview="false" /></a>
       </div>
       <div v-if="mouseMode" class="g-action-item" @click="draw('off', false)">
         <a style="color: red;"><CloseOutlined /></a>
@@ -33,7 +33,7 @@
       </div>
     </div>
     <!-- 飞机OSD -->
-    <div v-if="osdVisible.visible && !osdVisible.is_dock" class="osd-panel fz12">
+    <div v-if="osdVisible?.visible && !osdVisible?.is_dock" class="osd-panel fz12">
       <div style="opacity: 0.8;background: #000;">
         <div class="pl5 pr5 flex-align-center flex-row flex-justify-between" style="border-bottom: 1px solid #515151; height: 18%;">
           <span>{{ osdVisible.callsign }}</span>
@@ -166,7 +166,7 @@
 
     </div> -->
     <!-- 机场OSD -->
-    <div v-if="osdVisible.visible && osdVisible.is_dock" class="osd-panel fz12">
+    <div v-if="osdVisible?.visible && osdVisible?.is_dock" class="osd-panel fz12">
       <div class="fz16 pl5 pr5 flex-align-center flex-row flex-justify-between" style="border-bottom: 1px solid #515151; height: 10%;">
         <span>{{ osdVisible.gateway_callsign }}</span>
         <span><a style="color: white;" @click="() => osdVisible.visible = false"><CloseOutlined /></a></span>
@@ -466,13 +466,14 @@ import {
   DeviceOsd, DeviceStatus, DockOsd, EGear, EModeCode, GatewayOsd, EDockModeCode,
   NetworkStateQualityEnum, NetworkStateTypeEnum, RainfallEnum, DroneInDockEnum
 } from '/@/types/device'
+import cir from '/@/assets/icons/circle.svg'
 import pin from '/@/assets/icons/pin-2d8cf0.svg'
 import M30 from '/@/assets/icons/m30.png'
 import {
   BorderOutlined, LineOutlined, CloseOutlined, ControlOutlined, TrademarkOutlined, ArrowDownOutlined,
   ThunderboltOutlined, SignalFilled, GlobalOutlined, HistoryOutlined, CloudUploadOutlined, RocketOutlined,
   FieldTimeOutlined, CloudOutlined, CloudFilled, FolderOpenOutlined, RobotFilled, ArrowUpOutlined, CarryOutOutlined,
-  EyeInvisibleOutlined, VideoCameraOutlined
+  VideoCameraOutlined, LeftCircleOutlined
 } from '@ant-design/icons-vue'
 import { EDeviceTypeName } from '../types'
 import DockControlPanel from './g-map/DockControlPanel.vue'
@@ -483,6 +484,7 @@ import LiveNewOthers from '/@/components/livestream-newOthers.vue'
 
 export default defineComponent({
   components: {
+    LeftCircleOutlined,
     LiveNewOthers,
     BorderOutlined,
     LineOutlined,
@@ -626,13 +628,11 @@ export default defineComponent({
         const event = newData
         let exist = false
         if (Object.keys(event.mapElementCreat).length !== 0) {
-          console.log(event.mapElementCreat)
           const ele = event.mapElementCreat
           store?.state?.Layers.forEach(layer => {
             layer.elements.forEach(e => {
               if (e.id === ele.id) {
                 exist = true
-                console.log('true')
               }
             })
           })
@@ -702,8 +702,6 @@ export default defineComponent({
     })
 
     function getDrawCallback ({ obj }) {
-      console.log(333)
-      console.log(obj)
       switch (state.currentType) {
         case MapDoodleEnum.PIN:
           postPinPositionResource(obj)
@@ -750,19 +748,17 @@ export default defineComponent({
       store.state.coverList.push(obj)
     }
     async function postPolygonResource (obj) {
-      console.log(obj, 'hafhhaf')
       const req = getPoygonResource(obj)
       setLayers(req)
       updateCoordinates('gcj02-wgs84', req)
       const result = await postElementsReq(shareId.value, req)
       obj.setExtData({ id: req.id, name: req.name, area: 222 })
       store.state.coverList.push(obj)
-      // console.log(store.state.coverList)
     }
     function getCircleResource (obj) {
     // name暂时写死，还在调试中
       const name = '1212'
-      const resource = generateCircleContent([...obj.getCenter().pos, obj.getRadius()])
+      const resource = generateCircleContent(obj.getCenter(), obj.getRadius())
       const id = uuidv4()
       return {
         id,
@@ -808,14 +804,13 @@ export default defineComponent({
       return { name, id }
     }
     function setLayers (resource: PostElementsBody) {
-      const layers = store.state.Layers
-      const layer = layers.find(item => item.id.includes(shareId.value))
+      const layers = store?.state?.Layers
+      const layer = layers ? layers.find(item => item.id.includes(shareId.value)) : ''
       // layer.id = 'private_layer' + uuidv4()
       // layer?.elements.push(resource)
       if (layer?.elements) {
         (layer?.elements as any[]).push(resource)
       }
-      // console.log('layers', layers)
       // store.commit('SET_LAYER_INFO', layers)
     }
     function updateCoordinates (transformType: string, element: any) {
@@ -880,7 +875,7 @@ export default defineComponent({
         } else if (MapElementEnum.CIR === type && geoType === 'Circle') {
           let position = element.resource?.content.geometry
             .coordinates
-            // 半径
+          // 半径
           const radius = position[2]
           if (transformType === 'wgs84-gcj02') {
             position = wgs84togcj02(
@@ -919,6 +914,7 @@ export default defineComponent({
       pin,
       state,
       M30,
+      cir,
       deviceInfo,
       EGear,
       EModeCode,

src/components/LayersTree.vue

@@ -47,7 +47,7 @@ const state = reactive({
 })
 const getTreeData = computed(() => {
   // console.log('props.treeData', JSON.parse(JSON.stringify(props.layerData)))
-  return JSON.parse(JSON.stringify(props.layerData))
+  return JSON.parse(JSON.stringify(props?.layerData))
 })
 const shareId = computed(() => {
   return store.state.layerBaseInfo.share

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

@@ -76,7 +76,6 @@ export function useGMapCover () {
       strokeColor: '#FF33FF',
       strokeOpacity: 1,
       strokeWeight: 6,
-      strokeOpacity: 0.2,
       fillOpacity: 0.4,
       strokeStyle: 'dashed',
       strokeDasharray: [10, 10],
@@ -84,7 +83,10 @@ export function useGMapCover () {
       fillColor: color,
       zIndex: 50,
     })
-
+    // 点击触发
+    circle.on('click', function (e) {
+      store.commit('SET_LAYER_ID', data.id)
+    })
     AddCoverToMap(circle)
   }
 

src/pages/page-web/projects/layer.vue

@@ -171,14 +171,13 @@ import importImg from '/@/assets/icons/import.svg'
 const root = getRoot()
 const store = useMyStore()
 let useGMapCoverHook = useGMapCover(store)
-console.log('store', store)
 const mapLayers = ref(store?.state?.Layers)
 const checkedKeys = ref<string[]>([])
 const selectedKeys = ref<string[]>([])
 const selectedKey = ref<string>('')
 const selectedLayer = ref<any>(null)
 const visible = ref<boolean>(false)
-store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
+store?.commit('SET_DRAW_VISIBLE_INFO', visible.value)
 const geoType = GeoType
 const layerState = reactive({
   layerName: '',
@@ -216,7 +215,7 @@ function initMapCover () {
   })
 }
 watch(
-  () => store.state.Layers,
+  () => store?.state.Layers,
   newData => {
     mapLayers.value = newData
   },
@@ -226,13 +225,13 @@ watch(
 )
 
 watch(
-  () => store.state.layerId,
+  () => store?.state.layerId,
   newLayerId => {
     selectedKey.value = 'resource__' + newLayerId
     selectedLayer.value = getCurrentLayer(selectedKey.value)
     setBaseInfo()
     visible.value = true
-    store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
+    store?.commit('SET_DRAW_VISIBLE_INFO', visible.value)
   },
   {
     deep: true // 监听属性变化
@@ -285,20 +284,18 @@ function checkLayer (keys: string[]) {
   console.log('checkLayer', keys, selectedKeys.value, checkedKeys.value)
 }
 function selectLayer (keys: string[], e) {
-  // console.log('selectLayer', e.node.eventKey, e.selected)
   if (e.selected) {
     selectedKey.value = e.node.eventKey
     selectedLayer.value = getCurrentLayer(selectedKey.value)
     setBaseInfo()
   }
   visible.value = e.selected
-  store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
+  store?.commit('SET_DRAW_VISIBLE_INFO', visible.value)
   // store.dispatch('updateElement', { type: 'is_select', id: e.node.eventKey, bool: e.selected })
 }
 function getCurrentLayer (id: string) {
-  const Layers = store.state.Layers
+  const Layers = store?.state.Layers
   const key = id.replaceAll('resource__', '')
-  // console.log('selectedKey.value', selectedKey.value)
   let layer = null
   const findCan = function (V) {
     V.forEach(item => {
@@ -312,7 +309,6 @@ function getCurrentLayer (id: string) {
   }
   findCan(Layers)
   // const layer = Layers.find(item => item.elements.find(el => el.id === key))
-  console.log('layer', layer)
   return layer
 }
 function setBaseInfo () {
@@ -348,7 +344,7 @@ onMounted(() => {
   getAllElement()
 })
 function closeDrawer () {
-  store.commit('SET_DRAW_VISIBLE_INFO', false)
+  store?.commit('SET_DRAW_VISIBLE_INFO', false)
   selectedKeys.value = []
 }
 function changeColor (color: Color) {
@@ -363,13 +359,12 @@ async function deleteElement () {
   const elementid = selectedLayer.value.id
 
   await deleteElementReq(elementid, {}).then(async (res: any) => {
-    // console.log('delete element res:', res)
     if (res.code !== 0) {
       console.warn(res)
       return
     }
     visible.value = false
-    store.commit('SET_DRAW_VISIBLE_INFO', visible.value)
+    store?.commit('SET_DRAW_VISIBLE_INFO', visible.value)
     useGMapCoverHook.removeCoverFromMap(elementid)
     getElementGroups()
   })
@@ -382,9 +377,9 @@ async function getElementGroups (type?: string) {
   mapLayers.value = result.data
   mapLayers.value = updateWgs84togcj02()
   if (type && type === 'init') {
-    store.dispatch('setLayerInfo', mapLayers.value)
+    store?.dispatch('setLayerInfo', mapLayers.value)
   }
-  store.commit('SET_LAYER_INFO', mapLayers.value)
+  store?.commit('SET_LAYER_INFO', mapLayers.value)
 }
 async function updateElements () {
   let content = null
@@ -489,6 +484,23 @@ function updateCoordinates (transformType: string, element: LayerResource) {
         })
       }
       element.resource.content.geometry.coordinates = [coordinates]
+    } else if (MapElementEnum.CIR === type && geoType === 'Circle') {
+      let position = element.resource?.content.geometry
+        .coordinates
+      // 半径
+      const radius = position[2]
+      if (transformType === 'wgs84-gcj02') {
+        position = wgs84togcj02(
+          position[0],
+          position[1]
+        ) as GeojsonCoordinate
+      } else if (transformType === 'gcj02-wgs84') {
+        position = gcj02towgs84(
+          position[0],
+          position[1]
+        ) as GeojsonCoordinate
+      }
+      element.resource.content.geometry.coordinates = [...position, radius]
     }
   }
 }

src/types/mapLayer.ts

@@ -72,7 +72,8 @@ export interface Color {
 export enum GeoType {
   LineString = 'LineString',
   Polygon = 'Polygon',
-  Point = 'Point'
+  Point = 'Point',
+  Circle ='Circle'
 }
 export enum ResourceStatus {
   NotShow,