自动模型默认勾选所选图层，综合分析面板定位事件

public/static/config/config.js

@@ -5,24 +5,28 @@
  * version 0.0.1
  */
 var systemConfig = {
-  assetsUrl:"http://localhost:2013",
-  mapViewer:{
-    center:[31.105589678244445, 121.72894516017521],
-    zoom:10
+  assetsUrl: "http://localhost:2013",
+  mapViewer: {
+    center: [31.105589678244445, 121.72894516017521],
+    zoom: 10,
   },
-  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"
-}
+  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 = {
-  markers:{},
-  polygons:{},
-  polylines:{},
-  circles:{},
-  map:null,
-  jlMap:null,
+  markers: {},
+  polygons: {},
+  polylines: {},
+  circles: {},
+  map: null,
+  jlMap: null,
   jlControl: {},
-  layers:{},
-  groups:{},
-}
+  layers: {},
+  groups: {},
+};
+
+// 存放tree中图层node id
+var treeIdMap = new Map();

src/components/common/BottomForm/CustomModelDialog.vue

@@ -72,15 +72,15 @@ export default {
       inputName: "自定义模型1",
       checkedList: [],
       checkArr: [
-        "永久基本农田",
-        "建设用地减量化",
-        "一般耕地种林",
-        "一般耕地",
-        "基本农田被违规占用",
-        "一般耕地抛荒",
-        "高标准农田",
-        "一般耕地被违规占用",
-        "减量化复垦地块后种林",
+        // "永久基本农田",
+        // "建设用地减量化",
+        // "一般耕地种林",
+        // "一般耕地",
+        // "基本农田被违规占用",
+        // "一般耕地抛荒",
+        // "高标准农田",
+        // "一般耕地被违规占用",
+        // "减量化复垦地块后种林",
       ],
     };
   },
@@ -89,6 +89,12 @@ export default {
       console.log(val, "checkedList");
     },
   },
+  created() {
+    this.checkArr = [];
+    treeIdMap.forEach((v, i) => {
+      this.checkArr.push(i);
+    });
+  },
   mounted() {
     // 监听自定义模型
     this.$bus.$on("customModelEvent", () => {
@@ -132,7 +138,14 @@ export default {
       this.overlayBtnShow = false;
       this.$store.state.modelStatus = "create";
       this.outerDialogVisible = true;
+      console.log(this.$store.state.treeDataCollection, "treeDataCollection");
       this.checkedList = [];
+      if (this.$store.state.treeDataCollection.size > 0) {
+        this.$store.state.treeDataCollection.forEach((v, i) => {
+          this.checkedList.push(i);
+        });
+      }
+      // this.checkedList = [];
       this.inputName = "自定义模型1";
     },
     saveModel() {
@@ -203,6 +216,8 @@ export default {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
+  overflow: auto;
+  height: 150px;
 }
 
 .el-checkbox {

src/components/map/BasemapChange.vue

@@ -107,7 +107,7 @@ export default {
     change(index, type) {
       while (this.state.images[0].type != type) {
         let a = this.state.images.pop();
-        console.log(a);
+        // console.log(a);
         this.state.images.unshift(a);
       }
       this.$store.state.baseMapType = type;
@@ -118,14 +118,20 @@ export default {
       // 当前的底图类型 0 - 影像图; 1 - 蓝黑图
       switch (type) {
         case 0:
-          console.log("影像图");
-          map2DViewer.map.removeLayer(map2DViewer.layers["darkmap"]);
-          map2DViewer.map.addLayer(map2DViewer.layers["imagery"]);
+          // console.log("影像图");
+          if (!map2DViewer.map.hasLayer(map2DViewer.layers["imagery"])) {
+            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"]);
+          // console.log("蓝黑图");
+          if (!map2DViewer.map.hasLayer(map2DViewer.layers["darkmap"])) {
+            map2DViewer.map.removeLayer(map2DViewer.layers["imagery"]);
+            map2DViewer.map.addLayer(map2DViewer.layers["darkmap"]);
+          }
+
           break;
       }
     },

src/store/index.js

@@ -32,10 +32,12 @@ export default new Vuex.Store({
     baseMapRight: 23,
     // 我的标记中的疑点数据
     myLabelPointsArr: [],
+    treeDataCollection: new Map(),
   },
   getters: {
     customModelsArr: (state) => state.customModelsArr,
-    myLabelPointsArr:(state) => state.myLabelPointsArr
+    myLabelPointsArr: (state) => state.myLabelPointsArr,
+    treeDataCollection: (state) => state.treeDataCollection,
   },
   mutations: {
     baseMapRight(state, position) {
@@ -77,6 +79,10 @@ export default new Vuex.Store({
     changeMyLabelData: (state, data) => {
       state.myLabelPointsArr = data;
     },
+    //
+    changeTreeData: (state, option) => {
+      state.treeDataCollection.set(option.name, option.value);
+    },
   },
   actions: {},
   modules: {},

src/views/ComprehensiveAnalysis.vue

@@ -93,10 +93,10 @@
                         type="text"
                         icon="el-icon-location"
                         @click="locateEvent(node)"
-                        style="position: absolute; right: -30px; top: -12px;"
+                        style="position: absolute; right: -30px; top: -12px"
                       ></el-button
                     ></span>
-                    <span style="position: absolute;right: -85px;top: -8px;">
+                    <span style="position: absolute; right: -85px; top: -8px">
                       <el-button
                         v-if="node.parent.label === '我的模型'"
                         size="small"
@@ -262,12 +262,10 @@ export default {
       // 我的模型相关数据
       myModel: null,
       filterText: "",
-      // 存储所有图层的node id
-      treeIdMap: new Map(),
+      // 存放对应图层的坐标
+      treeCoordMap: new Map(),
       isLeftLock: true,
       isRightLock: true,
-      // firstPolygon: null,
-      // coordinates: null,
     };
   },
   computed: {
@@ -288,10 +286,10 @@ export default {
     getLeftMenuTitle: {
       handler(val) {
         this.$nextTick(() => {
-          if (this.treeIdMap.has(val)) {
+          if (treeIdMap.has(val)) {
             console.log(val, "678");
             // 设置默认勾选项
-            this.$refs.tree.setCheckedKeys([this.treeIdMap.get(val)]);
+            this.$refs.tree.setCheckedKeys([treeIdMap.get(val)]);
             // this.$store.state.mapMethodsCollection
             //   .get("RENDER")
             //   .setView(coordinates, 16);
@@ -324,7 +322,7 @@ export default {
         if (myModelRef.label === "我的模型") {
           this.$refs.tree.data[2].children = val.map((ele) => {
             let firstId = publicFun.buildGuid();
-            this.treeIdMap.set(ele.name, firstId);
+            treeIdMap.set(ele.name, firstId);
             return {
               id: firstId,
               label: ele.name,
@@ -345,7 +343,7 @@ export default {
     // }
     getMyLabelData: {
       handler(val) {
-        console.log(val, "获取我的疑点数组");
+        // console.log(val, "获取我的疑点数组");
         if (val.length > 0) {
           console.log("获取的我的疑点数据");
           this.rightLabelData = val.map((v, i) => {
@@ -370,17 +368,17 @@ export default {
       if (item1.type === "我的模型") {
         this.myModel = item1;
       }
-      this.treeIdMap.set(item1.type, item1.id);
+      treeIdMap.set(item1.type, item1.id);
       return {
         id: item1.id,
         label: item1.type,
         children: item1.children.map((item2) => {
-          this.treeIdMap.set(item2.type, item2.id);
+          treeIdMap.set(item2.type, item2.id);
           return {
             id: item2.id,
             label: item2.type,
             children: item2.children.map((item3) => {
-              this.treeIdMap.set(item3.type, item3.id);
+              treeIdMap.set(item3.type, item3.id);
               this.rightPanelDataMap.set(item3.type, item3.children);
               return {
                 id: item3.id,
@@ -393,8 +391,6 @@ export default {
         }),
       };
     });
-
-    // console.log(this.treeIdMap, "treeIdMap");
   },
 
   mounted() {
@@ -409,28 +405,11 @@ export default {
         this.rightBoxBtn = true;
       }
     });
-
-    // console.log(
-    //   map2DViewer.groups["district_polygon"],
-    //   "检测是否存在地区图层group"
-    // );
-
-    // if (map2DViewer.groups["district_polygon"]) {
-    //   map2DViewer.groups["district_polygon"].remove();
-    //   map2DViewer.groups["district_label"].remove();
-    // }
-    // 不显示区域图
-    // if (map2DViewer.groups["district_polygon"].remove()) {
-    //   map2DViewer.groups["district_polygon"].remove();
-    //   map2DViewer.groups["district_label"].remove();
-    // }
   },
   beforeDestroy() {
-    // 销毁前清空存放tree ID 的map
-    this.treeIdMap.clear();
+    treeIdMap.clear();
+    this.treeCoordMap.clear();
     map2DViewer.map.off("move");
-    // map2DViewer.groups["district_polygon"].addTo(map2DViewer.map);
-    // map2DViewer.groups["district_label"].addTo(map2DViewer.map);
   },
   methods: {
     // 回退事件
@@ -473,7 +452,12 @@ export default {
       return data.label.indexOf(value) !== -1;
     },
     locateEvent(node) {
-      console.log(node, "目前的节点");
+      // console.log(node, "目前的节点");
+      if (this.treeCoordMap.has(node.data.label)) {
+        this.$store.state.mapMethodsCollection
+          .get("RENDER")
+          .setView(this.treeCoordMap.get(node.data.label), 16);
+      }
     },
     handleUpdate(node) {
       // console.log(node.data.data, "涉及的图层");
@@ -499,9 +483,16 @@ export default {
           // 渲染当前模块下的面图层
           let cid = defaultLayers[data.label].cid;
           let color = defaultLayers[data.label].color;
+
+          let passData = {
+            name: data.label,
+            value: cid,
+          };
+
+          // 存放当前选中的图层，方便关联自定义模型
+          this.$store.commit("changeTreeData", passData);
           get(`./static/json/${cid}.json`).then((geoJson) => {
             map2DViewer.polygons[`${cid}_layer`] = [];
-
             this.originalData[data.label] = geoJson.map((v, index) => {
               return {
                 id: publicFun.buildGuid("abnormal"),
@@ -510,25 +501,37 @@ export default {
                 properties: v.properties,
               };
             });
-            console.log(this.originalData[data.label], "label");
+            // console.log(this.originalData[data.label], "label");
 
             this.activeNames = ["myLabel", data.label];
 
             // 地图定位
             let firstPolygon = JSON.parse(JSON.stringify(geoJson[0]));
             let coordinates = firstPolygon.geometry.coordinates[0][0][0];
-            this.$store.state.mapMethodsCollection
-              .get("RENDER")
-              .setView(coordinates, 16);
+            this.treeCoordMap.set(data.label, coordinates);
+            // this.$store.state.mapMethodsCollection
+            //   .get("RENDER")
+            //   .setView(coordinates, 16);
 
             this.$store.state.mapMethodsCollection
               .get("RENDER")
               .addPolygonLayer(geoJson, cid, color);
           });
+        } else {
+          let passData = {
+            name: data.label,
+            value: data.label,
+          };
+          // 存放当前选中的图层，方便关联自定义模型
+          this.$store.commit("changeTreeData", passData);
         }
       } else {
         // 设置右侧折叠面板item数量
         delete this.originalData[data.label];
+        //关联自定义模型
+        this.$store.state.treeDataCollection.delete(data.label);
+        console.log(this.$store.state.treeDataCollection, "treeDataCollection");
+
         // 只激活我的标记
         this.activeNames = ["myLabel"];
 

src/views/Login.vue

@@ -131,7 +131,8 @@ export default {
 <style lang="less" scoped>
 #loginBox {
   position: relative;
-  width: 100vw;
+  width: 100%;
+  height: 100%;
   height: 100vh;
   display: flex;
   flex-direction: column;
@@ -139,9 +140,8 @@ export default {
   justify-content: center;
   align-content: center;
   align-items: center;
-  background-image: url("@static/images/bg.png");
-  background-repeat: no-repeat;
-  background-position: center center;
+  background: url("@static/images/bg.png") no-repeat center;
+  background-size: 100% 100%;
   .loginBox_title {
     position:absolute;
     text-align: center;