设置成天地图

src/views/remote/MapView.vue

@@ -54,12 +54,12 @@ export default {
   methods: {
     createMap() {
       var view = new View({
-        // center: transform([103.23, 35.33], "EPSG:4326", "EPSG:3857"), //地图初始中心点
-        center: gcoord.transform(
-          [106.67591743605254, 38.21012898330025],
-          gcoord.WGS84,
-          gcoord.BD09
-        ), //地图初始中心点
+        center: transform([103.23, 35.33], "EPSG:4326", "EPSG:3857"), //地图初始中心点
+        // center: gcoord.transform(
+        //   [106.67591743605254, 38.21012898330025],
+        //   gcoord.WGS84,
+        //   gcoord.BD09
+        // ), //地图初始中心点
         projection: "EPSG:4326",
         zoom: 4,
         minZoom: 1,
@@ -72,24 +72,40 @@ export default {
     },
     addMap(target, view) {
       if (this.maps[target]) return;
-      var gaodeMapLayer = new TileLayer({
-        title: "高德地图",
-        // source: new XYZ({
-        //   url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
-        //   wrapX: false,
-        // }),
-        source: new XYZ({
-          url: `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=${this.arcgisKey}`,
-          // url: `https://wayback.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/WMTS/1.0.0/default028mm/MapServer/tile/4905/{z}/{y}/{x}`,
-          crossOrigin: "anonymous",
-          // attributions: ["ArcGIS", new Date().getFullYear()],
-        }),
-      });
+      // var gaodeMapLayer = new TileLayer({
+      //   title: "高德地图",
+      //   // source: new XYZ({
+      //   //   url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
+      //   //   wrapX: false,
+      //   // }),
+      //   source: new XYZ({
+      //     url: `https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=${this.arcgisKey}`,
+      //     // url: `https://wayback.maptiles.arcgis.com/arcgis/rest/services/World_Imagery/WMTS/1.0.0/default028mm/MapServer/tile/4905/{z}/{y}/{x}`,
+      //     crossOrigin: "anonymous",
+      //     // attributions: ["ArcGIS", new Date().getFullYear()],
+      //   }),
+      // });
+
+        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
+            })
+        });
+
       let map = new Map({
         //地图容器div的ID
         target,
         //地图容器中加载的图层
-        layers: [gaodeMapLayer],
+        // layers: [gaodeMapLayer],
+        layers: [vecLayer, cvaLayer],
         //地图视图设置
         view, //同一个view
       });

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.60.52:8080`,
+        target: `http://192.168.60.4:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''