添加标记疑点接口

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

@@ -368,7 +368,7 @@ L.Control.Draw = L.Control.extend({
     //监听地图单击事件
     map2DViewer.map.off("click", _this._onClickPoint, this);
     //监听鼠标移动事件
-    console.log(this, "鼠标移动this --test");
+    console.log("鼠标移动this --test","_onFinishClick");
     map2DViewer.map.off("mousemove", _this._mousemove, this);
     _this.isNewElevation = true;
     _this._finished = true;

src/assets/global.css

@@ -290,6 +290,7 @@ body iframe {
 .leaflet-touch .leaflet-bar a {
   position: fixed;
   left: 21%;
+  top: 150px;
 }
 
 /* ChartCard组件中的Empty组件样式 */

src/components/map/MapHolder.vue

@@ -162,8 +162,10 @@ export default {
      * @str -- id
      * @coord -- 坐标信息
      * @data -- 其余数据
+     * @geoType -- 几何体类型
      */
-    createLabelDiv(str, coord, data) {
+    createLabelDiv(str, coord, data, geoType) {
+      console.log(str, coord, data, geoType, "createLabelDiv");
       console.log(str, "label - str");
       this.currentLabelHtml = this.$refs.labelRef.$el.innerHTML;
       if (this.currentLabelHtml) {
@@ -182,8 +184,8 @@ export default {
                 this.deleteBtnEvent(str);
                 break;
               case "保存":
-                this.saveBtnEvent(str, coord, data);
-                console.log(str, coord, data);
+                this.saveBtnEvent(str, data, geoType);
+                // console.log(str, coord, data);
                 break;
             }
           });
@@ -201,19 +203,75 @@ export default {
       console.log("delete btn");
     },
 
-    // 点击保存事件时保存点数据
-    saveBtnEvent(str, coord, data) {
-      console.log("save btn");
-      let type = $(`#${str}_id select`).val();
-      let des = $(`#${str}_id textarea`).val();
-      let geometryAttr = {
-        id: publicFun.buildGuid("myLabel"),
-        coord: coord,
-        type: type,
-        des: des,
-      };
-      this.$store.getters.myLabelPointsArr.push(geometryAttr);
-      map2DViewer.map.closePopup();
+    /**
+     * 点击保存事件时保存点数据
+     * @str
+     * @data -- 绘制几何体时获取的数据；
+     * @geoType 几何体类型 类型: 0 点；1 线；2 面；3 矩形；4 圆形；5 其他；
+     */
+    saveBtnEvent(str, data, geoType) {
+      if (localStorage.getItem("USER_ID")) {
+        let title = $(`#${str}_id select`).val();
+        let des = $(`#${str}_id textarea`).val();
+        let coordinates = [data.points];
+        let geometry = publicFun.generateGeoJSON(
+          title,
+          des,
+          geoType,
+          coordinates
+        );
+        console.log(data, "标记疑点 -- 绘制的疑点信息");
+        console.log(geometry, "转换后的geoJson数据");
+        let params = new FormData();
+
+        params = {
+          geojson: JSON.stringify(geometry),
+          type: geoType,
+          userId: Number(localStorage.getItem("USER_ID")),
+          sourceId: 0,
+        };
+        console.log(params, "params");
+
+        this.$Post(this.urlsCollection.addConllection, params).then(
+          (res) => {
+            if (res.code == 200) {
+              console.log(res, "添加标记成功");
+              map2DViewer.map.closePopup();
+              // 根据用户获取标记
+              let paramData = new FormData();
+              paramData = {
+                userId: Number(localStorage.getItem("USER_ID")),
+                sourceId: 0,
+                pageSize: 10,
+              };
+              this.$Post(this.urlsCollection.selectByUser, paramData).then(
+                (userRes) => {
+                  if (userRes.code === 200) {
+                    console.log(userRes, "获取我的标记疑点数据");
+
+                    if (userRes.content.length > 0) {
+                      this.$store.state.myLabelPointsArr = [];
+                      this.$store.state.myLabelPointsArr = userRes.content.map(
+                        (v) => {
+                          return {
+                            id: v.id,
+                            geojson: v.geojson,
+                            type: v.type,
+                          };
+                        }
+                      );
+                    }
+                  }
+                  // 更新时调用一次搜索接口
+                }
+              );
+            }
+          },
+          (error) => {
+            console.log(error);
+          }
+        );
+      }
     },
     // 卷帘对比
     JLControl() {
@@ -246,28 +304,45 @@ export default {
     },
     // 初始化引入绘制工具
     initDraw() {
-      console.log(map2DViewer.measureTool, "initDraw");
       if (!map2DViewer.measureTool) {
         // 引入疑点标记绘制方法
         map2DViewer.drawToolFire = (data) => {
-          try {
-            // 纬经度
-            if (data && data.points.length >= 1) {
-              console.log(data.points[data.points.length - 1], "绘制的图形");
-              let coord = data.points[data.points.length - 1];
-              if (coord && coord.length >= 2) {
-                let newCoord = { lat: coord[0], lng: coord[1] };
-                this.labelDetailsPopupShow = true;
-                this.labelPopup = L.popup({ maxWidth: 700, maxHeight: 600 })
-                  .setLatLng(newCoord)
-                  .setContent(this.createLabelDiv("label", coord, data))
-                  .openOn(map2DViewer.map);
-                this.labelDetailsPopupShow = false;
-              }
+          // 纬经度
+          if (data && data.points.length >= 1) {
+            let geoType = null;
+            console.log(data, "测试绘制的数据");
+            // 类型: 0 点；1 线；2 面；3 矩形；4 圆形；5 其他；
+            if (data.points.length === 1 && data.area === 0) {
+              geoType = 0;
+            }
+            if (data.points.length === 2 && data.distance > 0) {
+              geoType = 4;
+            }
+
+            if (data.points.length > 2 && data.area === 0) {
+              geoType = 1;
+            }
+
+            if (data.points.length > 2 && data.area != 0 && data.area != "") {
+              geoType = 2;
+            }
+
+            let coord = data.points[data.points.length - 1];
+            if (coord && coord.length >= 2) {
+              let newCoord = { lat: coord[0], lng: coord[1] };
+              this.labelDetailsPopupShow = true;
+              this.labelPopup = L.popup({ maxWidth: 700, maxHeight: 600 })
+                .setLatLng(newCoord)
+                .setContent(this.createLabelDiv("label", coord, data, geoType))
+                .openOn(map2DViewer.map);
+              this.labelDetailsPopupShow = false;
             }
-          } catch (e) {
-            console.log("引入疑点标记绘制方法 error");
           }
+          // try {
+
+          // } catch (e) {
+          //   console.log("引入疑点标记绘制方法 error");
+          // }
         };
         map2DViewer.setDrawTool({
           action: "add",

src/utils/publicFunction.js

@@ -1,10 +1,10 @@
 /**
  * 公共函数库
  */
-import CryptoJS from 'crypto-js';
+import CryptoJS from "crypto-js";
 
-const key = CryptoJS.enc.Utf8.parse('1234123412ABCDEF'); //十六位十六进制数作为密钥
-const iv = CryptoJS.enc.Utf8.parse('ABCDEF1234123412'); //十六位十六进制数作为密钥偏移量
+const key = CryptoJS.enc.Utf8.parse("1234123412ABCDEF"); //十六位十六进制数作为密钥
+const iv = CryptoJS.enc.Utf8.parse("ABCDEF1234123412"); //十六位十六进制数作为密钥偏移量
 
 /* 加密 */
 const Encrypt = (word) => {
@@ -12,10 +12,10 @@ const Encrypt = (word) => {
   let encrypted = CryptoJS.AES.encrypt(srcs, key, {
     iv: iv,
     mode: CryptoJS.mode.CBC,
-    padding: CryptoJS.pad.Pkcs7
+    padding: CryptoJS.pad.Pkcs7,
   });
   return encrypted.ciphertext.toString().toUpperCase();
-}
+};
 /* 解密 - PRIVATE_KEY - 验证 */
 const Decrypt = (word) => {
   let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
@@ -23,11 +23,11 @@ const Decrypt = (word) => {
   let decrypt = CryptoJS.AES.decrypt(srcs, key, {
     iv: iv,
     mode: CryptoJS.mode.CBC,
-    padding: CryptoJS.pad.Pkcs7
+    padding: CryptoJS.pad.Pkcs7,
   });
   let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
   return decryptedStr.toString();
-}
+};
 //随机id生成
 const buildGuid = function (options) {
   var text = "";
@@ -72,10 +72,57 @@ const getRandomColor = function () {
   return "#" + rgb.join("");
 };
 
+/**
+ * 获取geoJSON格式的数据 -- 目前仅供标记疑点相关内容使用(圆也存为面);
+ *
+ * 类型: 0 点；1 线；2 面；3 矩形；4 圆形；5 其他；
+ */
+const generateGeoJSON = (title, desc, featureType, coords) => {
+  let dataType = "LineString";
+  let propertiesType = "面";
+  switch (featureType) {
+    case 0:
+      dataType = "Point";
+      propertiesType = "点";
+      break;
+    case 1:
+      dataType = "LineString";
+      propertiesType = "线";
+      break;
+    case 2:
+      dataType = "Polygon";
+      propertiesType = "面";
+      break;
+    case 4:
+      dataType = "Polygon";
+      propertiesType = "圆";
+  }
+  let data = {
+    type: "Feature",
+    properties: {
+      title: title || "",
+      desc: desc || "",
+      featureType: propertiesType,
+    },
+    geometry: {
+      coordinates: coords,
+      // coordinates: [
+      //   [114.1199232448792, 35.33694447387694],
+      //   [113.75754748638985, 31.716871012257627],
+      //   [109.28122464218609, 32.06198896315057],
+      //   [109.70940919390267, 34.543087977545525],
+      // ],
+      type: dataType,
+    },
+  };
+  return data;
+};
+
 export default {
   buildGuid,
   compare,
   getRandomColor,
   Encrypt,
-  Decrypt
+  Decrypt,
+  generateGeoJSON,
 };

src/views/ComprehensiveAnalysis.vue

@@ -355,14 +355,15 @@ export default {
       handler(val) {
         // console.log(val, "获取我的疑点数组");
         if (val.length > 0) {
-          console.log("获取的我的疑点数据");
+          console.log("获取的我的疑点数据", val);
           this.rightLabelData = val.map((v, i) => {
+            let data = JSON.parse(v.geojson);
             return {
               id: v.id,
-              name: `疑点 ${i}`,
-              coord: v.coord,
-              type: v.type,
-              des: v.des,
+              name: `疑点 ${v.id}`,
+              coord: data.geometry.coordinates[0][0],
+              type: data.properties.title,
+              des: data.properties.desc,
             };
           });
         }
@@ -401,6 +402,9 @@ export default {
         }),
       };
     });
+
+    //获取我的标记数据
+    this.getUserMarkers();
   },
 
   mounted() {
@@ -422,6 +426,29 @@ export default {
     map2DViewer.map.off("move");
   },
   methods: {
+    // 调用我的标记接口
+    getUserMarkers() {
+      if (localStorage.getItem("USER_ID")) {
+        let paramData = new FormData();
+        paramData = {
+          userId: Number(localStorage.getItem("USER_ID")),
+          sourceId: 0,
+          pageSize: 10,
+        };
+        this.$Post(this.urlsCollection.selectByUser, paramData).then((res) => {
+          if (res.code === 200 && res.content.length > 0) {
+            this.$store.state.myLabelPointsArr = [];
+            this.$store.state.myLabelPointsArr = res.content.map((v) => {
+              return {
+                id: v.id,
+                geojson: v.geojson,
+                type: v.type,
+              };
+            });
+          }
+        });
+      }
+    },
     // 回退事件
     backEvent() {
       console.log("综合分析回退事件");
@@ -661,9 +688,8 @@ export default {
     justify-content: center;
     position: absolute;
     left: 21%;
-    top: 5%;
+    top: 30px;
     pointer-events: auto;
-    
   }
 
   &-backbtn {