fix

index.html

@@ -25,6 +25,7 @@
     <!-- <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.1/build/g6.js"></script> -->
     <link rel="stylesheet" href="<%- mapurl %>/minemapapi/v2.1.0/minemap.css">
     <script src="<%- mapurl %>/minemapapi/v2.1.0/minemap.js"></script>
+    <script src="<%- mapurl %>/minemapapi/v2.1.0/plugins/turf/turf.min.js"></script>
     <script>
         minemap.domainUrl = '<%- mapurl %>';
         minemap.dataDomainUrl = '<%- mapurl %>';
@@ -132,30 +133,30 @@
             //     }
             // }
             // var index = 0;
-            function  detectZoom () {
-		      let ratio = 0,
-		        screen = window.screen,
-		        ua = navigator.userAgent.toLowerCase();
-		      if (window.devicePixelRatio !== undefined) {
-		        ratio = window.devicePixelRatio;
-		      } else if (~ua.indexOf('msie')) {
-		        if (screen.deviceXDPI && screen.logicalXDPI) {
-		          ratio = screen.deviceXDPI / screen.logicalXDPI;
-		        }
-		      } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
-		        ratio = window.outerWidth / window.innerWidth;
-		      }
-		      if (ratio) {
-		        ratio = Math.round(ratio * 100);
-		      }
-		      return ratio;
-		  }
+            function detectZoom() {
+                let ratio = 0,
+                    screen = window.screen,
+                    ua = navigator.userAgent.toLowerCase();
+                if (window.devicePixelRatio !== undefined) {
+                    ratio = window.devicePixelRatio;
+                } else if (~ua.indexOf('msie')) {
+                    if (screen.deviceXDPI && screen.logicalXDPI) {
+                        ratio = screen.deviceXDPI / screen.logicalXDPI;
+                    }
+                } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
+                    ratio = window.outerWidth / window.innerWidth;
+                }
+                if (ratio) {
+                    ratio = Math.round(ratio * 100);
+                }
+                return ratio;
+            }
 
             function refreshRem() {
 
                 const m = detectZoom();
                 console.log(m, 'MMMMMMMMMMMMMMM')
-                document.body.style.zoom = 100/Number(m);
+                document.body.style.zoom = 100 / Number(m);
                 if (window.map != undefined) {
                     map.resize();
                 }

src/components/MarkerMap/index.tsx

@@ -93,6 +93,8 @@ interface State {
   markers: MarkerType[];
   positions: string[];
   hasTypes: string[];
+  markCircle: any;
+  markCirclelayer:any;
   // theSocket: null;
 }
 
@@ -154,9 +156,13 @@ export default defineComponent({
       markers: [],
       positions: [],
       hasTypes: [],
+      markCircle: {},
+      markCirclelayer: {},
       // theSocket:null
     });
 
+
+      
     const store = useMarkerStore();
     const mainstore = useMainStore();
     const incidentStore = useIncidentStore();
@@ -701,6 +707,45 @@ export default defineComponent({
                 )
                 : image;
           
+          try {
+            // state.map.removeSource('pointSource');
+            // state.map.removeLayer('polygonLayer');
+             if (type === '应急事件') {
+               state.markCircle = {
+                 type: 'geojson',
+                 data: turf.circle(
+                   [
+                     parseFloat(i.locations?.split(',')[0] ?? '0'),
+                     parseFloat(i.locations?.split(',')[1] ?? '0'),
+                   ],
+                   5,
+                   {
+                     steps: 164,
+                     units: 'kilometers',
+                     properties: { foo: 'bar' },
+                   },
+                 ),
+               };
+               // mySource = state.markCircle;
+               state.map.addSource('pointSource', state.markCircle);
+
+               state.markCirclelayer = {
+                 id: 'polygonLayer',
+                 type: 'fill',
+                 source: 'pointSource',
+                 layout: {},
+                 paint: {
+                   'fill-color': '#0dacfc',
+                   'fill-opacity': 0.2,
+                   'fill-translate': [-10, -10],
+                   'fill-outline-color': '#0a217d',
+                 },
+               };
+               state.map.addLayer(state.markCirclelayer);
+             }
+          } catch (E) {}
+         
+          
           
           if (type == "视频监控") { 
             if (i.isOnline == false) { 
@@ -780,7 +825,7 @@ export default defineComponent({
             imagep.innerHTML = "";
             markp.setZIndex(0);
         };
-            
+          
 
           return {
             locations: i.locations,
@@ -844,8 +889,8 @@ export default defineComponent({
       type: MarkerMapType,
       markers: State['markers'],
     ) => {
+   
       state.hasTypes = state.hasTypes.filter((t) => t !== type);
-
       const locations = markers.map((i) => i.locations);
       state.markers.forEach((m) => {
         if (locations.includes(m.locations)) {
@@ -863,6 +908,12 @@ export default defineComponent({
       handleFitBounds();
     };
     const handleRemoveAllMarkers = () => {
+      try {
+         state.map.removeSource('pointSource');
+         state.map.removeLayer('polygonLayer');
+        
+      } catch (E) { }
+     
       state.markers.forEach((m) => {
         m.marker?.remove();
         m.popup?.remove();
@@ -1030,6 +1081,7 @@ export default defineComponent({
         } else {
           handleRemoveAllMarkers();
           if (state.types.includes('应急事件')) {
+            
             state.types.forEach((next) => {
               actionTypes.value.forEach((item) => {
                 if (next === item.type) {