高德地图 粤政图 描边

src/components/Map/YztMap/index.vue

@@ -6,6 +6,7 @@
 
 <script setup lang="ts">
 import 'ol/ol.css';
+import mmJson from '@/assets/json/mm.json'
 import { olMap } from '@/utils/olMap/olMap';
 import { PointType } from '@/api/globalMap/type';
 
@@ -84,6 +85,7 @@ const init = () => {
     onLoadCompleted: (yMap) => {
       yztMap = yMap;
       // initMouseTool(map);
+      map.createVecByJson(mmJson, '茂名市');
       handleResize();
     }
   });

src/components/Map/index.vue

@@ -42,8 +42,10 @@ import {
   getBuildingProjectDetails,
   getChemicalWarehouseDetails,
   getMiningOperationsDetails,
-  getEmergencyTransportResourcesDetails, getEmergencyDisasterInfoOfficerDetails, getMidmapDzzhDetails
-} from "@/api/globalMap/spatialAnalysis";
+  getEmergencyTransportResourcesDetails,
+  getEmergencyDisasterInfoOfficerDetails,
+  getMidmapDzzhDetails
+} from '@/api/globalMap/spatialAnalysis';
 import { pointDetailTemplate } from '@/views/globalMap/data/mapData';
 import ElementResizeDetectorMaker from 'element-resize-detector';
 import useAppStore from '@/store/modules/app';
@@ -59,7 +61,15 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { point_type } = toRefs<any>(proxy?.useDict('point_type'));
 const appStore = useAppStore();
 
-const emits = defineEmits(['update:drawing', 'selectGraphics', 'unSelectGraphics', 'showTextEditBox', 'onDrawCompleted', 'handleShowVideo', 'handleShowWarehouse']);
+const emits = defineEmits([
+  'update:drawing',
+  'selectGraphics',
+  'unSelectGraphics',
+  'showTextEditBox',
+  'onDrawCompleted',
+  'handleShowVideo',
+  'handleShowWarehouse'
+]);
 const containerRef = ref();
 const width = ref('100%');
 const height = ref('100%');
@@ -79,83 +89,87 @@ let AMap, map, scale;
 // 鼠标绘制工具
 const drawTool = useDrawTool();
 // 初始化地图
-const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, getMarkers, getScale, showInfo, hideInfo, handleHover } = useAMap({
-  key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
-  version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-  pitch: mapState.isThreeDimensional ? 45 : 0,
-  zoom: mapState.zoom,
-  center: [mapState.center[0], mapState.center[1]],
-  dragEnable: true,
-  scrollWheel: true,
-  showScale: true,
-  enableMouseTool: true,
-  // 加载完成事件
-  onLoadCompleted: () => {
-    AMap = getAMap();
-    map = getMap();
-    scale = getScale();
-    if (!['logical', 'vectorgraph'].includes(props.activeMap)) {
-      switchMap(props.activeMap);
-    } else {
-      map.removeLayer();
-    }
-    map.on('zoomchange', zoomChangeHandler);
-    drawTool.initMouseTool({ container: 'aMap', map, AMap });
-    handleResize();
-  },
-  onMarkerClick: (data) => {
-    // 多点位
-    if (data.type === '1') {
-      let path = [];
-      props.pointType.forEach((item) => {
-        path.push(item.component);
-      });
-      getPointInfoList({
-        option: path.toString(),
-        longitude: data.longitude.toString(),
-        latitude: data.latitude.toString()
-      }).then((res) => {
-        const data2 = res.data.list;
-        let content = document.createElement('div');
-        // content.style.cssText = 'transform: scale(' + containerScale().scaleX + ');';
-        content.className = 'point-info';
-        let content2 = '';
-        content2 += '<div class="title-box"><div class="gradient-text">多点位信息</div></div>';
-        content2 += '<div class="icon1"></div>';
-        content2 += '<div class="icon2"></div>';
-        content2 += '<div class="icon3"></div>';
-        content2 += '<div class="icon4"></div>';
-        content.innerHTML = content2;
-        let tableBox = document.createElement('div');
-        tableBox.className = 'table-box';
-        let table = document.createElement('div');
-        table.className = 'table';
-        table.innerHTML = '<div class="point-item"><div class="td3">主题</div><div class="td3">名称</div></div>';
-        data2.forEach((item) => {
-          item.longitude = data.longitude;
-          item.latitude = data.latitude;
-          const div = document.createElement('div');
-          div.className = 'point-item point-item-hover';
-          div.innerHTML =
-            '<div class="td4">' + getDictLabel(point_type.value, item.dataType.toString()) + '</div><div class="td4">' + item.name + '</div>';
-          div.addEventListener('click', () => {
-            handlePointDetails(item);
+const { getAMap, getMap, switchMap, addMarker, addSearchMarker, clearMarker, getMarkers, getScale, showInfo, hideInfo, handleHover, creatMask } =
+  useAMap({
+    key: '30d3d8448efd68cb0b284549fd41adcf', // 申请好的Web端开发者Key，首次调用 load 时必填
+    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+    pitch: mapState.isThreeDimensional ? 45 : 0,
+    zoom: mapState.zoom,
+    center: [mapState.center[0], mapState.center[1]],
+    dragEnable: true,
+    scrollWheel: true,
+    showScale: true,
+    enableMouseTool: true,
+    // 加载完成事件
+    onLoadCompleted: () => {
+      AMap = getAMap();
+      map = getMap();
+      scale = getScale();
+      if (!['logical', 'vectorgraph'].includes(props.activeMap)) {
+        switchMap(props.activeMap);
+      } else {
+        map.removeLayer();
+      }
+      map.on('zoomchange', zoomChangeHandler);
+      // 添加遮罩
+    // , { strokeColor: '#ff0000',strokeWeight: 2, offset }
+      creatMask([{ strokeColor: '#2a8797', strokeOpacity: 0.6,strokeWeight: 6, fillOpacity: 0}, { strokeWeight: 2, fillColor: '#4f95ff', fillOpacity: 0.2 }]);
+      drawTool.initMouseTool({ container: 'aMap', map, AMap });
+      handleResize();
+    },
+    onMarkerClick: (data) => {
+      // 多点位
+      if (data.type === '1') {
+        let path = [];
+        props.pointType.forEach((item) => {
+          path.push(item.component);
+        });
+        getPointInfoList({
+          option: path.toString(),
+          longitude: data.longitude.toString(),
+          latitude: data.latitude.toString()
+        }).then((res) => {
+          const data2 = res.data.list;
+          let content = document.createElement('div');
+          // content.style.cssText = 'transform: scale(' + containerScale().scaleX + ');';
+          content.className = 'point-info';
+          let content2 = '';
+          content2 += '<div class="title-box"><div class="gradient-text">多点位信息</div></div>';
+          content2 += '<div class="icon1"></div>';
+          content2 += '<div class="icon2"></div>';
+          content2 += '<div class="icon3"></div>';
+          content2 += '<div class="icon4"></div>';
+          content.innerHTML = content2;
+          let tableBox = document.createElement('div');
+          tableBox.className = 'table-box';
+          let table = document.createElement('div');
+          table.className = 'table';
+          table.innerHTML = '<div class="point-item"><div class="td3">主题</div><div class="td3">名称</div></div>';
+          data2.forEach((item) => {
+            item.longitude = data.longitude;
+            item.latitude = data.latitude;
+            const div = document.createElement('div');
+            div.className = 'point-item point-item-hover';
+            div.innerHTML =
+              '<div class="td4">' + getDictLabel(point_type.value, item.dataType.toString()) + '</div><div class="td4">' + item.name + '</div>';
+            div.addEventListener('click', () => {
+              handlePointDetails(item);
+            });
+            table.appendChild(div);
           });
-          table.appendChild(div);
+          tableBox.appendChild(table);
+          content.appendChild(tableBox);
+          let closeBtn = document.createElement('div');
+          closeBtn.className = 'close';
+          closeBtn.onclick = hideInfo;
+          content.appendChild(closeBtn);
+          showInfo(content, [data.longitude, data.latitude], true);
         });
-        tableBox.appendChild(table);
-        content.appendChild(tableBox);
-        let closeBtn = document.createElement('div');
-        closeBtn.className = 'close';
-        closeBtn.onclick = hideInfo;
-        content.appendChild(closeBtn);
-        showInfo(content, [data.longitude, data.latitude], true);
-      });
-    } else {
-      handlePointDetails(data);
+      } else {
+        handlePointDetails(data);
+      }
     }
-  }
-});
+  });
 const handlePointDetails = (data) => {
   let methodList = {
     '1': getEmergencyExpertDetails,
@@ -421,7 +435,7 @@ watch(
   () => {
     nextTick(() => {
       handleResize();
-    })
+    });
   }
 );
 onMounted(() => {

src/hooks/AMap/useAMap.ts

@@ -12,7 +12,9 @@ export function useAMap(options) {
     AMapLoader.load({
       key: options.key, // 申请好的Web端开发者Key，首次调用 load 时必填
       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']
+      plugins: options.plugins
+        ? options.plugins
+        : ['AMap.Scale', 'AMap.RangingTool', 'AMap.MouseTool', 'AMap.PolygonEditor', 'AMap.MarkerCluster', 'AMap.DistrictSearch']
     }).then((res) => {
       AMap = res;
       map = new AMap.Map('aMap', {
@@ -162,7 +164,6 @@ export function useAMap(options) {
       let index = 0;
       let index2 = 0;
       let data = {};
-      debugger
       for (let i = 0; i < addPoints.length; i++) {
         if (addPoints[i].id === extData.id.toString() && addPoints[i].dataType === dataType) {
           addPoints[i].icon = addPoints[i].imageHover;
@@ -222,6 +223,41 @@ export function useAMap(options) {
     }
   };
 
+  const creatMask = (options, name = '茂名市') => {
+    new AMap.DistrictSearch({
+      extensions: 'all',
+      subdistrict: 0
+    }).search(name, function (status, result) {
+      // 外多边形坐标数组和内多边形坐标数组
+      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)
+      ];
+      options.forEach((option) => {
+        const holes = result.districtList[0].boundaries;
+        if (option.offset) {
+
+          holes.forEach((items) => {
+
+          })
+        }
+        let pathArray = [outer];
+        pathArray.push.apply(pathArray, holes);
+        const polygon = new AMap.Polygon({
+          pathL: pathArray,
+          strokeColor: option.strokeColor ? option.strokeColor : '#fefefe',
+          strokeOpacity: option.strokeOpacity ? option.strokeOpacity : 1,
+          strokeWeight: option.strokeWeight ? option.strokeWeight : 1,
+          fillColor: option.fillColor ? option.fillColor : '#1791fc',
+          fillOpacity: option.fillOpacity ? option.fillOpacity : 0.2
+        });
+        polygon.setPath(pathArray);
+        map.add(polygon);
+      });
+    });
+  };
   onMounted(() => {
     initMap(options);
   });
@@ -236,6 +272,7 @@ export function useAMap(options) {
     getScale,
     showInfo,
     hideInfo,
-    handleHover
+    handleHover,
+    creatMask
   };
 }

src/utils/olMap/olMap.ts

@@ -18,8 +18,13 @@ import { Fill, Stroke } from 'ol/style';
 import proj4 from 'proj4';
 import { register } from 'ol/proj/proj4';
 import { defaults } from 'ol/control';
+import Vector from 'ol/layer/Vector';
+import SourceVector from 'ol/source/Vector';
+import GeoJSON from 'ol/format/GeoJSON';
 import { fromLonLat } from 'ol/proj';
 import axios from 'axios';
+import { fromExtent } from 'ol/geom/Polygon';
+import { LinearRing } from 'ol/geom';
 // import olPlot from 'ol-plot';
 // import { activate } from '../ol-plot/ol-plot'
 
@@ -94,7 +99,7 @@ export class olMap {
       // 如果 options.id 不是数组，但确实是一个图层，则直接处理
       await this.formatXml(options.id);
     }
-    console.log('wan')
+    console.log('wan');
     // 创建Vector层并添加到地图上
     this.vectorLayer = new VectorLayer({
       source: new VectorSource({
@@ -156,7 +161,7 @@ export class olMap {
     layer.set('layerName', code);
 
     this.map.addLayer(layer);
-    console.log(code)
+    console.log(code);
   }
 
   // 初始化绘画工具
@@ -233,11 +238,10 @@ export class olMap {
     this.map.addLayer(this.vectorLayer);
     const point = JSON.parse(JSON.stringify(this.markers));
     this.markers = [];
-    this.addMarker(point)
+    this.addMarker(point);
   }
 
   addMarker(points) {
-
     points.forEach((point) => {
       // 创建标注点
       const feature = new Feature({
@@ -276,4 +280,61 @@ export class olMap {
     if (!this.vectorLayer) return;
     this.vectorLayer.getSource().clear();
   }
+
+  /**
+   *
+   * @param {Geojon} chaozhou 根据geojson对象创建Featrue对象
+   * @param {String} layerName 图层名称
+   * @returns VectorLayer
+   */
+  createVecByJson(json, layerName = '') {
+    const format = new GeoJSON();
+    const fs = format.readFeatures(json);
+    const converLayer = new VectorLayer({
+      source: new VectorSource(),
+      style: new Style({
+        fill: new Fill({
+          color: 'rgba(23, 145, 252, 0.2)'
+        }),
+        stroke: new Stroke({
+          color: 'rgba(254, 254, 254,1)',
+          width: 2
+        })
+      }),
+      zIndex: 99
+    });
+    this.map.addLayer(converLayer);
+    const extent = [-180, -90, 180, 90];
+    const polygonRing = fromExtent(extent);
+    fs.forEach((x) => {
+      const ft = x.values_.geometry;
+      const coords = ft.getCoordinates();
+      coords.forEach((coord) => {
+        const linearRing = new LinearRing(coord[0]);
+        polygonRing.appendLinearRing(linearRing);
+      });
+    });
+    const convertFt = new Feature({
+      geometry: polygonRing
+    });
+    converLayer.getSource().addFeature(convertFt);
+  }
+
+  /**
+   * @description 创建矢量图层
+   * @param {String} layerName 图层名称
+   * @param {Number} zIndex 地图层级默认是0
+   * @returns
+   */
+  createVecLayer(layerName = '', zIndex = 0) {
+    const source = new SourceVector({
+      crossOrigin: 'anonymous'
+    });
+    const layer = new Vector({
+      source,
+      zIndex
+    });
+    layer.set('layerName', layerName);
+    return layer;
+  }
 }

src/views/globalMap/SwitchMapTool.vue

@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<Props>(), {});
 
 const emits = defineEmits(['switchMap']);
 const mapData = ref([
-  { name: '逻辑地图', key: 'logical' },
+  // { name: '逻辑地图', key: 'logical' },
   { name: '矢量地图', key: 'vectorgraph' },
   { name: '卫星地图', key: 'satellite' },
   { name: '粤政图', key: 'satellite2' },

src/views/globalMap/index.vue

@@ -40,7 +40,7 @@ const mapData = reactive(logicalData);
 let mapRef = ref(null);
 let map2Ref = ref(null);
 // logical vectorgraph satellite satellite2 satellite3
-let activeMap = ref('logical');
+let activeMap = ref('vectorgraph');
 
 const switchMap = (key) => {
   activeMap.value = key;

src/views/routineCommandMap/RightSection/EventReport/EventDetail.vue

@@ -206,7 +206,6 @@ const showDeleteDialog = ref(false);
 // 删除事件
 const handleShowDeleteDialog = () => {
   showDeleteDialog.value = true;
-  debugger
 };
 const handleDeleteEvent = () => {
   deleteEvent({ eventId: props.eventId }).then((res) => {