添加其他的底图

src/views/remote/MapView.vue

@@ -86,19 +86,56 @@ export default {
       //   }),
       // });
 
-        var key = "12df6e32906dbb916fad14dc65ebdbf8"; // 请替换成你的key
-        // 矢量底图
-        var vecLayer = new Tile({
-            source: new XYZ({
-                url: 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + key
-            })
-        });
-        // 矢量标注
-        var cvaLayer = new Tile({
-            source: new XYZ({
-                url: 'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + key
-            })
-        });
+      var key = "12df6e32906dbb916fad14dc65ebdbf8"; // 请替换成你的key
+      // 矢量底图
+      var vecLayer = new Tile({
+        source: new XYZ({
+          url:
+            "http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
+            key,
+        }),
+      });
+      // 矢量标注
+      var cvaLayer = new Tile({
+        source: new XYZ({
+          url:
+            "http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
+            key,
+        }),
+      });
+
+      // 影像底图
+      var imgLayer = new ol.layer.Tile({
+        source: new ol.source.XYZ({
+          url:
+            "http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
+            key,
+        }),
+      });
+      // 影像标注
+      var imgCiaLayer = new ol.layer.Tile({
+        source: new ol.source.XYZ({
+          url:
+            "http://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
+            key,
+        }),
+      });
+      // 地形晕染
+      var terLayer = new ol.layer.Tile({
+        source: new ol.source.XYZ({
+          url:
+            "http://t0.tianditu.gov.cn/ter_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=ter&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
+            key,
+        }),
+      });
+      // 地形标注层
+      var ctaLayer = new ol.layer.Tile({
+        source: new ol.source.XYZ({
+          url:
+            "http://t0.tianditu.gov.cn/cta_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cta&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=" +
+            key,
+        }),
+      });
 
       let map = new Map({
         //地图容器div的ID