加载天地图矢量图逻辑

src/components/Map/index.vue

@@ -55,7 +55,7 @@ const mapState = reactive<MapState>({
   center: [110.925175, 21.978955],
   zoom: 8.5,
   minZoom: 6,
-  maxZoom: 20,
+  maxZoom: 17,
   isThreeDimensional: false,
   // 是否显示比例尺
   showScale: true
@@ -72,6 +72,7 @@ const mapUtils = useAMap({
   version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
   pitch: mapState.isThreeDimensional ? 45 : 0,
   zoom: mapState.zoom,
+  maxZoom: mapState.maxZoom,
   center: [mapState.center[0], mapState.center[1]],
   dragEnable: true,
   scrollWheel: true,
@@ -84,8 +85,6 @@ const mapUtils = useAMap({
     scale = getScale();
     if (!['logical', 'vectorgraph'].includes(props.activeMap)) {
       switchMap(props.activeMap);
-    } else {
-      map.removeLayer();
     }
     placeSearch = new AMap.PlaceSearch({
       pageSize: 30,

src/hooks/AMap/useAMap.ts

@@ -10,6 +10,8 @@ export function useAMap(options) {
   };
   let clickMarker = null;
   let addPoints = [];
+  let layers = [];
+  let defaultLayer;
   // 初始化事件
   const initMap = (options) => {
     window._AMapSecurityConfig = {
@@ -20,27 +22,17 @@ 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.GeoJSON'
-          ]
+        : ['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,
@@ -49,7 +41,8 @@ export function useAMap(options) {
         // 是否可拖拽
         dragEnable: options.dragEnable,
         // 是否允许通过鼠标滚轮来缩放
-        scrollWheel: options.scrollWheel
+        scrollWheel: options.scrollWheel,
+        maxZoom: options.maxZoom ? options.maxZoom : 20
       });
       // 初始化比例尺
       if (options.showScale) {
@@ -70,30 +63,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) => {
@@ -628,6 +643,7 @@ export function useAMap(options) {
     initMap(options);
   });
   return {
+    initMap,
     getAMap,
     getMap,
     switchMap,