添加天地图影像图，允许切换底图

public/static/config/config.js

@@ -12,7 +12,7 @@ var systemConfig = {
   },
   token:'65463DEE-620A-0ED5-2385-17ECD07CD351',//公共地图资源token
   mapService:'http://121.43.55.7:10011/proxy/',//地图服务
-  
+  imageryLayer:"http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d"
 }
 //地图全局变量声明
 var map2DViewer = {

src/components/map/BasemapChange.vue

@@ -31,7 +31,7 @@ export default {
   name: "BasemapChange",
   data() {
     return {
-      rightPosition: 22,
+      rightPosition: 23,
       bottomPostion: 30,
       imageGroup: {
         // 地形图
@@ -51,11 +51,8 @@ export default {
       state: {
         // 图片数组
         images: [
-          // { src: this.imageGroup.SEA, type: 1, active: "SEA", defalut: "SE" },
-          // { src: this.imageGroup.DX, type: 0, active: "DXA", defalut: "DX" },
-          // { src: this.imageGroup.JD, type: 2, active: "JDA", defalut: "JD" },
           {
-            src: require("@/assets/map/03_.png"),
+            src: require("@/assets/map/03.png"),
             type: 1,
             active: "SEA",
             defalut: "SE",
@@ -66,12 +63,6 @@ export default {
             active: "DXA",
             defalut: "DX",
           },
-          {
-            src: require("@/assets/map/01.png"),
-            type: 2,
-            active: "JDA",
-            defalut: "JD",
-          },
         ],
         rightPX: 50, // 每张图片距离右侧的距离 * index
       },
@@ -84,11 +75,13 @@ export default {
     menuChange() {
       return this.$store.state.navSelect.name;
     },
+    baseMapType() {
+      return this.$store.state.baseMapType;
+    },
   },
   watch: {
     baseMapRight: {
       handler(val) {
-        console.log(val, "position");
         this.rightPosition = val;
       },
       immediate: true,
@@ -98,14 +91,17 @@ export default {
         console.log(val, "切换底图组件 -- 监听当前菜单");
         if (val === "镇域专题") {
           this.$store.state.baseMapRight = 40;
-        } else if(val === "土地资源"){
-          this.$store.state.baseMapRight = 5
-        }else {
-          this.$store.state.baseMapRight = 22;
+        } else if (val === "土地资源") {
+          this.$store.state.baseMapRight = 5;
+        } else {
+          this.$store.state.baseMapRight = 23;
         }
       },
       immediate: true,
     },
+    baseMapType(val) {
+      // console.log(val, "地图类型");
+    },
   },
   methods: {
     change(index, type) {
@@ -119,7 +115,19 @@ export default {
     },
     // 设置图层显示
     setLayer(type) {
-      console.log(type, "当前的底图类型");
+      // 当前的底图类型 0 - 影像图; 1 - 蓝黑图
+      switch (type) {
+        case 0:
+          console.log("影像图");
+          map2DViewer.map.removeLayer(map2DViewer.layers["darkmap"]);
+          map2DViewer.map.addLayer(map2DViewer.layers["imagery"]);
+          break;
+        case 1:
+          console.log("蓝黑图");
+          map2DViewer.map.removeLayer(map2DViewer.layers["imagery"]);
+          map2DViewer.map.addLayer(map2DViewer.layers["darkmap"]);
+          break;
+      }
     },
     // 悬浮时图片右移
     mouseover() {

src/components/map/MapHolder.vue

@@ -33,9 +33,6 @@ export default {
     this.$bus.$on("caseAuditEvent", () => {
       this.caseAuditEvent();
     });
-    // this.$bus.$on("labelCaseEvent", () => {
-    //   this.labelCaseEvent();
-    // });
 
     //地图初始化
     this.mapInit();
@@ -55,8 +52,6 @@ export default {
     this.$bus.$off("JLControl");
     // 疑点审计
     this.$bus.$off("caseAuditEvent");
-    // 标记疑点
-    // this.$bus.$off("labelCaseEvent");
   },
   computed: {
     // 获取标记疑点按钮的状态
@@ -167,12 +162,6 @@ export default {
         }, 300);
       }
     },
-    // 标记疑点
-    labelCaseEvent() {
-      // 开始绘制图形
-      console.log("label case");
-      // map2DViewer.setDrawTool({ action: "start" });
-    },
     // 初始化引入绘制工具
     initDraw() {
       // 引入疑点标记绘制方法
@@ -218,8 +207,8 @@ export default {
       }).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);
 
       //添加默认图层
-      var guid = publicFun.buildGuid("baseLayer");
-      var layer = L.esri
+      let guid = publicFun.buildGuid("baseLayer");
+      let layer = L.esri
         .tiledMapLayer({
           url:
             systemConfig.mapService +
@@ -229,8 +218,12 @@ export default {
           // tileSize: 512
         })
         .addTo(map2DViewer.map);
-      layer.guid = guid;
-      map2DViewer.layers[guid] = layer;
+      // layer.setStyle({opacity:0,fillOpacity:0})
+      map2DViewer.layers["darkmap"] = layer;
+
+      // 加载天地图
+      let imageryLayer = L.tileLayer(systemConfig.imageryLayer);
+      map2DViewer.layers["imagery"] = imageryLayer;
     },
     // 读取浦东新区GeoJSON格式的区域数据
     getJSonData() {
@@ -238,6 +231,11 @@ export default {
         this.mapInit();
       } else {
         get("./static/json/pdgeojson.json", "").then((geoJson) => {
+          map2DViewer.groups["district_polygon"] = L.featureGroup();
+          map2DViewer.groups["district_label"] = L.featureGroup();
+          // console.log(map2DViewer.groups["district_polygon"], "district_polygon group");
+          map2DViewer.groups["district_polygon"].addTo(map2DViewer.map);
+          map2DViewer.groups["district_label"].addTo(map2DViewer.map);
           geoJson.features.map((feature) => {
             if (
               this.town.indexOf(feature.properties.NAME.replace("镇", "")) > -1
@@ -246,6 +244,14 @@ export default {
               this.renderPolygon(feature);
             }
           });
+
+          // map2DViewer.groups["district_label"].remove()
+          // map2DViewer.groups["district_label"].addTo(map2DViewer.map)
+
+          // map2DViewer.groups["district_polygon"].setStyle({
+          //   opacity: 0,
+          //   fillOpacity: 0,
+          // });
         });
       }
     },
@@ -265,7 +271,7 @@ export default {
         fillColor: this.getColor(itemvalue),
         opacity: 1,
         fillOpacity: 0.4,
-      }).addTo(map2DViewer.map);
+      }).addTo(map2DViewer.groups["district_polygon"]);
       center = JSON.parse(JSON.stringify(center)).geometry.coordinates;
       center.reverse();
       let wmarker = L.circleMarker(center, {
@@ -279,19 +285,19 @@ export default {
         clickable: true,
         offset: [-25, 10],
       });
-      wmarker.addTo(map2DViewer.map);
+      wmarker.addTo(map2DViewer.groups["district_label"]);
       L.circleMarker(center, {
         radius: 8,
         weight: 1,
         fillOpacity: 0,
         color: "#e6d273",
-      }).addTo(map2DViewer.map);
+      }).addTo(map2DViewer.groups["district_polygon"]);
       L.circleMarker(center, {
         radius: 5,
         weight: 1,
         fillOpacity: 1,
         color: "#e6d273",
-      }).addTo(map2DViewer.map);
+      }).addTo(map2DViewer.groups["district_polygon"]);
     },
     latLngsToReverse: function (latlngsAry) {
       var tempLatlngsAry = JSON.parse(JSON.stringify(latlngsAry));

src/store/index.js

@@ -29,7 +29,7 @@ export default new Vuex.Store({
     // 法律法规弹窗
     lawPopupShow: false,
     // 底图切换距离右侧的位置
-    baseMapRight: 22,
+    baseMapRight: 23,
   },
   getters: {
     customModelsArr: (state) => state.customModelsArr,