我的标记添加面积距离等信息

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

@@ -257,7 +257,7 @@ L.Control.Draw = L.Control.extend({
     if (area > 1000000) {
       area = (area * 0.000001).toFixed(2) + " 平方公里";
     } else {
-      area = area.toFixed(2) + " 米²";
+      area = area.toFixed(2) + " 平方米";
     }
 
     return area;

src/assets/global.css

@@ -301,8 +301,9 @@ body iframe {
 
 .leaflet-touch .leaflet-bar a {
   position: fixed;
-  left: 21%;
+  left: 23%;
   top: 150px;
+  z-index: 100000000000000000;
 }
 
 /* ChartCard组件中的Empty组件样式 */

src/components/map/MapHolder.vue

@@ -1,10 +1,24 @@
 <template>
   <div id="map2DViewer">
     <!-- 特殊地图属性弹窗 -- 有审计功能 -->
-    <CaseAuditPopup v-show="auditPopupShow" :tableObj="auditRefTableObj" :defaultStatus="defaultStatus" ref="auditRef" />
+    <CaseAuditPopup
+      v-show="auditPopupShow"
+      :tableObj="auditRefTableObj"
+      :defaultStatus="defaultStatus"
+      ref="auditRef"
+    />
     <!-- 通用地图属性弹窗 -- 无审计功能 -->
-    <NormalAttrPopup v-show="normalAttrPopupShow" :tableObj="tableObj" ref="normalRef" />
-    <LabelCasePopup v-show="labelDetailsPopupShow" ref="labelRef" />
+    <NormalAttrPopup
+      v-show="normalAttrPopupShow"
+      :tableObj="tableObj"
+      ref="normalRef"
+    />
+    <LabelCasePopup
+      v-show="labelDetailsPopupShow"
+      ref="labelRef"
+      :targetArea="targetArea"
+      :targetDistance="targetDistance"
+    />
   </div>
 </template>
 <script>
@@ -19,7 +33,7 @@ export default {
   components: {
     CaseAuditPopup,
     NormalAttrPopup,
-    LabelCasePopup
+    LabelCasePopup,
   },
   data() {
     return {
@@ -47,15 +61,17 @@ export default {
         镇域名称: "--",
         "面积(平方米)": "--",
         土地类型: "--",
-        图斑编号: "--"
+        图斑编号: "--",
       },
       auditRefTableObj: {
         镇域名称: "--",
         "面积(平方米)": "--",
         图层构成: "--",
-        性质: "--"
+        性质: "--",
       },
-      defaultStatus: "未标记"
+      targetArea: 0,
+      targetDistance: 0,
+      defaultStatus: "未标记",
     };
   },
   created() {},
@@ -88,7 +104,7 @@ export default {
       deleteGroupFromMap: this.deleteGroupFromMap,
       drawGeometry: this.drawGeometry,
       deleteGeometry: this.deleteGeometry,
-      addTiledMapLayer: this.addTiledMapLayer
+      addTiledMapLayer: this.addTiledMapLayer,
     });
   },
   beforeDestroyed() {
@@ -109,11 +125,10 @@ export default {
     // 监听当前菜单
     getCurrentMenu() {
       return this.$store.state.navSelect;
-    }
+    },
   },
   watch: {
     getLabelCaseBtnStatus(val) {
-      // console.log(val, "标记疑点");
       if (val.index === 1 && val.subIndex === 1) {
         // 删除地图上所有弹窗
         this.$store.state.attrTableShow = false;
@@ -121,7 +136,6 @@ export default {
         // 删除地图上的所有标记
         if (map2DViewer.myLabels) {
           for (let i in map2DViewer.myLabels) {
-            // console.log(i, "图层名");
             this.deleteGeometry(map2DViewer.myLabels[i]);
             map2DViewer.myLabels[i] = null;
           }
@@ -152,9 +166,9 @@ export default {
         this.$nextTick(() => {
           this.getJSonData();
         });
-      }
+      },
       // immediate: true
-    }
+    },
   },
   methods: {
     // 测试宝石蓝底图
@@ -165,7 +179,7 @@ export default {
         minZoom: 0,
         minNativeZoom: 3,
         maxNativeZoom: 7,
-        maxZoom: 14
+        maxZoom: 14,
       });
       return layer;
     },
@@ -177,7 +191,7 @@ export default {
         minZoom: 0,
         minNativeZoom: 0,
         maxNativeZoom: 7,
-        maxZoom: 14
+        maxZoom: 14,
       });
       return layer;
     },
@@ -189,7 +203,7 @@ export default {
     stopLabelCase() {
       if (map2DViewer.measureTool) {
         map2DViewer.setDrawTool({
-          action: "remove"
+          action: "remove",
         });
       }
     },
@@ -220,13 +234,13 @@ export default {
             if ($(`#${str}_id a`)) {
               $(`#${str}_id a`)
                 .eq(0)
-                .click(e => {
+                .click((e) => {
                   this.$store.state.lawPopupShow = true;
                   this.$store.state.lawSourceType = sourceType;
                 });
               $(`#${str}_id a`)
                 .eq(1)
-                .click(e => {
+                .click((e) => {
                   // 触发综合分析右侧面板点击事件
                   this.$bus.$emit("viewDetailsPopup", geojsonData);
                 });
@@ -239,7 +253,7 @@ export default {
               $(`#${str}_id a`).eq(0).remove();
               $(`#${str}_id a`)
                 .eq(0)
-                .click(e => {
+                .click((e) => {
                   // 触发综合分析右侧面板点击事件
                   this.$bus.$emit("viewDetailsPopup", geojsonData);
                 });
@@ -287,11 +301,17 @@ export default {
           // 下拉框内容
           if ($(`#${str}_id .center-table-item-special select`)) {
             if (this.caseStatusMap.has(str)) {
-              $(`#${str}_id .center-table-item-special select`).val(this.caseStatusMap.get(str));
+              $(`#${str}_id .center-table-item-special select`).val(
+                this.caseStatusMap.get(str)
+              );
               let inputStatus = "";
               if (this.caseStatusMap.has(str)) {
-                this.caseStatusMap.get(str) === "isTrue" && $(`#${str}_id .center-table-item-special input`).val("疑点");
-                !this.caseStatusMap.get(str) === "isTrue" && $(`#${str}_id .center-table-item-special input`).val("非疑点");
+                this.caseStatusMap.get(str) === "isTrue" &&
+                  $(`#${str}_id .center-table-item-special input`).val("疑点");
+                !this.caseStatusMap.get(str) === "isTrue" &&
+                  $(`#${str}_id .center-table-item-special input`).val(
+                    "非疑点"
+                  );
               }
             }
           }
@@ -300,13 +320,13 @@ export default {
           if ($(`#${str}_id a`)) {
             $(`#${str}_id a`)
               .eq(0)
-              .click(e => {
+              .click((e) => {
                 this.$store.state.lawPopupShow = true;
                 this.$store.state.lawSourceType = sourceType;
               });
             $(`#${str}_id a`)
               .eq(1)
-              .click(e => {
+              .click((e) => {
                 // 触发综合分析右侧面板点击事件
 
                 this.$bus.$emit("viewDetailsPopup", geojsonData);
@@ -314,7 +334,7 @@ export default {
           }
           // input添加点击事件
           if ($(`#${str}_id input`)[1]) {
-            $(`#${str}_id input`).click(e => {
+            $(`#${str}_id input`).click((e) => {
               switch (e.target.defaultValue) {
                 case "取消":
                   this.cancelBtnEvent();
@@ -335,9 +355,10 @@ export default {
      * @coord -- 坐标信息
      * @data -- 其余数据
      * @geoType -- 几何体类型
+     * @area -- 面积
+     * @distance -- 距离
      */
-    createLabelDiv(str, coord, data, geoType) {
-      // console.log(str, "label - str");
+    createLabelDiv(str, coord, data, geoType, area, distance) {
       this.currentLabelHtml = this.$refs.labelRef.$el.innerHTML;
       if (this.currentLabelHtml) {
         let div = document.createElement("div");
@@ -346,18 +367,14 @@ export default {
         // 动态创建div后赋值模板样式
         div.innerHTML = this.currentLabelHtml;
         $(() => {
-          console.log($(`#${str}_id textarea`).val(), "textarea");
           $(`#${str}_id`).css("height", "100%");
-
-          $(`#${str}_id input`).click(e => {
-            console.log(e.target.defaultValue);
+          $(`#${str}_id input`).click((e) => {
             switch (e.target.defaultValue) {
               case "取消":
                 this.cancelBtnEvent();
                 break;
               case "保存":
-                this.saveBtnEvent(str, data, geoType);
-
+                this.saveBtnEvent(str, data, geoType, area, distance);
                 break;
             }
           });
@@ -365,27 +382,21 @@ export default {
         return div;
       }
     },
-    modifyBtnEvent() {
-      console.log("用户点击了地图中的修改按钮！");
-    },
     confirmBtnEvent(str, modelId, columnId) {
-      console.log(str, "str--当前开启的");
       // isTrue
       let selectVal = $(`#${str}_id .center-table-item-special select`).val();
       this.caseStatusMap.set(str, selectVal);
       if (selectVal === "isTrue") {
         map2DViewer.polygons[str].setStyle({
           color: `rgb(${caseColorChange["isPointColor"][0]},${caseColorChange["isPointColor"][1]},${caseColorChange["isPointColor"][2]})`,
-          weight: 4
+          weight: 4,
         });
       } else {
         map2DViewer.polygons[str].setStyle({
           color: `rgb(${caseColorChange["notPointColor"][0]},${caseColorChange["notPointColor"][1]},${caseColorChange["notPointColor"][2]})`,
-          weight: 4
+          weight: 4,
         });
       }
-      console.log(map2DViewer.polygons[str]);
-
       // 修改疑点时必须要写id
       let obj = {
         id: str,
@@ -394,32 +405,42 @@ export default {
         // 修改人员名称
         c_editor_name: localStorage.getItem("USER_NAME"),
         // 修改人员ID
-        c_editorid: localStorage.getItem("USER_ID")
+        c_editorid: localStorage.getItem("USER_ID"),
       };
 
       let modifyParams = new FormData();
       modifyParams = {
         columnId: columnId,
         modelId: modelId,
-        content: JSON.stringify(obj)
+        content: JSON.stringify(obj),
       };
-      this.$Post(this.urlsCollection.updateContent, modifyParams).then(res => {
-        if (res.code === 200) {
-          this.$message.success("数据修改成功");
-          map2DViewer.map.closePopup();
+      this.$Post(this.urlsCollection.updateContent, modifyParams).then(
+        (res) => {
+          if (res.code === 200) {
+            this.$message.success("数据修改成功");
+            map2DViewer.map.closePopup();
 
-          switch (selectVal) {
-            case "isTrue":
-              this.$store.state.mapMethodsCollection.get("METHODS").changeCaseBoolean(str, "疑点");
-              this.$store.state.mapMethodsCollection.get("METHODS").changeSortMethod("疑点");
-              break;
-            case "isFalse":
-              this.$store.state.mapMethodsCollection.get("METHODS").changeCaseBoolean(str, "非疑点");
-              this.$store.state.mapMethodsCollection.get("METHODS").changeSortMethod("非疑点");
-              break;
+            switch (selectVal) {
+              case "isTrue":
+                this.$store.state.mapMethodsCollection
+                  .get("METHODS")
+                  .changeCaseBoolean(str, "疑点");
+                this.$store.state.mapMethodsCollection
+                  .get("METHODS")
+                  .changeSortMethod("疑点");
+                break;
+              case "isFalse":
+                this.$store.state.mapMethodsCollection
+                  .get("METHODS")
+                  .changeCaseBoolean(str, "非疑点");
+                this.$store.state.mapMethodsCollection
+                  .get("METHODS")
+                  .changeSortMethod("非疑点");
+                break;
+            }
           }
         }
-      });
+      );
     },
     cancelBtnEvent() {
       map2DViewer.map.closePopup();
@@ -432,8 +453,10 @@ export default {
      * @str
      * @data -- 绘制几何体时获取的数据；
      * @geoType 几何体类型 类型: 0 点；1 线；2 面；3 矩形；4 圆形；5 其他；
+     * @area
+     * @distance
      */
-    saveBtnEvent(str, data, geoType) {
+    saveBtnEvent(str, data, geoType, area, distance) {
       if (localStorage.getItem("USER_ID")) {
         let title = $(`#${str}_id select`).val();
         let des = $(`#${str}_id textarea`).val();
@@ -443,8 +466,18 @@ export default {
           this.$message.info("该名称已存在，请重新输入!");
         } else {
           geoName = $(`#${str}_id input`).eq(0).val();
+
           let coordinates = [data.points];
-          let geometry = publicFun.generateGeoJSON(title, des, geoType, coordinates, geoName);
+          let options = {
+            title: title,
+            des: des,
+            geoType: geoType,
+            coordinates: coordinates,
+            geoName: geoName,
+            area: area,
+            distance: distance,
+          };
+          let geometry = publicFun.generateGeoJSON(options);
           let params = new FormData();
           let newGeojson = JSON.stringify(geometry);
           myLabelNameMap.set(geoName, newGeojson);
@@ -452,11 +485,11 @@ export default {
             geojson: newGeojson,
             type: geoType,
             userId: Number(localStorage.getItem("USER_ID")),
-            sourceId: 0
+            sourceId: 0,
           };
 
           this.$Post(this.urlsCollection.addConllection, params).then(
-            res => {
+            (res) => {
               if (res.code == 200) {
                 // 标记成功后删除保存的原有名称
                 myLabelNameMap.delete(geoName);
@@ -466,33 +499,36 @@ export default {
                 paramData = {
                   userId: Number(localStorage.getItem("USER_ID")),
                   sourceId: 0,
-                  pageSize: 10
+                  pageSize: 10,
                 };
                 // 暂存map中刚刚保存的数据
-                this.$Post(this.urlsCollection.selectByUser, paramData).then(userRes => {
-                  if (userRes.code === 200) {
-                    if (userRes.content.length > 0) {
-                      this.$store.state.myLabelPointsArr = [];
-                      this.$store.state.myLabelPointsArr = userRes.content.map(v => {
-                        if (JSON.stringify(geometry) === v.geojson) {
-                          sessionStorage.setItem("myLabelPointsId", v.id);
-                        }
-                        return {
-                          id: v.id,
-                          geojson: v.geojson,
-                          type: v.type
-                        };
-                      });
-                      // 判断刚刚暂存的数据，并调用小眼睛的方法
+                this.$Post(this.urlsCollection.selectByUser, paramData).then(
+                  (userRes) => {
+                    if (userRes.code === 200) {
+                      if (userRes.content.length > 0) {
+                        this.$store.state.myLabelPointsArr = [];
+                        this.$store.state.myLabelPointsArr =
+                          userRes.content.map((v) => {
+                            if (JSON.stringify(geometry) === v.geojson) {
+                              sessionStorage.setItem("myLabelPointsId", v.id);
+                            }
+                            return {
+                              id: v.id,
+                              geojson: v.geojson,
+                              type: v.type,
+                            };
+                          });
+                        // 判断刚刚暂存的数据，并调用小眼睛的方法
+                      }
                     }
+                    // 更新时调用一次搜索接口
                   }
-                  // 更新时调用一次搜索接口
-                });
+                );
               }
               // 保存后需要删除地图上的标记
               this.reStartLabelCase();
             },
-            error => {
+            (error) => {
               console.log("标记疑点保存失败！", error);
               this.reStartLabelCase();
             }
@@ -508,12 +544,18 @@ export default {
         //   "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=f331ba0b9ab96fb21c56d91de868935d"
         // ).addTo(map2DViewer.map);
         if (this.$store.state.JLControlRightMapUrl) {
-          map2DViewer.jlMap = this.addTiledMapLayer(this.$store.state.JLControlRightMapUrl).addTo(map2DViewer.map);
+          map2DViewer.jlMap = this.addTiledMapLayer(
+            this.$store.state.JLControlRightMapUrl
+          ).addTo(map2DViewer.map);
         } else {
-          map2DViewer.jlMap = this.addTiledMapLayer(systemConfig.imageryLayerSat2022s2.url).addTo(map2DViewer.map);
+          map2DViewer.jlMap = this.addTiledMapLayer(
+            systemConfig.imageryLayerSat2022s2.url
+          ).addTo(map2DViewer.map);
         }
 
-        map2DViewer.jlControl = L.control.sideBySide(map2DViewer.map, map2DViewer.jlMap).addTo(map2DViewer.map);
+        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);
@@ -551,7 +593,7 @@ export default {
     initDraw() {
       if (!map2DViewer.measureTool) {
         // 引入疑点标记绘制方法
-        map2DViewer.drawToolFire = data => {
+        map2DViewer.drawToolFire = (data) => {
           // 纬经度
           if (data && data.points.length >= 1) {
             let geoType = null;
@@ -572,14 +614,28 @@ export default {
             }
 
             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;
+              this.targetArea = data.area;
+              this.targetDistance = data.distance;
+              this.$refs.labelRef.$nextTick(() => {
+                this.labelDetailsPopupShow = true;
+                this.labelPopup = L.popup({ maxWidth: 700, maxHeight: 600 })
+                  .setLatLng(newCoord)
+                  .setContent(
+                    this.createLabelDiv(
+                      "label",
+                      coord,
+                      data,
+                      geoType,
+                      data.area,
+                      data.distance
+                    )
+                  )
+                  .openOn(map2DViewer.map);
+                this.labelDetailsPopupShow = false;
+              });
             }
           }
         };
@@ -591,7 +647,7 @@ export default {
           font_size: "14px",
           closeButton: true,
           iconUrl: "../../static/plugins/draw-plugin/images/marker-icon.png",
-          map: map2DViewer.map
+          map: map2DViewer.map,
         });
       }
     },
@@ -604,7 +660,7 @@ export default {
         {
           resolutions: systemConfig.imageryLayer.resolutions,
           origin: [-66000, 75000],
-          bounds: L.bounds([-65000, -76000], [75000, 72000])
+          bounds: L.bounds([-65000, -76000], [75000, 72000]),
         }
       );
 
@@ -614,13 +670,15 @@ export default {
         minZoom: systemConfig.imageryLayer.minZoom,
         maxZoom: systemConfig.imageryLayer.maxZoom,
         attributionControl: false,
-        zoomControl: false
+        zoomControl: false,
         // preferCanvas: true,
       }).setView(systemConfig.mapViewer.center, systemConfig.mapViewer.zoom);
 
       //添加默认图层
       let guid = publicFun.buildGuid("baseLayer");
-      let layer = this.addTiledMapLayer(systemConfig.blueBlackMap.url).addTo(map2DViewer.map);
+      let layer = this.addTiledMapLayer(systemConfig.blueBlackMap.url).addTo(
+        map2DViewer.map
+      );
       map2DViewer.layers["darkmap"] = layer;
 
       let imageryLayer = this.addTiledMapLayer(systemConfig.imageryLayer.url);
@@ -643,14 +701,16 @@ export default {
         map2DViewer.groups["浦东新区_polygon"].remove();
       }
       // 请求并渲染新的区域图层
-      get("./static/json/simplified_pdgeojson.json", "").then(geoJson => {
+      get("./static/json/simplified_pdgeojson.json", "").then((geoJson) => {
         // 存放所有的面数据
         map2DViewer.groups["浦东新区_polygon"] = L.featureGroup();
         map2DViewer.groups["浦东新区_label"] = L.featureGroup();
         map2DViewer.groups["浦东新区_polygon"].addTo(map2DViewer.map);
         map2DViewer.groups["浦东新区_label"].addTo(map2DViewer.map);
-        geoJson.features.map(feature => {
-          let correctCordArr = JSON.parse(JSON.stringify(feature.geometry.coordinates));
+        geoJson.features.map((feature) => {
+          let correctCordArr = JSON.parse(
+            JSON.stringify(feature.geometry.coordinates)
+          );
           let newCorrectCoordArr = publicFun.latLngsCorrection(correctCordArr);
           feature.geometry.coordinates = newCorrectCoordArr;
           // if (
@@ -691,7 +751,10 @@ export default {
         this.getJSonDataToStreet("", "");
         // 切换到首页时需定位到当前图层
         if (this.$store.state.homeSpecialTown === "全部") {
-          this.setView(townLocationMap.get(this.$store.state.homeSpecialTown), 0);
+          this.setView(
+            townLocationMap.get(this.$store.state.homeSpecialTown),
+            0
+          );
         } else {
           let polygon = townPolygonMap.get(this.$store.state.homeSpecialTown);
           map2DViewer.map.fitBounds(polygon.getBounds());
@@ -722,7 +785,7 @@ export default {
         weight: 3,
         fillColor: this.getColor(name),
         opacity: 1,
-        fillOpacity: 0.4
+        fillOpacity: 0.4,
       }).addTo(map2DViewer.groups["浦东新区_polygon"]);
 
       center = JSON.parse(JSON.stringify(center)).geometry.coordinates;
@@ -735,25 +798,25 @@ export default {
           radius: 10,
           weight: 1,
           fillOpacity: 0,
-          color: "#e6d273"
+          color: "#e6d273",
         });
         wmarker.bindLabel(feature.properties.NAME, {
           noHide: true,
           clickable: true,
-          offset: [-25, 10]
+          offset: [-25, 10],
         });
         wmarker.addTo(map2DViewer.groups["浦东新区_label"]);
         let circle1 = L.circleMarker(center, {
           radius: 8,
           weight: 1,
           fillOpacity: 0,
-          color: "#e6d273"
+          color: "#e6d273",
         }).addTo(map2DViewer.groups["浦东新区_polygon"]);
         let circle2 = L.circleMarker(center, {
           radius: 5,
           weight: 1,
           fillOpacity: 1,
-          color: "#e6d273"
+          color: "#e6d273",
         }).addTo(map2DViewer.groups["浦东新区_polygon"]);
       }
     },
@@ -792,20 +855,32 @@ export default {
      * @modelId -- modelId
      * @columnId -- columnId
      */
-    addSinglePolygon(geometry, cid, color, uniqueId, mainType, sourceType, defaultStatus, modelId, columnId) {
+    addSinglePolygon(
+      geometry,
+      cid,
+      color,
+      uniqueId,
+      mainType,
+      sourceType,
+      defaultStatus,
+      modelId,
+      columnId
+    ) {
       let uniqueIdList = [];
       if (this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId]) {
-        uniqueIdList = this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId];
+        uniqueIdList =
+          this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId];
       }
 
       let singlePolygonItem = {
         uniqueId: uniqueId,
         geometry: geometry,
         cid: cid,
-        color: color
+        color: color,
       };
       uniqueIdList.push(singlePolygonItem);
-      this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId] = uniqueIdList;
+      this.$store.state.selectSelectDataMap["singlePolygon"][uniqueId] =
+        uniqueIdList;
       // 当前数据坐标系为WGS84
       let targetGeometry = JSON.parse(geometry).geometry;
       // 预设模型与所有图层层级不同
@@ -816,28 +891,36 @@ export default {
         weight: 3,
         fillColor: color,
         opacity: 1,
-        fillOpacity: 0
+        fillOpacity: 0,
       }).addTo(map2DViewer.analysisGroups[uniqueId]);
 
-      polygon.on("click", e => {
+      polygon.on("click", (e) => {
         // 鼠标点击图版高亮提示逻辑
         // 首先恢复上一个图版
         if (this.$store.state.map2DViewerPolygonsCid.newCid) {
-          map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid.newCid].setStyle({
+          map2DViewer.polygons[
+            this.$store.state.map2DViewerPolygonsCid.newCid
+          ].setStyle({
             color: this.$store.state.map2DViewerPolygonsCid.oldColor,
-            fillOpacity: 0
+            fillOpacity: 0,
           });
         }
         // 判断是否是重复点击，不是的话高亮，是的话不操作。
         if (cid != this.$store.state.map2DViewerPolygonsCid.newCid) {
-          this.$store.state.map2DViewerPolygonsCid = { newCid: cid, oldColor: color };
+          this.$store.state.map2DViewerPolygonsCid = {
+            newCid: cid,
+            oldColor: color,
+          };
           polygon.setStyle({
             color: "red",
             fillColor: "red",
-            fillOpacity: 0.35
+            fillOpacity: 0.35,
           });
         } else {
-          this.$store.state.map2DViewerPolygonsCid = { newCid: null, oldColor: null };
+          this.$store.state.map2DViewerPolygonsCid = {
+            newCid: null,
+            oldColor: null,
+          };
         }
 
         let geojsonData = geometry;
@@ -849,7 +932,7 @@ export default {
               镇域名称: geoProperties["镇域名称"] || "--",
               "面积(平方米)": geoProperties["面积"] || "--",
               图层构成: geoProperties["图层构成"] || "--",
-              性质: geoProperties["性质"] || "--"
+              性质: geoProperties["性质"] || "--",
             };
             this.defaultStatus = defaultStatus;
 
@@ -859,9 +942,17 @@ export default {
               this.currentSourceType = sourceType;
               this.currentModelId = modelId;
               this.currentColumnId = columnId;
-              let domItem = this.createAuditDiv(cid, geojsonData, sourceType, modelId, columnId);
+              let domItem = this.createAuditDiv(
+                cid,
+                geojsonData,
+                sourceType,
+                modelId,
+                columnId
+              );
               this.auditPopupShow = true;
-              this.popup = L.popup({ maxWidth: 700, maxHeight: 600 }).setLatLng(e.latlng).setContent(domItem);
+              this.popup = L.popup({ maxWidth: 700, maxHeight: 600 })
+                .setLatLng(e.latlng)
+                .setContent(domItem);
               this.auditPopupShow = false;
               this.popup.openOn(map2DViewer.map);
             });
@@ -871,13 +962,15 @@ export default {
               镇域名称: geoProperties["镇域名称"] || "--",
               "面积(平方米)": geoProperties["面积"] || "--",
               土地类型: geoProperties["土地类型"] || "--",
-              图斑编号: geoProperties["图斑编号"] || "--"
+              图斑编号: geoProperties["图斑编号"] || "--",
             };
 
             this.$refs.normalRef.$nextTick(() => {
               let domItem = this.createNormalDiv(cid, geojsonData, sourceType);
               this.normalAttrPopupShow = true;
-              this.normalPopup = L.popup({ maxWidth: 700, maxHeight: 600 }).setLatLng(e.latlng).setContent(domItem);
+              this.normalPopup = L.popup({ maxWidth: 700, maxHeight: 600 })
+                .setLatLng(e.latlng)
+                .setContent(domItem);
               this.normalAttrPopupShow = false;
               this.normalPopup.openOn(map2DViewer.map);
             });
@@ -898,7 +991,7 @@ export default {
     },
     //综合分析 - 标记疑点 - 删除面
     deletePolygonLayer(layer) {
-      map2DViewer.polygons[layer].forEach(polygon => {
+      map2DViewer.polygons[layer].forEach((polygon) => {
         map2DViewer.map.removeLayer(polygon);
       });
     },
@@ -906,7 +999,7 @@ export default {
     drawPoints(data) {
       if (!map2DViewer.myLabels[`label_${data.id}`]) {
         let point = L.marker(data.coord, {
-          opacity: 1
+          opacity: 1,
         }).addTo(map2DViewer.groups["我的标记图层组"]);
         map2DViewer.myLabels[`label_${data.id}`] = point;
       }
@@ -919,7 +1012,7 @@ export default {
           weight: 3,
           fillOpacity: color,
           opacity: 1,
-          fillOpacity: 0.4
+          fillOpacity: 0.4,
         }).addTo(map2DViewer.groups["我的标记图层组"]);
         // zoom the map to the polyline
         map2DViewer.myLabels[`label_${data.id}`] = polyline;
@@ -933,7 +1026,7 @@ export default {
           weight: 3,
           fillOpacity: color,
           opacity: 1,
-          fillOpacity: 0.4
+          fillOpacity: 0.4,
         }).addTo(map2DViewer.groups["我的标记图层组"]);
 
         map2DViewer.myLabels[`label_${data.id}`] = polygon;
@@ -955,7 +1048,7 @@ export default {
             fillOpacity: color,
             opacity: 1,
             fillOpacity: 0.4,
-            radius: Number(distance)
+            radius: Number(distance),
           }).addTo(map2DViewer.groups["我的标记图层组"]);
           map2DViewer.myLabels[`label_${data.id}`] = circle;
         }
@@ -986,8 +1079,8 @@ export default {
       if (geometry) {
         geometry.removeFrom(map2DViewer.map);
       }
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="less" scoped>

src/components/popup/LabelCasePopup.vue

@@ -4,7 +4,7 @@
       <div class="header">
         <div class="header-title">名称 :</div>
         <div class="header-input">
-          <input type="text" v-model="nameInput"/>
+          <input type="text" v-model="nameInput" />
         </div>
       </div>
       <div class="top">
@@ -15,6 +15,16 @@
           <option value="水资源">水资源</option>
         </select>
       </div>
+      <div class="area">
+        面积 ：&nbsp;&nbsp;
+        <span v-if="targetArea === 0 || targetArea === ''">0</span>
+        <span v-else>{{ targetArea }}</span>
+      </div>
+      <div class="distance">
+        距离：&nbsp;&nbsp;
+        <span v-if="targetDistance === 0 || !targetDistance">0</span>
+        <span v-else>{{ parseFloat(targetDistance).toFixed(2) }}&nbsp;公里</span>
+      </div>
       <div class="center">
         <div class="center-title">描述 :</div>
         <div class="center-text">
@@ -41,6 +51,7 @@ import MenuCard from "@/components/layout/MenuCard.vue";
 export default {
   name: "LabelCasePopup",
   components: { MenuCard },
+  props: ["targetArea", "targetDistance"],
   data() {
     return {
       nameInput: "",
@@ -110,7 +121,7 @@ export default {
       }
     }
     .top {
-      height: 15%;
+      height: 13%;
       width: 100%;
       display: flex;
       align-items: center;
@@ -140,17 +151,23 @@ export default {
         }
       }
     }
+    .area {
+      height: 10%;
+      width: 100%;
+      display: flex;
+      align-items: center;
+    }
     .center {
-      height: 50%;
+      height: 40%;
       width: 100%;
       &-title {
         width: 100%;
-        height: 40px;
-        line-height: 40px;
+        height: 30px;
+        line-height: 30px;
       }
       &-text {
         width: 100%;
-        height: calc(95% - 50px);
+        height: calc(95% - 30px);
         & textarea {
           width: 100%;
           height: 100%;
@@ -160,13 +177,13 @@ export default {
     .footer {
       margin: 0 auto;
       width: 50%;
-      height: 20%;
+      height: 13%;
       display: flex;
       align-items: center;
       justify-content: space-around;
       input {
-        width: 60px;
-        height: 30px;
+        width: 50px;
+        height: 25px;
         border-radius: 3px;
         border: none;
         cursor: pointer;

src/utils/publicFunction.js

@@ -97,13 +97,19 @@ const getRGBColor = (rootNumber, colorsNumber) => {
   rgbColor.forEach((item, index) => {
     if (index === 0) {
       rgbColorStr +=
-        _rootNumber + item + 
-        Math.round((Math.random() * (255 - _rootNumber - item)) / _colorsNumber) *
+        _rootNumber +
+        item +
+        Math.round(
+          (Math.random() * (255 - _rootNumber - item)) / _colorsNumber
+        ) *
           _colorsNumber;
     } else {
       let rgbColor =
-        _rootNumber + item + 
-        Math.round((Math.random() * (255 - _rootNumber - item)) / _colorsNumber) *
+        _rootNumber +
+        item +
+        Math.round(
+          (Math.random() * (255 - _rootNumber - item)) / _colorsNumber
+        ) *
           _colorsNumber;
       rgbColorStr += "," + rgbColor;
     }
@@ -126,10 +132,10 @@ const getRGBColor = (rootNumber, colorsNumber) => {
  *
  * 类型: 0 点；1 线；2 面；3 矩形；4 圆形；5 其他；
  */
-const generateGeoJSON = (title, desc, featureType, coords, geoName) => {
+const generateGeoJSON = (options) => {
   let dataType = "LineString";
   let propertiesType = "面";
-  switch (featureType) {
+  switch (options.geoType) {
     case 0:
       dataType = "Point";
       propertiesType = "点";
@@ -149,14 +155,16 @@ const generateGeoJSON = (title, desc, featureType, coords, geoName) => {
   let data = {
     type: "Feature",
     properties: {
-      title: title || "",
-      desc: desc || "",
+      title: options.title || "",
+      desc: options.desc || "",
       featureType: propertiesType,
-      featureTypeIndex: featureType,
-      name: geoName,
+      featureTypeIndex: options.geoType,
+      name: options.geoName || "",
+      area: options.area || "",
+      distance:options.distance || ""
     },
     geometry: {
-      coordinates: coords,
+      coordinates: options.coordinates,
       // coordinates: [[
       //   [114.1199232448792, 35.33694447387694],
       //   [113.75754748638985, 31.716871012257627],
@@ -240,28 +248,28 @@ let group = (arr, field) => {
 /**
  * 多维数组偏移调整
  */
-let latLngsCorrection = (latlngsAry)=>{
-   // 深拷贝
-   var tempLatlngsAry = JSON.parse(JSON.stringify(latlngsAry));
-   if (typeof tempLatlngsAry[0] === "number") {
-     if (tempLatlngsAry.length < 3 && tempLatlngsAry.length > 0) {
+let latLngsCorrection = (latlngsAry) => {
+  // 深拷贝
+  var tempLatlngsAry = JSON.parse(JSON.stringify(latlngsAry));
+  if (typeof tempLatlngsAry[0] === "number") {
+    if (tempLatlngsAry.length < 3 && tempLatlngsAry.length > 0) {
       // systemConfig.lonCorrectParams -- 经度偏移校正值
-      tempLatlngsAry[0]-= systemConfig.lonCorrectParams
-      tempLatlngsAry[1]-=systemConfig.latCorrectParams
-       return tempLatlngsAry;
-     }
-     if (tempLatlngsAry.length === 3) {
-      tempLatlngsAry[0]-= systemConfig.lonCorrectParams
-      tempLatlngsAry[1]-=systemConfig.latCorrectParams
-       return tempLatlngsAry;
-     }
-   } else {
-     for (var i = 0, l = tempLatlngsAry.length; i < l; i++) {
-       tempLatlngsAry[i] = latLngsCorrection(tempLatlngsAry[i]);
-     }
-   }
-   return tempLatlngsAry;
-}
+      tempLatlngsAry[0] -= systemConfig.lonCorrectParams;
+      tempLatlngsAry[1] -= systemConfig.latCorrectParams;
+      return tempLatlngsAry;
+    }
+    if (tempLatlngsAry.length === 3) {
+      tempLatlngsAry[0] -= systemConfig.lonCorrectParams;
+      tempLatlngsAry[1] -= systemConfig.latCorrectParams;
+      return tempLatlngsAry;
+    }
+  } else {
+    for (var i = 0, l = tempLatlngsAry.length; i < l; i++) {
+      tempLatlngsAry[i] = latLngsCorrection(tempLatlngsAry[i]);
+    }
+  }
+  return tempLatlngsAry;
+};
 
 /**
  * 多维数组转置