地图调整

src/hooks/AMap/useAMap.ts

@@ -1,8 +1,8 @@
 import AMapLoader from '@amap/amap-jsapi-loader';
 import { nanoid } from 'nanoid';
-import { deepClone } from '@/utils';
-import {onMounted} from "vue";
+import { deepClone, initDrag } from '@/utils';
 import { mergeGeoJsonPolygons, wgs_gcj_encrypts } from '@/utils/gisUtils';
+import carImg from '@/assets/images/car.png';
 
 export function useAMap(options) {
   let AMap, map, nowLayer, labelsLayer, scale, cluster;
@@ -11,6 +11,8 @@ export function useAMap(options) {
   };
   let clickMarker = null;
   let addPoints = [];
+  let layers = [];
+  let defaultLayer;
   // 初始化事件
   const initMap = (options) => {
     window._AMapSecurityConfig = {
@@ -24,12 +26,14 @@ export function useAMap(options) {
           : ['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;
+      defaultLayer = AMap.createDefaultLayer();
       map = new AMap.Map(options.el ? options.el : 'aMap', {
         WebGLParams: {
           preserveDrawingBuffer: true
         },
+        layers: [defaultLayer],
         // 是否为3D地图模式
-        viewMode: '3D',
+        // viewMode: '3D',
         pitch: options.pitch,
         // 初始化地图级别
         zoom: options.zoom ? options.zoom : 11,
@@ -38,7 +42,8 @@ export function useAMap(options) {
         // 是否可拖拽
         dragEnable: options.dragEnable,
         // 是否允许通过鼠标滚轮来缩放
-        scrollWheel: options.scrollWheel
+        scrollWheel: options.scrollWheel,
+        maxZoom: options.maxZoom ? options.maxZoom : 20
       });
       // 初始化比例尺
       if (options.showScale) {
@@ -59,30 +64,52 @@ export function useAMap(options) {
   const getScale = () => {
     return scale;
   };
+  const initLayer = (type: string) => {
+    if (defaultLayer) {
+      map.removeLayer(defaultLayer);
+      defaultLayer = null;
+    }
+    let keys = ['http://t0.tianditu.gov.cn/vec_w/wmts', 'http://t0.tianditu.gov.cn/cva_w/wmts'];
+    if (type === 'satellite') {
+      keys = ['http://t0.tianditu.gov.cn/img_w/wmts', 'http://t0.tianditu.gov.cn/cia_w/wmts'];
+    }
+    const layer = new AMap.TileLayer.WMTS({
+      url: keys[0],
+      blend: false,
+      tileSize: 256,
+      params: {
+        Layer: 'img',
+        Version: '1.0.0',
+        Format: 'tiles',
+        TileMatrixSet: 'w',
+        STYLE: 'default',
+        tk: 'a8df87f1695d224d2679aa805c1268d9'
+      }
+    });
+    const layerMark = new AMap.TileLayer.WMTS({
+      url: keys[1],
+      blend: false,
+      tileSize: 256,
+      params: {
+        Layer: type === 'satellite' ? 'cia' : 'cva',
+        Version: '1.0.0',
+        Format: 'tiles',
+        TileMatrixSet: 'w',
+        STYLE: 'default',
+        tk: 'a8df87f1695d224d2679aa805c1268d9'
+      }
+    });
+    return [layer, layerMark];
+  };
   // 切换地图
   const switchMap = (type: string) => {
-    if (type === 'vectorgraph') {
-      map.removeLayer(nowLayer);
-    } else if (type === 'satellite') {
-      const satellite = new AMap.TileLayer.WMTS({
-        // url: 'http://t0.tianditu.gov.cn/img_c/wmts',
-        url: 'http://t4.tianditu.gov.cn/img_w/wmts',
-        blend: false,
-        tileSize: 256,
-        params: {
-          Layer: 'img',
-          Version: '1.0.0',
-          Format: 'tiles',
-          TileMatrixSet: 'w',
-          STYLE: 'default',
-          tk: 'a8df87f1695d224d2679aa805c1268d9' // 申请的天地图开发者key
-        }
-      });
-      satellite.setMap(map);
-      // const satellite = new AMap.TileLayer.Satellite();
-      // map.addLayer(satellite);
-      nowLayer = satellite;
-    }
+    layers.forEach((layer) => {
+      map.removeLayer(layer);
+    });
+    layers = initLayer(type);
+    layers.forEach((layer) => {
+      layer.setMap(map);
+    });
   };
   // 添加搜索的标记的
   const addSearchMarker = (item) => {
@@ -99,7 +126,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');
@@ -120,7 +147,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(' +
@@ -136,7 +163,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;
@@ -231,6 +258,7 @@ export function useAMap(options) {
     // 打开InfoWindow，并设置其内容和位置
     infoWindow.setContent(content);
     infoWindow.open(map, lnglat);
+    initDrag(infoWindow.dom);
     // 解决2.0版本无法滚动问题
     infoWindow.on('mouseover', () => map.setStatus({ zoomEnable: false }));
     infoWindow.on('mouseout', () => map.setStatus({ zoomEnable: true }));
@@ -258,7 +286,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),
@@ -268,7 +296,7 @@ export function useAMap(options) {
       ];
       options.forEach((option) => {
         const holes = result.districtList[0].boundaries;
-        let pathArray = [outer];
+        const pathArray = [outer];
         pathArray.push.apply(pathArray, holes);
         maskPolygon = new AMap.Polygon({
           pathL: pathArray,
@@ -296,7 +324,7 @@ export function useAMap(options) {
         polygon.show();
       });
     } else {
-      data = convertCoordinates(data);
+      // data = convertCoordinates(data);
       // 遮罩部分
       // const outer = [
       //   new AMap.LngLat(-180, 90, true),
@@ -379,14 +407,14 @@ export function useAMap(options) {
     moveMarker?.remove();
     let index = 0;
     const icon = new AMap.Icon({
-      size: new AMap.Size(26, 52),
-      image: 'https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png'
+      size: new AMap.Size(13, 26),
+      image: carImg
     });
     moveMarker = new AMap.Marker({
       map: map,
-      position: [116.478935, 39.997761],
+      position: lineArr[0],
       icon: icon,
-      offset: new AMap.Pixel(-13, -26)
+      anchor: 'center'
     });
     // 绘制轨迹
     movePolyline = new AMap.Polyline({
@@ -405,31 +433,32 @@ 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) {
-      index++;
-      if (index === lineArr.length - 1) {
-        timerId = setTimeout(() => {
-          movePolyline.remove();
-          movePassedPolyline.remove();
-          moveMarker.remove();
-        }, 5000);
-      }
-    });
+    // moveMarker.on('moveend', function (e) {
+    //   index++;
+    //   if (index === lineArr.length - 1) {
+    //     timerId = setTimeout(() => {
+    //       movePolyline.remove();
+    //       movePassedPolyline.remove();
+    //       moveMarker.remove();
+    //     }, 5000);
+    //   }
+    // });
     moveMarker.moveAlong(lineArr, {
       // 每一段的时长
       duration: 1000, //可根据实际采集时间间隔设置
       // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
       autoRotation: true
     });
+    return [movePolyline, movePassedPolyline, moveMarker];
   };
 
   const drawData = (data) => {
-    let res = [];
+    const res = [];
     data.forEach((item) => {
       let graphic;
       if (['rectangle', 'polygon', 'anyLine'].includes(item.type)) {
@@ -449,7 +478,7 @@ export function useAMap(options) {
       } else if (item.type === 'circle') {
         graphic = new AMap.Circle({
           center: item.center,
-          radius: item.radius,
+          radius: item.radius * 100000,
           strokeColor: item.strokeColor,
           strokeOpacity: item.strokeOpacity,
           strokeWeight: item.strokeWeight,

src/utils/olMap/olMap.ts

@@ -91,6 +91,8 @@ export class olMap {
   private carLayer;
   private carFeature;
   private traceFeature;
+  // 自定义绘制结束调用方法
+  private drawEndMethod;
 
   constructor(options) {
     this.options = options;
@@ -321,6 +323,7 @@ export class olMap {
       marker: 'Point',
       text: 'Point'
     };
+    debugger
     const data = getRgba(newOptions.color);
     let geometryFunction = null;
     if (newOptions.graphicsType === 'rectangle') {
@@ -700,19 +703,19 @@ export class olMap {
         })
       });
       this.map.addLayer(this.maskLayer2);
-      // this.maskLayer = new VectorLayer({
-      //   source: new VectorSource(),
-      //   style: new Style({
-      //     fill: new Fill({
-      //       color: options.fillColor ? options.fillColor : 'rgba(16, 36, 59, 0.65)'
-      //     }),
-      //     stroke: new Stroke({
-      //       color: options.strokeColor ? options.strokeColor : 'rgba(38, 138, 185, 1)',
-      //       width: 2
-      //     })
-      //   }),
-      //   zIndex: options.zIndex ? options.zIndex : 99
-      // });
+      this.maskLayer = new VectorLayer({
+        source: new VectorSource(),
+        style: new Style({
+          fill: new Fill({
+            color: options.fillColor ? options.fillColor : 'rgba(16, 36, 59, 0.65)'
+          }),
+          stroke: new Stroke({
+            color: options.strokeColor ? options.strokeColor : 'rgba(38, 138, 185, 1)',
+            width: 2
+          })
+        }),
+        zIndex: options.zIndex ? options.zIndex : 99
+      });
       // // 合并区边界
       // const format = new GeoJSON();
       // const data2 = mergeGeoJsonPolygons(json);
@@ -988,8 +991,9 @@ export class olMap {
     const icon = new Icon({
       crossOrigin: 'anonymous',
       src: carImg,
-      width: 26,
-      height: 52,
+      width: 13,
+      height: 26,
+      anchor: [0.5, 0.5],
       rotation: angle
     });
     this.carFeature.setStyle(
@@ -1005,7 +1009,7 @@ export class olMap {
       source: source,
       style: new Style({
         stroke: new Stroke({
-          color: 'rgb(37,232,142)',
+          color: '#AF5',
           width: 5
         })
       })
@@ -1046,6 +1050,7 @@ export class olMap {
     // 触发地图渲染
     const geo = this.carFeature.getGeometry().clone();
     this.carFeature.setGeometry(geo);
+    return [this.carLayer];
   }
   drawData(data) {
     const res = [];
@@ -1110,9 +1115,7 @@ export class olMap {
           const height = img.height;
           const style = new Style({
             image: new Icon({
-              anchor: [0.5, 0.5],
-              anchorXUnits: 'fraction',
-              anchorYUnits: 'pixels',
+              anchor: [0.5, 1],
               src: item.icon,
               size: [width, height],
               scale: !!item.size[0] ? item.size[0] / width : 1
@@ -1149,4 +1152,7 @@ export class olMap {
   getMouseTool() {
     return this.drawTool;
   }
+  setDrawEndMethod(newMethod) {
+    this.drawEndMethod = newMethod;
+  }
 }