地图边界

src/components/Map/YztMap/index.vue

@@ -18,7 +18,7 @@
 <script setup lang="ts">
 import 'ol/ol.css';
 import rightTool from '../rightTool.vue';
-import mmJson from '@/assets/json/mm.json';
+import mmJson from '@/assets/json/mm2.json';
 import { olMap } from '@/utils/olMap/olMap';
 import { PointType } from '@/api/globalMap/type';
 import { ScaleLine } from 'ol/control';

src/components/Map/index.vue

@@ -55,6 +55,7 @@ import {
 import { pointDetailTemplate } from '@/views/globalMap/data/mapData';
 import useAppStore from '@/store/modules/app';
 import { getRescueTeamsInfo } from '@/api/globalMap/rescueTeam';
+import mmJson from '@/assets/json/mm2.json';
 interface Props {
   activeMap: string;
   pointType: PointType[];
@@ -127,6 +128,7 @@ const mapUtils = useAMap({
     map.on('zoomchange', zoomChangeHandler);
     // 添加遮罩
     if (props.showMask) {
+      // creatMask2(mmJson, { strokeWeight: 2 });
       creatMask([{ strokeWeight: 2 }]);
     }
     drawTool.initMouseTool({ container: 'aMap', map, AMap });
@@ -198,6 +200,7 @@ const {
   hideInfo,
   handleHover,
   creatMask,
+  creatMask2,
   removeMask,
   trackPlayback
 } = { ...mapUtils };

src/hooks/AMap/useAMap.ts

@@ -19,7 +19,7 @@ export function useAMap(options) {
       version: !!options.version ? options.version : '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
       plugins: options.plugins
         ? options.plugins
-        : ['AMap.Scale', 'AMap.RangingTool', 'AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.MarkerCluster', 'AMap.DistrictSearch', 'AMap.MoveAnimation', 'AMap.Driving', 'AMap.Geocoder', 'AMap.PlaceSearch']
+        : ['AMap.Scale', 'AMap.RangingTool', 'AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.MarkerCluster', 'AMap.DistrictSearch', 'AMap.MoveAnimation', 'AMap.Driving', 'AMap.Geocoder', 'AMap.PlaceSearch', 'AMap.GeoJSON']
     }).then((res) => {
       AMap = res;
       map = new AMap.Map(options.el ? options.el : 'aMap', {
@@ -82,7 +82,7 @@ export function useAMap(options) {
     }
     addPoints = points;
     const count = points.length;
-    const _renderClusterMarker = function (context) {
+    const _renderClusterMarker = function(context) {
       // 聚合中点个数
       const clusterCount = context.count;
       const div = document.createElement('div');
@@ -103,7 +103,7 @@ export function useAMap(options) {
         map.setZoomAndCenter(map.getZoom() + 1, bounds.getCenter());
       });
     };
-    const _renderMarker = function (context) {
+    const _renderMarker = function(context) {
       const content =
         '<div style="display: flex;flex-direction: column;align-items: center;justify-content: center">' +
         '<div style="background: url(' +
@@ -119,7 +119,7 @@ export function useAMap(options) {
       context.marker.setContent(content);
       context.marker.setOffset(offset);
       context.marker.setExtData(context.data[0]);
-      context.marker.on('click', function (e) {
+      context.marker.on('click', function(e) {
         const extData = e.target.getExtData();
         let index = 0;
         let index2 = 0;
@@ -241,7 +241,7 @@ export function useAMap(options) {
     new AMap.DistrictSearch({
       extensions: 'all',
       subdistrict: 0
-    }).search(name, function (status, result) {
+    }).search(name, function(status, result) {
       // 外多边形坐标数组和内多边形坐标数组
       const outer = [
         new AMap.LngLat(-360, 90, true),
@@ -272,6 +272,43 @@ export function useAMap(options) {
       maskPolygon = null;
     }
   };
+  const creatMask2 = (data, option) => {
+    // 外多边形坐标数组和内多边形坐标数组
+    const outer = [
+      new AMap.LngLat(-360, 90, true),
+      new AMap.LngLat(-360, -90, true),
+      new AMap.LngLat(360, -90, true),
+      new AMap.LngLat(360, 90, true)
+    ];
+    //outer
+    const pathArray = [outer];
+    data.features.forEach((item, index) => {
+      let arr = [];
+      const geometry = item.geometry;
+      geometry.coordinates.forEach((coordinate) => {
+        if (geometry.type === 'MultiPolygon') {
+          coordinate[0].forEach(coordinate2 => {
+            arr.push(coordinate2);
+          });
+          pathArray.push(arr);
+          arr = [];
+        } else {
+          arr.push(coordinate);
+        }
+      });
+      if (arr.length == 0) return;
+      pathArray.push(arr);
+    });
+    maskPolygon = new AMap.Polygon({
+      path: pathArray,
+      strokeColor: option.strokeColor ? option.strokeColor : '#268ab9',
+      strokeOpacity: option.strokeOpacity ? option.strokeOpacity : 1,
+      strokeWeight: option.strokeWeight ? option.strokeWeight : 1,
+      fillColor: option.fillColor ? option.fillColor : '#10243b',
+      fillOpacity: option.fillOpacity ? option.fillOpacity : 0.65
+    });
+    map.add(maskPolygon);
+  };
   let moveMarker, movePolyline, movePassedPolyline, timerId;
   const trackPlayback = (lineArr) => {
     if (timerId) {
@@ -308,12 +345,12 @@ export function useAMap(options) {
       strokeWeight: 6 //线宽
     });
 
-    moveMarker.on('moving', function (e) {
+    moveMarker.on('moving', function(e) {
       movePassedPolyline.setPath(e.passedPath);
       map.setCenter(e.target.getPosition(), true);
     });
 
-    moveMarker.on('moveend', function (e) {
+    moveMarker.on('moveend', function(e) {
       index++;
       if (index === lineArr.length - 1) {
         timerId = setTimeout(() => {
@@ -475,6 +512,7 @@ export function useAMap(options) {
     handleHover,
     creatMask,
     removeMask,
+    creatMask2,
     trackPlayback,
     drawData
   };

src/utils/notification.ts

@@ -92,3 +92,10 @@ export const showWarningMsg: any = (msg: string, duration?: number) => {
   toastElement = createNotificationElement('warning', msg);
   removeNotificationElement(duration);
 };
+
+// 创建确认提示弹窗
+export const showConfirmModal: any = (msg: string) => {
+  return new Promise((resolve, reject) => {
+
+  })
+};

src/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -810,15 +810,15 @@ const handleSendForm = () => {
   if (!form.value.pattern_name) {
     return proxy?.$modal.msgWarning('请填写预案名称');
   }
-  // webSock = createWebSocket('NgIip9fMfoAknntOY-hXR', getWebSocketData);
-  // patternId.value = 'NgIip9fMfoAknntOY-hXR';
-  createCollaboration(form.value).then(() => {
-    patternId.value = form.value.pattern_id;
-    webSock = createWebSocket(form.value.pattern_id, getWebSocketData);
+  webSock = createWebSocket('X_cBqh0q1GUVhTOmS5c8w', getWebSocketData);
+  patternId.value = 'X_cBqh0q1GUVhTOmS5c8w';
+  // createCollaboration(form.value).then(() => {
+  //   patternId.value = form.value.pattern_id;
+  //   webSock = createWebSocket(form.value.pattern_id, getWebSocketData);
     showForm.value = false;
     collaboration.value = true;
     proxy?.$modal.msgSuccess('开启协同标绘成功');
-  });
+  // });
 };
 const handleShowDialog = () => {
   editData.value = {