feat:圆形绘制

src/components/GMap.vue

@@ -16,6 +16,9 @@
       <div :class="state.currentType === 'polygon' ? 'g-action-item selection' : 'g-action-item'" @click="draw('polygon', true)">
         <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>
+      </div>
       <div v-if="mouseMode" class="g-action-item" @click="draw('off', false)">
         <a style="color: red;"><CloseOutlined /></a>
       </div>
@@ -443,7 +446,8 @@ import { computed, defineComponent, onMounted, reactive, ref, watch, nextTick }
 import {
   generateLineContent,
   generatePointContent,
-  generatePolyContent
+  generatePolyContent,
+  generateCircleContent
 } from '../utils/map-layer-utils'
 import { postElementsReq } from '/@/api/layer'
 import { MapDoodleType, MapElementEnum } from '/@/constants/map'
@@ -554,24 +558,24 @@ export default defineComponent({
       } as DeviceOsd
     })
     const shareId = computed(() => {
-      return store.state.layerBaseInfo.share
+      return store?.state?.layerBaseInfo.share
     })
     const defaultId = computed(() => {
-      return store.state.layerBaseInfo.default
+      return store?.state?.layerBaseInfo.default
     })
     const drawVisible = computed(() => {
-      return store.state.drawVisible
+      return store?.state?.drawVisible
     })
     const osdVisible = computed(() => {
-      return store.state.osdVisible
+      return store?.state?.osdVisible
     })
     const nevigationVisible = computed(() => {
-      return store.state.nevigationVisible
+      return store?.state?.nevigationVisible
     })
     const nevigationInformation = computed(() => {
-      return store.state.nevigationInformation
+      return store?.state?.nevigationInformation
     })
-    watch(() => store.state.deviceStatusEvent,
+    watch(() => store?.state?.deviceStatusEvent,
       data => {
         if (Object.keys(data.deviceOnline).length !== 0) {
           deviceTsaUpdateHook.initMarker(data.deviceOnline.domain, data.deviceOnline.device_callsign, data.deviceOnline.sn)
@@ -591,7 +595,7 @@ export default defineComponent({
       }
     )
 
-    watch(() => store.state.deviceState, data => {
+    watch(() => store?.state?.deviceState, data => {
       if (data.currentType === EDeviceTypeName.Gateway && data.gatewayInfo[data.currentSn]) {
         deviceTsaUpdateHook.moveTo(data.currentSn, data.gatewayInfo[data.currentSn].longitude, data.gatewayInfo[data.currentSn].latitude)
         if (osdVisible.value.visible && osdVisible.value.gateway_sn !== '') {
@@ -616,7 +620,7 @@ export default defineComponent({
     })
 
     watch(
-      () => store.state.wsEvent,
+      () => store?.state?.wsEvent,
       newData => {
         const useGMapCoverHook = useGMapCover()
         const event = newData
@@ -624,7 +628,7 @@ export default defineComponent({
         if (Object.keys(event.mapElementCreat).length !== 0) {
           console.log(event.mapElementCreat)
           const ele = event.mapElementCreat
-          store.state.Layers.forEach(layer => {
+          store?.state?.Layers.forEach(layer => {
             layer.elements.forEach(e => {
               if (e.id === ele.id) {
                 exist = true
@@ -710,6 +714,9 @@ export default defineComponent({
         case MapDoodleEnum.POLYGON:
           postPolygonResource(obj)
           break
+        case MapDoodleEnum.CIRCLE:
+          postCircleResource(obj)
+          break
         default:
           break
       }
@@ -734,6 +741,14 @@ export default defineComponent({
       store.state.coverList.push(obj)
       // console.log(store.state.coverList)
     }
+    async function postCircleResource (obj) {
+      const req = getCircleResource(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)
+    }
     async function postPolygonResource (obj) {
       console.log(obj, 'hafhhaf')
       const req = getPoygonResource(obj)
@@ -744,6 +759,17 @@ export default defineComponent({
       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 id = uuidv4()
+      return {
+        id,
+        name,
+        resource
+      }
+    }
 
     function getPinPositionResource (obj) {
       const position = obj.getPosition()
@@ -851,6 +877,23 @@ export default defineComponent({
             })
           }
           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/constants/map.ts

@@ -12,12 +12,14 @@ export const MapElementDefaultColor = MapElementColor.Default
 export enum MapDoodleColor {
   PinColor = '#2D8CF0',
   PolylineColor = '#3366FF',
-  PolygonColor = '#FF33FF'
+  PolygonColor = '#FF33FF',
+  CircleColor='pink'
 }
 
 export enum MapElementEnum {
   PIN = 0,
   LINE = 1,
-  POLY = 2
+  POLY = 2,
+  CIR = 3
 }
 export type MapDoodleType = 'pin' | 'polyline' | 'polygon' | 'off'

src/hooks/use-mouse-tool.ts

@@ -47,7 +47,18 @@ export function useMouseTool () {
     })
     root?.$mouseTool.on('draw', getDrawCallback)
   }
-
+  function drawCircle (type:MapDoodleType, getDrawCallback:Function) {
+    root?.$mouseTool.circle({
+      strokeColor: "#FF33FF",
+        strokeOpacity: 1,
+        strokeWeight: 6,
+        strokeOpacity: 0.2,
+        fillColor: '#1791fc',
+        fillOpacity: 0.4,
+        strokeStyle: 'solid',
+   })
+    root?.$mouseTool.on('draw', getDrawCallback)
+  }
   function drawOff (type:MapDoodleType) {
     root?.$mouseTool.close()
     root?.$mouseTool.off('draw')
@@ -65,6 +76,9 @@ export function useMouseTool () {
       case MapDoodleEnum.POLYGON:
         drawPolygon(type, getDrawCallback)
         break
+      case MapDoodleEnum.CIRCLE:
+        drawCircle(type, getDrawCallback)
+        break
       case MapDoodleEnum.Close:
         drawOff(type)
         break

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

@@ -338,7 +338,7 @@ function setBaseInfo () {
 onMounted(() => {
   const element = document.getElementsByClassName('scrollbar').item(0) as HTMLDivElement
   const parent = element?.parentNode as HTMLDivElement
-  scorllHeight.value = parent.clientHeight - parent.firstElementChild!.clientHeight
+  scorllHeight.value = parent?.clientHeight - parent?.firstElementChild!.clientHeight
   getAllElement()
 })
 function closeDrawer () {

src/types/map-enum.ts

@@ -2,5 +2,6 @@ export enum MapDoodleEnum {
     PIN = 'pin',
     POLYLINE = 'polyline',
     POLYGON = 'polygon',
+    CIRCLE = 'circle',
     Close = 'off'
 }

src/utils/genjson.ts

@@ -26,7 +26,17 @@ export interface GeojsonPolygon {
    coordinates: GeojsonCoordinate[][]
  }
 }
-
+export interface GeojsonCircle {
+  type: 'Feature'
+  properties: {
+    color: string
+    clampToGround?: boolean
+  }
+  geometry: {
+    type: 'Circle'
+    coordinates: GeojsonCoordinate
+  }
+ }
 export interface GeojsonPoint {
  type: 'Feature'
  properties: {
@@ -39,7 +49,7 @@ export interface GeojsonPoint {
  }
 }
 
-export type GeojsonFeature = GeojsonLine | GeojsonPolygon | GeojsonPoint
+export type GeojsonFeature = GeojsonLine | GeojsonPolygon | GeojsonPoint | GeojsonCircle
 
 export function geographic2Coordinate (position: MapGeographicPosition): GeojsonCoordinate {
   const coordinates: GeojsonCoordinate = [position.longitude, position.latitude]
@@ -79,3 +89,13 @@ export function generatePoint (position: MapGeographicPosition, properties: Geoj
     },
   }
 }
+export function generateCircle (position: GeojsonCoordinate, properties: GeojsonCircle['properties']): GeojsonFeature {
+  return {
+    type: 'Feature',
+    properties,
+    geometry: {
+      type: 'Circle',
+      coordinates: position,
+    },
+  }
+}

src/utils/map-layer-utils.ts

@@ -1,10 +1,10 @@
 import { pinAMapPosition, MapGeographicPosition, Layer, LayerType, LayerElevationLoadStatus } from '/@/types/map'
-import { generatePoint, generateLine, generatePolygon } from '/@/utils/genjson'
+import { generatePoint, generateLine, generatePolygon, generateCircle } from '/@/utils/genjson'
 import { MapDoodleColor, MapElementEnum } from '/@/constants/map'
 function getPinPosition (pinAMapPosition: pinAMapPosition):MapGeographicPosition {
   return { height: 0, latitude: pinAMapPosition.lat, longitude: pinAMapPosition.lng }
 }
-
+export type GeojsonCoordinate = [number, number, number?]
 export function generatePointContent (pinAMapPosition: pinAMapPosition) {
   const position = getPinPosition(pinAMapPosition)
   return {
@@ -15,6 +15,15 @@ export function generatePointContent (pinAMapPosition: pinAMapPosition) {
     })
   }
 }
+export function generateCircleContent (pinAMapPosition: GeojsonCoordinate) {
+  return {
+    type: MapElementEnum.CIR,
+    content: generateCircle(pinAMapPosition, {
+      color: MapDoodleColor.CircleColor,
+      clampToGround: true,
+    })
+  }
+}
 function getLieOrPolyPosition (mapPosition: pinAMapPosition[]):MapGeographicPosition[] {
   const position = [] as MapGeographicPosition[]
   mapPosition.forEach(item => {