多边形圆

src/views/gis/layout/index.vue

@@ -266,7 +266,7 @@ export default defineComponent({
             flag = true
             if (f.get('featureType') === 'qy') {  //  企业
               //  恢复上一个要素的样式
-              if (f.getId() !== state.qyParams.tempFeature?.getId()) {
+              if (f.getId() !== state.qyParams.tempFeature?.getId() || state.qyParams.overlay.getPosition() === undefined) {
                 state.qyParams.tempFeature?.get('resetStyle')?.()
                 state.qyParams.analysisSource?.clear()
                 //  新的要素
@@ -279,8 +279,10 @@ export default defineComponent({
                 store.dispatch('gis/LOAD_ACTIVE_QY_ID', f.getId())
                 //  备份新的要素
                 state.qyParams.tempFeature = f
+                state.qyParams.overlay.setPosition(f.getGeometry().getCoordinates())
+              } else {
+                state.qyParams.overlay.setPosition(undefined)
               }
-              state.qyParams.overlay.setPosition(f.getGeometry().getCoordinates())
             } else if (f.get('featureType') === 'sb') { //  设备
               //  恢复上一个要素的样式
               if (f.getId() !== state.qyParams.tempSbFeature?.getId()) {
@@ -493,23 +495,8 @@ export default defineComponent({
       // setCircle()
     }
     const setCircle = () => {
-      const transformProjection = (arr, EPSG, EPSG2) => {
-        try {
-          if (EPSG2 && EPSG) {
-            if (arr && arr.length === 4) {
-              return proj.transformExtent(arr, EPSG, EPSG2);
-            } else {
-              return proj.transform(arr, EPSG, EPSG2);
-            }
-          }
-          return undefined;
-        } catch (e) {
-          console.error(e);
-        }
-      }
-      //  @ts-ignore
-      state.qyParams.analysisCircle.getGeometry().setRadius(transformProjection([state.qyParams.qyInfo['5'].radius * 1000, 0], 'EPSG:3857', 'EPSG:4326')[0] - transformProjection([0, 0], 'EPSG:3857', 'EPSG:4326')[0],'XY')
-      state.qyParams.analysisCircle.getGeometry().setCenter(state.qyParams.qyInfo.coordinates)
+      const circle = turf.circle(state.qyParams.qyInfo.coordinates, state.qyParams.qyInfo['5'].radius, {units: 'kilometers'})
+      state.qyParams.analysisCircle.setGeometry(new geom.Polygon(circle.geometry.coordinates))
     }
     const onRadiusSubmit = () => {
       if (!state.qyParams.analysisLayer) {
@@ -530,9 +517,7 @@ export default defineComponent({
             })
           ]
         });
-        state.qyParams.analysisCircle = new ol.Feature({
-          geometry: new geom.Circle(state.qyParams.qyInfo.coordinates, 0),
-        })
+        state.qyParams.analysisCircle = new ol.Feature()
         state.qyParams.analysisSource.addFeature(state.qyParams.analysisCircle)
         setCircle()
         state.map.addLayer(state.qyParams.analysisLayer)

src/views/gis/layout/tools/analysis.vue

@@ -121,6 +121,7 @@ import {fromCircle} from "ol/geom/Polygon";
 import {unByKey} from "ol/Observable";
 import * as sphere from "ol/sphere";
 import SelectChartCom from "@/views/gis/layout/tools/select-chart.vue";
+import * as turf from "@turf/turf";
 
 export default defineComponent({
   name: '',
@@ -150,7 +151,7 @@ export default defineComponent({
         },
         analysisFeat: <any>null,
         analysisLayer: <any>null,
-        analysisModify: <any>null,
+        // analysisModify: <any>null,
         analysisDraw: <any>null,
         switchType: 'power',
         result: {
@@ -198,9 +199,9 @@ export default defineComponent({
     const initLayer = () => {
       if (state.cusTransfer.analysisLayer) {
         state.cusTransfer.analysisLayer.setVisible(true)
-        if (state.cusTransfer.analysisModify) {
-          props.map.addInteraction(state.cusTransfer.analysisModify);
-        }
+        // if (state.cusTransfer.analysisModify) {
+        //   props.map.addInteraction(state.cusTransfer.analysisModify);
+        // }
         if (state.cusTransfer.analysisDraw) {
           props.map.addInteraction(state.cusTransfer.analysisDraw);
         }
@@ -229,17 +230,17 @@ export default defineComponent({
         });
         state.cusTransfer.analysisLayer.set(layerFlag[0], layerFlag[1])
         props.map.addLayer(state.cusTransfer.analysisLayer);
-        state.cusTransfer.analysisModify = new interaction.Modify({
-          source: state.cusTransfer.analysisSource,
-        });
-        props.map.addInteraction(state.cusTransfer.analysisModify)
-        state.cusTransfer.analysisModify.on('modifyend', evt => {
-          try {
-            const feat = evt.features.item(0)
-            getCircleParams(feat.getGeometry())
-          } catch {
-          }
-        })
+        // state.cusTransfer.analysisModify = new interaction.Modify({
+        //   source: state.cusTransfer.analysisSource,
+        // });
+        // props.map.addInteraction(state.cusTransfer.analysisModify)
+        // state.cusTransfer.analysisModify.on('modifyend', evt => {
+        //   try {
+        //     const feat = evt.features.item(0)
+        //     getCircleParams(feat.getGeometry())
+        //   } catch {
+        //   }
+        // })
 
         let sketch;
         let helpTooltip;
@@ -293,7 +294,7 @@ export default defineComponent({
           props.map.un('pointermove', pointerMoveHandler)
           state.cusTransfer.analysisDraw = null
           state.cusTransfer.analysisFeat = evt.feature
-          getCircleParams(state.cusTransfer.analysisFeat.getGeometry())
+          getCircleParams(evt.feature.getGeometry())
         }
         state.cusTransfer.analysisDraw.on('drawend', drawendHandle);
         const getCircleParams = (circle) => {
@@ -320,21 +321,8 @@ export default defineComponent({
       }
     }
     const  setCircle = () => {
-      const transformProjection = (arr, EPSG, EPSG2) => {
-        try {
-          if (EPSG2 && EPSG) {
-            if (arr && arr.length === 4) {
-              return proj.transformExtent(arr, EPSG, EPSG2);
-            } else {
-              return proj.transform(arr, EPSG, EPSG2);
-            }
-          }
-          return undefined;
-        } catch (e) {
-          console.error(e);
-        }
-      }
-      state.cusTransfer.analysisFeat.getGeometry().setRadius(transformProjection([state.cusTransfer.draw.radius * 1000, 0], 'EPSG:3857', 'EPSG:4326')[0] - transformProjection([0, 0], 'EPSG:3857', 'EPSG:4326')[0],'XY')
+      const circle = turf.circle(state.cusTransfer.draw.center, state.cusTransfer.draw.radius, {units: 'kilometers'})
+      state.cusTransfer.analysisFeat.setGeometry(new geom.Polygon(circle.geometry.coordinates))
     }
     const initData = () => {
       state.cusTransfer.result.power.data = []
@@ -409,9 +397,9 @@ export default defineComponent({
     })
     onUnmounted(() => {
       state.cusTransfer.analysisLayer.setVisible(false)
-      if (state.cusTransfer.analysisModify) {
-        props.map.removeInteraction(state.cusTransfer.analysisModify);
-      }
+      // if (state.cusTransfer.analysisModify) {
+      //   props.map.removeInteraction(state.cusTransfer.analysisModify);
+      // }
       if (state.cusTransfer.analysisDraw) {
         props.map.removeInteraction(state.cusTransfer.analysisDraw);
       }