我的标记定位初始化图形

public/static/config/config.js

@@ -26,6 +26,8 @@ var map2DViewer = {
   jlControl: {},
   layers: {},
   groups: {},
+  // 我的标记
+  myLabels: {},
 };
 
 // 存放tree中图层node id

src/components/map/MapHolder.vue

@@ -40,7 +40,6 @@ export default {
       this.caseAuditEvent();
     });
 
-
     //地图初始化
     this.mapInit();
 
@@ -48,6 +47,8 @@ export default {
       addPolygonLayer: this.addPolygonLayer,
       setView: this.setView,
       deletePolygonLayer: this.deletePolygonLayer,
+      drawGeometry: this.drawGeometry,
+      deleteGeometry: this.deleteGeometry,
     });
   },
   beforeDestroyed() {
@@ -280,8 +281,10 @@ export default {
         map2DViewer.jlMap = L.tileLayer(
           "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d"
         ).addTo(map2DViewer.map);
-        map2DViewer.jlControl = L.control.sideBySide(map2DViewer.map, map2DViewer.jlMap).addTo(map2DViewer.map);
-      } else if(map2DViewer.map.hasLayer(map2DViewer.jlMap)) {
+        map2DViewer.jlControl = L.control
+          .sideBySide(map2DViewer.map, map2DViewer.jlMap)
+          .addTo(map2DViewer.map);
+      } else if (map2DViewer.map.hasLayer(map2DViewer.jlMap)) {
         map2DViewer.map.removeControl(map2DViewer.jlControl);
         map2DViewer.map.removeLayer(map2DViewer.jlMap);
         delete map2DViewer.jlMap;
@@ -547,6 +550,81 @@ export default {
         map2DViewer.map.removeLayer(polygon);
       });
     },
+
+    drawPoints(data) {
+      console.log("开始绘制点", data);
+      this.setView(data.coord, 16);
+      map2DViewer.myLabels[`label_${data.id}`] = L.marker(data.coord).addTo(
+        map2DViewer.map
+      );
+    },
+    drawLine(data, color) {
+      console.log("开始绘制线", data);
+      // this.setView(data.coord, 16);
+      let coordinates = JSON.parse(data.geojson).geometry.coordinates[0];
+      map2DViewer.myLabels[`label_${data.id}`] = L.polyline(coordinates, {
+        color: color,
+        weight: 3,
+        fillOpacity: color,
+        opacity: 1,
+        fillOpacity: 0.4,
+      }).addTo(map2DViewer.map);
+      // zoom the map to the polyline
+      map2DViewer.map.fitBounds(
+        map2DViewer.myLabels[`label_${data.id}`].getBounds()
+      );
+    },
+    drawPolygon(data, color) {
+      console.log("开始绘制面", data);
+      let coordinates = JSON.parse(data.geojson).geometry.coordinates[0];
+      map2DViewer.myLabels[`label_${data.id}`] = L.polygon(coordinates, {
+        color: color,
+        weight: 3,
+        fillOpacity: color,
+        opacity: 1,
+        fillOpacity: 0.4,
+      }).addTo(map2DViewer.map);
+      map2DViewer.map.fitBounds(
+        map2DViewer.myLabels[`label_${data.id}`].getBounds()
+      );
+    },
+
+    drawCircle(data, color) {
+      console.log("开始绘制圆", data);
+      let coordinates = JSON.parse(data.geojson).geometry.coordinates[0];
+      if ((coordinates.length = 2)) {
+        // let fromPoint = coordinates[0];
+        // let toPoint = coordinates[1];
+      }
+
+      // let centerPoints =
+    },
+    /**
+     * 综合分析 -- 我的标记 -- 绘制单一几何体方法
+     * @type 判断需要绘制的几何体类型
+     */
+    drawGeometry(type, data) {
+      let color = "#ff0000";
+      switch (type) {
+        case "点":
+          this.drawPoints(data);
+          break;
+        case "线":
+          this.drawLine(data, color);
+          break;
+        case "面":
+          this.drawPolygon(data, color);
+          break;
+        case "圆":
+          this.drawCircle(data, color);
+          break;
+      }
+    },
+    deleteGeometry(geometry) {
+      if (geometry) {
+        geometry.removeFrom(map2DViewer.map);
+      }
+    },
   },
 };
 </script>

src/views/ComprehensiveAnalysis.vue

@@ -555,6 +555,7 @@ export default {
       this.$store.state.bottomMenuIndexs.subIndex = -1;
       this.attrTableShow = true;
       this.updateCasePopupShow = false;
+
       this.tableData = [];
       if (type === "default") {
         let coord = data.geometry.coordinates[0][0][0];
@@ -572,16 +573,22 @@ export default {
         console.log(this.tableData);
       }
       if (type === "new") {
+        let geoType = JSON.parse(data.geojson).properties.featureType;
+        this.$store.state.mapMethodsCollection
+          .get("RENDER")
+          .drawGeometry(geoType, data);
+
         this.tableType = "personal";
         this.boxWidth = "300";
         this.boxHeight = "300";
-        this.$store.state.mapMethodsCollection.get("RENDER").setView(data.coord, 16);
+        // this.$store.state.mapMethodsCollection
+        //   .get("RENDER")
+        //   .setView(data.coord, 16);
         this.tableData.push({
           name: data.name,
           type: data.type,
           des: data.des
         });
-        this.$bus.$emit("listItemClick", data);
       }
     },
     closeEvent() {
@@ -632,7 +639,7 @@ export default {
       this.$store.state.bottomMenuIndexs.subIndex = -1;
       this.updateCasePopupShow = true;
       this.attrTableShow = false;
-      this.this.$nextTick(() => {
+      this.$nextTick(() => {
         console.log(this.$refs.updateLabelRef, "updateLabelRef");
         this.$refs.updateLabelRef.selectVal = val.type;
         this.$refs.updateLabelRef.textContent = val.des;
@@ -645,6 +652,11 @@ export default {
       if (localStorage.getItem("USER_ID")) {
         console.log("删除标记");
         let params = new FormData();
+        this.$store.state.mapMethodsCollection
+          .get("RENDER")
+          .deleteGeometry(map2DViewer.myLabels[`label_${id}`]);
+        map2DViewer.myLabels[`label_${id}`] = null;
+
         params = {
           userId: Number(localStorage.getItem("USER_ID")),
           sourceId: 0,