我的模型勾选显示

public/static/config/config.js

@@ -31,6 +31,7 @@ var map2DViewer = {
   groups: {},
   // 我的标记
   myLabels: {},
+  overlay:{}
 };
 
 // 存放tree中图层node id

public/static/json/test.json

@@ -0,0 +1,32 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "Polygon ",
+        "coordinates": [
+          [
+            [121.80900368447004, 31.053935480315246],
+            [121.80900368447004, 31.044263490820825],
+            [121.80013337002538, 31.044263490820825],
+            [121.80013337002538, 31.053935480315246],
+            [121.80900368447004, 31.053935480315246]
+          ],
+          [],
+          [
+            [121.80900368447004, 31.053935480315246],
+            [121.80900368447004, 31.044263490820825],
+            [121.80013337002538, 31.044263490820825],
+            [121.80013337002538, 31.053935480315246],
+            [121.80900368447004, 31.053935480315246]
+          ],
+          [],
+          [],
+          []
+        ]
+      }
+    }
+  ]
+}

public/static/plugins/draw-plugin/leaflet.draw.js

@@ -174,7 +174,7 @@ L.Control.Draw = L.Control.extend({
       }
     } else {
       map2DViewer.map.off("mousemove");
-      console.log("lmx");
+      // console.log("lmx");
     }
   },
 
@@ -614,7 +614,7 @@ L.Control.Draw = L.Control.extend({
  * 测量工具
  */
 map2DViewer.drawToolFire = function (data) {
-  console.log(data);
+  // console.log(data);
 };
 map2DViewer.setDrawTool = function (options) {
   mousemoveStatus = true;

src/components/chart/BarChart.vue

@@ -54,7 +54,7 @@ export default {
   },
   watch: {
     sourceType(val) {
-      console.log(val, "sourceType");
+      // console.log(val, "sourceType");
       this.initEchart(
         this.categoryData,
         this.soilValueData,

src/components/common/BottomForm/CustomModelDialog.vue

@@ -139,7 +139,7 @@ export default {
   components: {},
   data() {
     return {
-      uploadBaseUrl: "http://121.43.55.7:10081/dms",
+      uploadBaseUrl: "/dms",
       classTextToIndex: {},
       overlayBtnChecked: false,
       outerDialogVisible: false,
@@ -228,16 +228,16 @@ export default {
     // 监听模型修改事件
     this.$bus.$off("updateModel");
     this.$bus.$on("updateModel", (node) => {
-      console.log("监听模型中");
+      // console.log("监听模型中");
       this.overlayBtnChecked = false;
-      console.log(node, "节点数据");
+      // console.log(node, "节点数据");
       if (node.data.c_dzfx_file) {
-        console.log("已有叠置分析结果");
+        // console.log("已有叠置分析结果");
         this.forbidOverlayBtn = true;
       }
 
       if (!node.data.c_dzfx_file) {
-        console.log("未进行叠置分析");
+        // console.log("未进行叠置分析");
         this.forbidOverlayBtn = false;
       }
       this.currentModifiedModelId = node.data.id;
@@ -256,7 +256,7 @@ export default {
       this.outerDialogVisible = true;
       if (node.data.c_bind_layer) {
         let bindLayerArr = JSON.parse(node.data.c_bind_layer);
-        console.log(bindLayerArr, "c_bind_layer");
+        // console.log(bindLayerArr, "c_bind_layer");
         if (bindLayerArr.length > 0) {
           this.checkArr = bindLayerArr;
           this.checkedList = bindLayerArr;
@@ -428,7 +428,7 @@ export default {
                 }
                 if (res.code === 200 && res.content.data.length > 0) {
                   layerAuthorityMap.set(data.id, "有权限");
-                  console.log("有权限");
+                  // console.log("有权限");
                 }
               })
               .catch((err) => {
@@ -460,7 +460,7 @@ export default {
           return v;
         }
       });
-      console.log(newData, "可以进行叠置分析的图层");
+      // console.log(newData, "可以进行叠置分析的图层");
 
       this.createModelParams.c_bind_layer = JSON.stringify(newData);
       let params = new FormData();
@@ -471,7 +471,7 @@ export default {
       };
       this.$Post(this.urlsCollection.addContent, params)
         .then((res) => {
-          console.log(res, "保存自定义模型的res");
+          // console.log(res, "保存自定义模型的res");
           if (res.code === 200) {
             this.$message.success("模型已保存");
             this.$store.state.customModelsArr.push({
@@ -487,9 +487,9 @@ export default {
     },
     // 修改模型 -- 直接调用修改模型接口
     modifyModel(type, bindData) {
-      console.log("这一步是修改模型");
+      // console.log("这一步是修改模型");
 
-      console.log(this.currentModifiedModelId, "model id");
+      // console.log(this.currentModifiedModelId, "model id");
       let obj = {
         id: this.currentModifiedModelId,
         title: this.inputName,
@@ -532,24 +532,24 @@ export default {
         this.checkedList.length < this.checkArr.length &&
         this.isLeftTransferBtn
       ) {
-        console.log("可以进行左移操作");
+        // console.log("可以进行左移操作");
         this.checkArr = this.checkedList;
         this.isLeftTransferBtn = false;
       }
 
-      if (this.checkedList.length === this.checkArr.length) {
-        console.log("不可以进行左移操作");
-      }
+      // if (this.checkedList.length === this.checkArr.length) {
+      //   console.log("不可以进行左移操作");
+      // }
     },
     addCheckList() {
       this.$nextTick(() => {
         if (this.$refs.transferTree) {
-          console.log(this.checkedKeysArr, "checkedKeysArr");
+          // console.log(this.checkedKeysArr, "checkedKeysArr");
           this.checkArr = [];
           this.checkedList = [];
           this.checkArr = this.checkedKeysArr;
           this.checkedList = this.checkedKeysArr;
-          console.log("当前选中的keys");
+          // console.log("当前选中的keys");
         }
       });
     },
@@ -581,7 +581,7 @@ export default {
       this.overlayBtnShow = false;
       this.$store.state.modelStatus = "create";
       this.outerDialogVisible = true;
-      console.log(this.$store.state.treeDataCollection, "treeDataCollection");
+      // console.log(this.$store.state.treeDataCollection, "treeDataCollection");
       this.checkedList = [];
       this.checkArr = [];
       // this.transferCheckedKeys = [];
@@ -591,7 +591,7 @@ export default {
           this.checkedList.push(i);
         });
         this.$nextTick((e) => {
-          console.log(this.$refs.transferTree, "this.$refs.transferTre");
+          // console.log(this.$refs.transferTree, "this.$refs.transferTre");
           this.$refs.transferTree.setCheckedKeys(this.checkedList);
         });
       }
@@ -631,6 +631,13 @@ export default {
         }
       });
     },
+    // 呈现叠置分析的数据
+    displayOverlayGeometry(url) {
+      // console.log(url);
+      this.$Get(url).then((res) => {
+        console.log(res, "叠置分析的结果数据");
+      });
+    },
     // 执行叠置分析
     executeOverlay() {
       this.overlayBtnChecked = !this.overlayBtnChecked;
@@ -649,8 +656,8 @@ export default {
         let tagretUrl = `${this.urlsCollection.overlayAnalysis}?modelId=${this.currentModifiedModelId}&bindLayer=${bindLayer}`;
         this.$Get(tagretUrl).then((res) => {
           if (res.code === 200) {
-            console.log(res, "叠置分析的结果");
-            let address = this.uploadBaseUrl+res.content;
+            let address = this.uploadBaseUrl + res.content;
+            this.displayOverlayGeometry(address);
             this.modifyModel("alreadyOverlay", newData);
           }
         });

src/main.js

@@ -13,20 +13,21 @@ import SvgIcon from "@/components/SvgIcon";
 Vue.component("svg-icon", SvgIcon);
 import $ from "jquery";
 import { drag } from "./directives/drag";
-import { get, post, postform } from "./utils/request.js";
+import { get, post, postform, getFile } from "./utils/request.js";
 import urls from "./api/url";
 import CryptoJS from "./utils/publicFunction.js";
 // 引入dayjs库
-import dayjs from 'dayjs';
+import dayjs from "dayjs";
 import * as echarts from "echarts";
 
 Vue.directive("drag", drag);
 Vue.prototype.$CryptoJS = CryptoJS;
 Vue.prototype.$Post = post;
 Vue.prototype.$Get = get;
+Vue.prototype.$GetFile = getFile;
 Vue.prototype.$Echarts = echarts;
 Vue.prototype.$dayjs = dayjs;
-Vue.prototype.$PostForm = postform
+Vue.prototype.$PostForm = postform;
 Vue.prototype.urlsCollection = urls;
 Vue.config.productionTip = false;
 
@@ -55,38 +56,38 @@ router.beforeEach((to, from, next) => {
   if (to.meta.title) {
     document.title = to.meta.title;
   }
-  if (to.path === '/' && from.path === '/login') {
+  if (to.path === "/" && from.path === "/login") {
     // 退出操作成功后
     next();
   }
-  if (to.path === '/login' && from.path === '/') {
+  if (to.path === "/login" && from.path === "/") {
     // 登录操作成功后
     next();
   }
-  if (to.path === '/' && from.path === '/') {
+  if (to.path === "/" && from.path === "/") {
     // 首页刷新操作
     post(urls.getUserInfo).then(
-      res => {
+      (res) => {
         // 请求成功
         if (res.code == 200 && res.content !== "无效token") {
           next();
         } else {
-          localStorage.removeItem('TOKEN');
-          localStorage.removeItem('USER_ID');
+          localStorage.removeItem("TOKEN");
+          localStorage.removeItem("USER_ID");
           ElementUI.Message.error("用户信息获取失败，请尝试重新登录!");
-          next('/login');
+          next("/login");
         }
       },
-      error => {
+      (error) => {
         // 请求失败！
-        localStorage.removeItem('TOKEN');
-        localStorage.removeItem('USER_ID');
-        ElementUI.Message.error(error)
-        next('/login');
+        localStorage.removeItem("TOKEN");
+        localStorage.removeItem("USER_ID");
+        ElementUI.Message.error(error);
+        next("/login");
       }
     );
   }
-})
+});
 new Vue({
   router,
   store,

src/utils/publicFunction.js

@@ -103,7 +103,7 @@ const generateGeoJSON = (title, desc, featureType, coords) => {
       title: title || "",
       desc: desc || "",
       featureType: propertiesType,
-      featureTypeIndex:featureType
+      featureTypeIndex: featureType,
     },
     geometry: {
       coordinates: coords,
@@ -119,6 +119,25 @@ const generateGeoJSON = (title, desc, featureType, coords) => {
   return data;
 };
 
+/**
+ * 供Leaflet直接读取Geojson数据的标准数据格式；
+ * @coordinates 坐标，格式要求 [[ [lng1, lat1],[lng2, lat2]]]
+ * @type 用于何种应用场景，如 overlayAnalysis
+ *
+ * 应用于叠置分析
+ */
+const standardGeojson = (coordinates, type) => {
+  let data = {
+    type: "Feature",
+    properties: { type: type },
+    geometry: {
+      type: "Polygon",
+      coordinates: coordinates,
+    },
+  };
+  return data;
+};
+
 export default {
   buildGuid,
   compare,
@@ -126,4 +145,5 @@ export default {
   Encrypt,
   Decrypt,
   generateGeoJSON,
+  standardGeojson,
 };

src/utils/request.js

@@ -18,7 +18,7 @@ const fileService = axios.create({
   headers: {
     "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
   },
-  responseType: "blob",
+  responseType: "json",
 });
 
 const err = (error) => {

src/views/ComprehensiveAnalysis.vue

@@ -133,7 +133,7 @@
                         style="position: absolute; right: -30px; top: -12px"
                       ></el-button
                     ></span>
-                    <span style="position:absolute;right: -80px; top: -9px">
+                    <span style="position: absolute; right: -80px; top: -9px">
                       <el-button
                         v-if="node.parent.label === '我的模型'"
                         size="small"
@@ -292,6 +292,7 @@ export default {
   },
   data() {
     return {
+      uploadBaseUrl: "/dms",
       classTextToIndex: {},
       addressInput: "",
       legendShow: false,
@@ -364,7 +365,7 @@ export default {
     uploadDataArr: {
       handler(val) {
         if (val.length > 0) {
-          console.log(val, "uploadDataIdArr");
+          // console.log(val, "uploadDataIdArr");
         }
       },
       immediate: true,
@@ -375,7 +376,7 @@ export default {
       handler(val) {
         this.$nextTick(() => {
           if (treeIdMap.has(val)) {
-            console.log(val, "678");
+            // console.log(val, "678");
             // 设置默认勾选项
             this.$refs.tree.setCheckedKeys([treeIdMap.get(val)]);
           }
@@ -397,12 +398,9 @@ export default {
     filterText(val) {
       this.$refs.tree.filter(val);
     },
-    myModel(val) {
-      // console.log(val, "监听综合分析中的我的模型");
-    },
     getCustomModel: {
       handler(val) {
-        console.log(val, "目前存在的自定义模型");
+        // console.log(val, "目前存在的自定义模型");
         this.getMyModelData();
       },
       deep: true,
@@ -665,7 +663,7 @@ export default {
         .then((res) => {
           // console.log(res, "判断是否有");
           if (res.code === 200 && res.content.data.length > 0) {
-            console.log(res.content.data, "我的模型 - 最终数据");
+            // console.log(res.content.data, "我的模型 - 最终数据");
             let children = res.content.data.map((ele) => {
               customModelIdMap.set(ele.title, {
                 column_id: ele.column_id,
@@ -687,7 +685,7 @@ export default {
             if (this.modelData.length > 0) {
               this.modelData.forEach((ele) => {
                 if (ele.label == "我的模型") {
-                  console.log(ele, "我的模型");
+                  // console.log(ele, "我的模型");
                   ele.children = children;
                 }
               });
@@ -787,7 +785,7 @@ export default {
       this.$bus.$emit("updateModel", node);
     },
     handleDelete(node) {
-      console.log(node, "删除节点");
+      // console.log(node, "删除节点");
       let deleteParams = {
         id: customModelIdMap.get(node.data.label).id,
         columnId: 89,
@@ -811,8 +809,9 @@ export default {
     handleCheckChange(data, checked) {
       if (data.mainType && data.mainType !== "我的模型") {
         if (checked) {
-          console.log(data, "选中的数据");
+          // console.log(data, "选中的数据");
           this.showRightBox = true;
+          // 第一级菜单是所有图层
           if (data.mainType === "所有图层") {
             this.rightPanelTitle = data.label;
             this.originalData[`${data.label}_${data.town}`] =
@@ -857,7 +856,7 @@ export default {
               page: 0,
               search: JSON.stringify(searchParam),
             };
-            console.log(params, "所有图层不显示");
+            // console.log(params, "所有图层不显示");
 
             this.$Post(this.urlsCollection.selectContentList, params).then(
               (res) => {
@@ -870,8 +869,8 @@ export default {
 
                 if (res.code === 200 && res.content.data.length > 0) {
                   layerAuthorityMap.set(data.id, "有权限");
-                  console.log("有权限");
-                  console.log(data, "有权限的图层");
+                  // console.log("有权限");
+                  // console.log(data, "有权限的图层");
                   this.$store.state.treeDataCollection.set(data.id, {
                     mainType: data.mainType,
                     town: data.town,
@@ -890,7 +889,7 @@ export default {
                     layerParams
                   ).then((res) => {
                     if (res.code === 200 && res.content.data.length > 0) {
-                      console.log(res.content, "获取到的数据");
+                      // console.log(res.content, "获取到的数据");
                       let uniqueId = `${data.label}_${data.town}`;
                       this.originalData[uniqueId] = res.content.data.map(
                         (ele) => {
@@ -928,7 +927,7 @@ export default {
               }
             );
           }
-
+          // 第一级菜单是预设模型
           if (data.mainType === "预设模型") {
             layerAuthorityMap.set(data.id, "有权限");
             this.rightPanelTitle = `${data.label}(${data.mainType})`;
@@ -943,7 +942,7 @@ export default {
             this.$Post(this.urlsCollection.selectContentList, params).then(
               (res) => {
                 if (res.code === 200 && res.content.data.length > 0) {
-                  console.log(res.content.data, "点击预设模型后获取到的数据");
+                  // console.log(res.content.data, "点击预设模型后获取到的数据");
                   this.$store.state.treeDataCollection.set(data.id, {
                     mainType: data.mainType,
                   });
@@ -956,7 +955,6 @@ export default {
                     this.layerIdMap.set(data.id, `${cid}_polygon`);
                     // 激活当前展开面板
                     this.activeNames = ["myLabel", data.id];
-                    console.log(this.randomColor.get(uniqueId), "check color");
                     this.$store.state.mapMethodsCollection
                       .get("RENDER")
                       .addSinglePolygon(
@@ -983,16 +981,12 @@ export default {
           this.layerIdMap.delete(data.id);
           //关联自定义模型
           this.$store.state.treeDataCollection.delete(data.id);
-          console.log(
-            this.$store.state.treeDataCollection,
-            "treeDataCollection"
-          );
 
           // 只激活我的标记
           this.activeNames = ["myLabel"];
 
           for (let key in map2DViewer.polygons) {
-            console.log(key, "现在的面数据");
+            // console.log(key, "现在的面数据");
             if (key.indexOf(data.label) > -1) {
               this.$store.state.mapMethodsCollection
                 .get("RENDER")
@@ -1004,32 +998,69 @@ export default {
         this.legendTitle = Object.keys(this.originalData).map((v) => {
           return { name: v, info: v };
         });
-        // console.log(this.legendTitle, "legendTitle");
         this.legendIcon = this.legendTitle.map((c) => {
           let a = this.randomColor.get(c.name);
-          // console.log(a, "a");
+
           return {
             background: "transparent",
             border: `1px solid ${this.randomColor.get(c.name)}`,
           };
         });
       }
+
+      // 第一级菜单是我的模型
+      if (data.mainType && data.mainType === "我的模型") {
+        // 显示叠置分析的数据
+        checked ? this.displayOverlayData(data) : this.deleteOverlayData(data);
+      }
+    },
+    displayOverlayData(data) {
+      if (data.c_dzfx_file) {
+        // this.uploadBaseUrl + data.c_dzfx_file
+        // 测试数据
+        this.$Get("./static/json/test.json", "").then((response) => {
+          if (response.features.length > 0) {
+            response.features.forEach((v) => {
+              let geojson = publicFun.standardGeojson(v.geometry.coordinates);
+              // console.log(geojson, "geojson")
+              this.readGeojson(geojson, data.id);
+            });
+          }
+          // if (res.features.length > 0) {
+          //   res.features.forEach((v) => {
+          //     let geojson = publicFun.standardGeojson(v.geometry.coordinates);
+          //     this.readGeojson(geojson);
+          //   });
+          // }
+        });
+      }
+    },
+    readGeojson(geojson, id) {
+      map2DViewer.overlay[id] = [];
+      let states = [];
+      states.push(geojson);
+      let geojsonData = L.geoJSON(states, {
+        style: function (feature) {
+          // console.log(feature);
+        },
+      }).addTo(map2DViewer.map);
+      map2DViewer.overlay[id] = geojsonData;
+    },
+    deleteOverlayData(data) {
+      if (map2DViewer.overlay[data.id]) {
+        map2DViewer.map.removeLayer(map2DViewer.overlay[data.id]);
+      }
     },
     // 右侧面板项点击事件
     listItemClick(type, data) {
-      console.log(type, "type");
       this.$store.state.bottomMenuIndexs.index = -1;
       this.$store.state.bottomMenuIndexs.subIndex = -1;
       this.updateCasePopupShow = false;
       this.tableData = [];
       if (type === "default") {
-        console.log(data, "右侧面板需要显示的详细数据");
-        // let coord = data.geometry.coordinates[0][0][0];
-        // this.$store.state.mapMethodsCollection.get("RENDER").setView(coord, 16);
         this.tableType = "normal";
         this.boxWidth = "600";
         this.boxHeight = "200";
-        console.log(data, "defaultTable");
         this.tableData.push({
           nature: data.nature,
           area: data.area,
@@ -1097,7 +1128,7 @@ export default {
         this.$Post(this.urlsCollection.updateConllection, params).then(
           (res) => {
             if (res.code === 200) {
-              console.log("修改成功", res);
+              // console.log("修改成功", res);
               this.updateCasePopupShow = false;
               this.getUserMarkers();
             }
@@ -1111,14 +1142,14 @@ export default {
     },
     // 修改标记 -- 仅支持修改类型和描述
     updateLabel(val) {
-      console.log("修改标记", val);
+      // console.log("修改标记", val);
       this.$store.state.bottomMenuIndexs.index = -1;
       this.$store.state.bottomMenuIndexs.subIndex = -1;
       this.updateCasePopupShow = true;
       this.attrTableShow = false;
       if (this.updateCasePopupShow) {
         this.$nextTick(() => {
-          console.log(this.$refs.updateLabelRef, "updateLabelRef");
+          // console.log(this.$refs.updateLabelRef, "updateLabelRef");
           this.$refs.updateLabelRef.selectVal = val.type;
           this.$refs.updateLabelRef.textContent = val.des;
           this.$refs.updateLabelRef.id = val.id;
@@ -1129,7 +1160,7 @@ export default {
     // 删除标记
     deleteLabel(id) {
       if (localStorage.getItem("USER_ID")) {
-        console.log("删除标记");
+        // console.log("删除标记");
         let params = new FormData();
         this.$store.state.mapMethodsCollection
           .get("RENDER")
@@ -1144,7 +1175,7 @@ export default {
         this.$Post(this.urlsCollection.deleteConllection, params).then(
           (res) => {
             if (res.code === 200) {
-              console.log("疑点删除成功");
+              // console.log("疑点删除成功");
               this.getUserMarkers();
             }
           }
@@ -1177,7 +1208,7 @@ export default {
         }
       } else {
         // 未绘制几何体
-        console.log(val, "未绘制几何体");
+        // console.log(val, "未绘制几何体");
         if (val.geometryChecked) {
           let geoType = JSON.parse(val.geojson).properties.featureType;
           this.$store.state.mapMethodsCollection