添加标记弹窗显示经纬度信息

src/components/map/MapHolder.vue

@@ -1,10 +1,31 @@
 <template>
-  <div id="map2DViewer" :class="$ifMenu('1', '') || $ifMenu('2', '') ? 'scaleClass' : 'unScaleClass'">
+  <div
+    id="map2DViewer"
+    :class="
+      $ifMenu('1', '') || $ifMenu('2', '') ? 'scaleClass' : 'unScaleClass'
+    "
+  >
     <!-- 特殊地图属性弹窗 -- 有审计功能 -->
-    <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" :targetArea="targetArea" :targetDistance="targetDistance" />
+    <NormalAttrPopup
+      v-show="normalAttrPopupShow"
+      :tableObj="tableObj"
+      ref="normalRef"
+    />
+    <LabelCasePopup
+      v-show="labelDetailsPopupShow"
+      ref="labelRef"
+      :targetArea="targetArea"
+      :targetDistance="targetDistance"
+      :targetLat="targetLat"
+      :targetLon="targetLon"
+    />
   </div>
 </template>
 <script>
@@ -19,7 +40,7 @@ export default {
   components: {
     CaseAuditPopup,
     NormalAttrPopup,
-    LabelCasePopup
+    LabelCasePopup,
   },
   data() {
     return {
@@ -48,17 +69,19 @@ export default {
         镇域名称: "--",
         "面积(平方米)": "--",
         土地类型: "--",
-        图斑编号: "--"
+        图斑编号: "--",
       },
       auditRefTableObj: {
         镇域名称: "--",
         "面积(平方米)": "--",
         图层构成: "--",
-        性质: "--"
+        性质: "--",
       },
       targetArea: 0,
       targetDistance: 0,
-      defaultStatus: "未标记"
+      targetLat: 0,
+      targetLon: 0,
+      defaultStatus: "未标记",
     };
   },
   created() {},
@@ -91,7 +114,7 @@ export default {
       deleteGroupFromMap: this.deleteGroupFromMap,
       drawGeometry: this.drawGeometry,
       deleteGeometry: this.deleteGeometry,
-      addTiledMapLayer: this.addTiledMapLayer
+      addTiledMapLayer: this.addTiledMapLayer,
     });
   },
   beforeDestroyed() {
@@ -112,7 +135,7 @@ export default {
     // 监听当前菜单
     getCurrentMenu() {
       return this.$store.state.navSelect;
-    }
+    },
   },
   watch: {
     getLabelCaseBtnStatus(val) {
@@ -153,9 +176,9 @@ export default {
         this.$nextTick(() => {
           this.getJSonData();
         });
-      }
+      },
       // immediate: true
-    }
+    },
   },
   methods: {
     // 测试宝石蓝底图
@@ -166,7 +189,7 @@ export default {
         minZoom: 0,
         minNativeZoom: 3,
         maxNativeZoom: 7,
-        maxZoom: 14
+        maxZoom: 14,
       });
       return layer;
     },
@@ -178,7 +201,7 @@ export default {
         minZoom: 0,
         minNativeZoom: 0,
         maxNativeZoom: 7,
-        maxZoom: 14
+        maxZoom: 14,
       });
       return layer;
     },
@@ -188,7 +211,7 @@ export default {
         // opacity: 0.8,
         f: "json",
         format: "png8",
-        transparent: true
+        transparent: true,
         // tileSize: 512,
         // url: url,
         // minZoom: 0,
@@ -206,7 +229,7 @@ export default {
     stopLabelCase() {
       if (map2DViewer.measureTool) {
         map2DViewer.setDrawTool({
-          action: "remove"
+          action: "remove",
         });
       }
     },
@@ -237,13 +260,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);
                 });
@@ -256,7 +279,7 @@ export default {
               $(`#${str}_id a`).eq(0).remove();
               $(`#${str}_id a`)
                 .eq(0)
-                .click(e => {
+                .click((e) => {
                   // 触发综合分析右侧面板点击事件
                   this.$bus.$emit("viewDetailsPopup", geojsonData);
                 });
@@ -304,11 +327,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(
+                    "非疑点"
+                  );
               }
             }
           }
@@ -317,13 +346,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);
@@ -331,7 +360,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();
@@ -365,7 +394,7 @@ export default {
         div.innerHTML = this.currentLabelHtml;
         $(() => {
           $(`#${str}_id`).css("height", "100%");
-          $(`#${str}_id input`).click(e => {
+          $(`#${str}_id input`).click((e) => {
             switch (e.target.defaultValue) {
               case "取消":
                 this.cancelBtnEvent();
@@ -386,12 +415,12 @@ export default {
       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,
         });
       }
       // 修改疑点时必须要写id
@@ -402,32 +431,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();
@@ -462,7 +501,7 @@ export default {
             coordinates: coordinates,
             geoName: geoName,
             area: area,
-            distance: distance
+            distance: distance,
           };
           let geometry = publicFun.generateGeoJSON(options);
           let params = new FormData();
@@ -472,11 +511,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);
@@ -486,33 +525,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();
             }
@@ -528,12 +570,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);
@@ -571,7 +619,7 @@ export default {
     initDraw() {
       if (!map2DViewer.measureTool) {
         // 引入疑点标记绘制方法
-        map2DViewer.drawToolFire = data => {
+        map2DViewer.drawToolFire = (data) => {
           // 纬经度
           if (data && data.points.length >= 1) {
             let geoType = null;
@@ -592,16 +640,26 @@ export default {
             }
 
             let coord = data.points[data.points.length - 1];
-
             if (coord && coord.length >= 2) {
               let newCoord = { lat: coord[0], lng: coord[1] };
               this.targetArea = data.area;
               this.targetDistance = data.distance;
+              this.targetLat = coord[0];
+              this.targetLon = coord[1];
               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))
+                  .setContent(
+                    this.createLabelDiv(
+                      "label",
+                      coord,
+                      data,
+                      geoType,
+                      data.area,
+                      data.distance
+                    )
+                  )
                   .openOn(map2DViewer.map);
                 this.labelDetailsPopupShow = false;
               });
@@ -616,7 +674,7 @@ export default {
           font_size: "14px",
           closeButton: true,
           iconUrl: "../../static/plugins/draw-plugin/images/marker-icon.png",
-          map: map2DViewer.map
+          map: map2DViewer.map,
         });
       }
     },
@@ -629,7 +687,7 @@ export default {
         {
           resolutions: systemConfig.imageryLayer.resolutions,
           origin: [-66000, 75000],
-          bounds: L.bounds([-65000, -76000], [75000, 72000])
+          bounds: L.bounds([-65000, -76000], [75000, 72000]),
         }
       );
 
@@ -639,13 +697,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
+      );
       // let layer = this.addDynamicLayer(systemConfig.blueBlackMap.url).addTo(
       //   map2DViewer.map
       // );
@@ -657,26 +717,41 @@ export default {
       // let imageryLayer = this.addDynamicLayer(systemConfig.imageryLayer.url);
       // map2DViewer.layers["imagery"] = imageryLayer;
 
-      map2DViewer.map.on("click", e => {
-        if (!this.polygonOnClick && this.$store.state.map2DViewerPolygonsCid.newCid) {
-          if (map2DViewer.myLabels[`label_${this.$store.state.map2DViewerPolygonsCid.newCid}`]) {
-            map2DViewer.myLabels[`label_${this.$store.state.map2DViewerPolygonsCid.newCid}`].setStyle({
+      map2DViewer.map.on("click", (e) => {
+        if (
+          !this.polygonOnClick &&
+          this.$store.state.map2DViewerPolygonsCid.newCid
+        ) {
+          if (
+            map2DViewer.myLabels[
+              `label_${this.$store.state.map2DViewerPolygonsCid.newCid}`
+            ]
+          ) {
+            map2DViewer.myLabels[
+              `label_${this.$store.state.map2DViewerPolygonsCid.newCid}`
+            ].setStyle({
               color: this.$store.state.map2DViewerPolygonsCid.oldColor,
-              fillOpacity: 0
+              fillOpacity: 0,
             });
             this.$store.state.map2DViewerPolygonsCid = {
               newCid: null,
-              oldColor: null
+              oldColor: null,
             };
           }
-          if (map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid.newCid]) {
-            map2DViewer.polygons[this.$store.state.map2DViewerPolygonsCid.newCid].setStyle({
+          if (
+            map2DViewer.polygons[
+              this.$store.state.map2DViewerPolygonsCid.newCid
+            ]
+          ) {
+            map2DViewer.polygons[
+              this.$store.state.map2DViewerPolygonsCid.newCid
+            ].setStyle({
               color: this.$store.state.map2DViewerPolygonsCid.oldColor,
-              fillOpacity: 0
+              fillOpacity: 0,
             });
             this.$store.state.map2DViewerPolygonsCid = {
               newCid: null,
-              oldColor: null
+              oldColor: null,
             };
           }
         }
@@ -690,14 +765,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 (
@@ -740,7 +817,10 @@ export default {
           this.getJSonDataToStreet("", "");
           // 切换到首页时需定位到当前图层
           if (this.$store.state.homeSpecialTown === "全部") {
-            this.setView(townLocationMap.get(this.$store.state.homeSpecialTown), 1);
+            this.setView(
+              townLocationMap.get(this.$store.state.homeSpecialTown),
+              1
+            );
             // console.log("切换到首页");
           } else {
             let polygon = townPolygonMap.get(this.$store.state.homeSpecialTown);
@@ -750,18 +830,29 @@ export default {
           this.getJSonDataToStreet("", "");
           // 切换到镇域专题是时均往左偏移一些
           if (this.$store.state.homeSpecialTown === "全部") {
-            let locationArr = townLocationMap.get(this.$store.state.homeSpecialTown);
+            let locationArr = townLocationMap.get(
+              this.$store.state.homeSpecialTown
+            );
             this.setView([locationArr[0], locationArr[1] + 0.35], 1);
             console.log("执行此步");
           } else {
-            let locationArr = townLocationMap.get(this.$store.state.homeSpecialTown);
+            let locationArr = townLocationMap.get(
+              this.$store.state.homeSpecialTown
+            );
             this.setView([locationArr[0], locationArr[1]], 5);
             // let polygon = townPolygonMap.get(this.$store.state.homeSpecialTown);
             // map2DViewer.map.fitBounds(polygon.getBounds());
           }
-        } else if (this.$ifMenu("2", "1") || this.$ifMenu("2", "2") || this.$ifMenu("2", "3") || this.$ifMenu("2", "4")) {
+        } else if (
+          this.$ifMenu("2", "1") ||
+          this.$ifMenu("2", "2") ||
+          this.$ifMenu("2", "3") ||
+          this.$ifMenu("2", "4")
+        ) {
           this.getJSonDataToStreet("", "");
-          let locationArr1 = townLocationMap.get(this.$store.state.homeSpecialTown);
+          let locationArr1 = townLocationMap.get(
+            this.$store.state.homeSpecialTown
+          );
           // 切换到疑点筛查时均往右偏移一些
           if (this.$store.state.homeSpecialTown === "全部") {
             this.setView([locationArr1[0], locationArr1[1] - 0.16], 1);
@@ -809,7 +900,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;
@@ -822,27 +913,27 @@ export default {
           radius: 10,
           weight: 1,
           fillOpacity: 0,
-          color: "#e6d273"
+          color: "#e6d273",
         });
 
         wmarker.bindLabel(feature.properties.NAME, {
           noHide: true,
           clickable: true,
           offset: [-25, 20],
-          className: "marker-text-style"
+          className: "marker-text-style",
         });
         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"]);
       }
     },
@@ -881,20 +972,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;
       // 预设模型与所有图层层级不同
@@ -905,10 +1008,10 @@ export default {
         weight: 3,
         fillColor: color,
         opacity: 1,
-        fillOpacity: 0
+        fillOpacity: 0,
       }).addTo(map2DViewer.analysisGroups[uniqueId]);
 
-      polygon.on("click", e => {
+      polygon.on("click", (e) => {
         this.polygonOnClick = true;
         // 鼠标点击图版高亮提示逻辑
         // 首先恢复上一个图版
@@ -916,9 +1019,11 @@ export default {
           this.$store.state.map2DViewerPolygonsCid.newCid &&
           map2DViewer.polygons[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,
           });
         }
         // 判断是否是重复点击，不是的话高亮，是的话不操作。
@@ -927,17 +1032,17 @@ export default {
           if (cid != this.$store.state.map2DViewerPolygonsCid.newCid) {
             this.$store.state.map2DViewerPolygonsCid = {
               newCid: cid,
-              oldColor: color
+              oldColor: color,
             };
             polygon.setStyle({
               color: "red",
               fillColor: "red",
-              fillOpacity: 0.35
+              fillOpacity: 0.35,
             });
           } else {
             this.$store.state.map2DViewerPolygonsCid = {
               newCid: null,
-              oldColor: null
+              oldColor: null,
             };
           }
         }, 200);
@@ -951,7 +1056,7 @@ export default {
               镇域名称: geoProperties["镇域名称"] || "--",
               "面积(平方米)": geoProperties["面积"] || "--",
               图层构成: geoProperties["图层构成"] || "--",
-              性质: geoProperties["性质"] || "--"
+              性质: geoProperties["性质"] || "--",
             };
             this.defaultStatus = defaultStatus;
 
@@ -961,9 +1066,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);
             });
@@ -973,13 +1086,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);
             });
@@ -1000,7 +1115,7 @@ export default {
     },
     //综合分析 - 标记疑点 - 删除面
     deletePolygonLayer(layer) {
-      map2DViewer.polygons[layer].forEach(polygon => {
+      map2DViewer.polygons[layer].forEach((polygon) => {
         map2DViewer.map.removeLayer(polygon);
       });
     },
@@ -1008,7 +1123,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;
@@ -1022,9 +1137,9 @@ export default {
           weight: 3,
           fillOpacity: color,
           opacity: 1,
-          fillOpacity: 0
+          fillOpacity: 0,
         }).addTo(map2DViewer.groups["我的标记图层组"]);
-        polyline.on("click", e => {
+        polyline.on("click", (e) => {
           this.pointOnClick(polyline, data.id, color);
         });
         // zoom the map to the polyline
@@ -1035,10 +1150,13 @@ export default {
       this.polygonOnClick = true;
       // 鼠标点击图版高亮提示逻辑
       // 首先恢复上一个图版
-      if (this.$store.state.map2DViewerPolygonsCid.newCid && map2DViewer.myLabels[`label_${cid}`]) {
+      if (
+        this.$store.state.map2DViewerPolygonsCid.newCid &&
+        map2DViewer.myLabels[`label_${cid}`]
+      ) {
         map2DViewer.myLabels[`label_${cid}`].setStyle({
           color: this.$store.state.map2DViewerPolygonsCid.oldColor,
-          fillOpacity: 0
+          fillOpacity: 0,
         });
       }
       // 判断是否是重复点击，不是的话高亮，是的话不操作。
@@ -1047,17 +1165,17 @@ export default {
         if (cid != this.$store.state.map2DViewerPolygonsCid.newCid) {
           this.$store.state.map2DViewerPolygonsCid = {
             newCid: cid,
-            oldColor: color
+            oldColor: color,
           };
           polygon.setStyle({
             color: "red",
             fillColor: "red",
-            fillOpacity: 0.35
+            fillOpacity: 0.35,
           });
         } else {
           this.$store.state.map2DViewerPolygonsCid = {
             newCid: null,
-            oldColor: null
+            oldColor: null,
           };
         }
       }, 200);
@@ -1070,9 +1188,9 @@ export default {
           weight: 3,
           fillOpacity: color,
           opacity: 1,
-          fillOpacity: 0
+          fillOpacity: 0,
         }).addTo(map2DViewer.groups["我的标记图层组"]);
-        polygon.on("click", e => {
+        polygon.on("click", (e) => {
           this.pointOnClick(polygon, data.id, color);
         });
         map2DViewer.myLabels[`label_${data.id}`] = polygon;
@@ -1094,9 +1212,9 @@ export default {
             fillOpacity: color,
             opacity: 1,
             fillOpacity: 0,
-            radius: Number(distance)
+            radius: Number(distance),
           }).addTo(map2DViewer.groups["我的标记图层组"]);
-          circle.on("click", e => {
+          circle.on("click", (e) => {
             this.pointOnClick(circle, data.id, color);
           });
           map2DViewer.myLabels[`label_${data.id}`] = circle;
@@ -1128,8 +1246,8 @@ export default {
       if (geometry) {
         geometry.removeFrom(map2DViewer.map);
       }
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="less" scoped>

src/components/popup/LabelCasePopup.vue

@@ -16,7 +16,11 @@
         </select>
       </div>
       <div class="area">
-        面积 ：&nbsp;&nbsp;
+        坐标: &nbsp;&nbsp;
+        <span>{{ targetLat }},{{ targetLon }}</span>
+      </div>
+      <div class="area">
+        面积: &nbsp;&nbsp;
         <span v-if="targetArea === 0 || targetArea === ''">0</span>
         <span v-else>{{ targetArea }}</span>
       </div>
@@ -28,7 +32,10 @@
       <div class="center">
         <div class="center-title">描述 :</div>
         <div class="center-text">
-          <textarea placeholder="请输入详细信息" v-model="textContent"></textarea>
+          <textarea
+            placeholder="请输入详细信息"
+            v-model="textContent"
+          ></textarea>
         </div>
       </div>
       <div class="footer">
@@ -48,7 +55,7 @@ import MenuCard from "@/components/layout/MenuCard.vue";
 export default {
   name: "LabelCasePopup",
   components: { MenuCard },
-  props: ["targetArea", "targetDistance"],
+  props: ["targetArea", "targetDistance", "targetLat", "targetLon"],
   data() {
     return {
       nameInput: "",
@@ -56,12 +63,12 @@ export default {
         type: "chart",
         title: "添加标记",
         boxWidth: "380",
-        boxHeight: "300"
+        boxHeight: "300",
       },
       selectVal: "土地资源",
       textContent: "",
       id: null,
-      geojson: ""
+      geojson: "",
     };
   },
   methods: {
@@ -70,8 +77,8 @@ export default {
     },
     saveEvent() {
       this.$emit("save");
-    }
-  }
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -155,7 +162,7 @@ export default {
       align-items: center;
     }
     .center {
-      height: 40%;
+      height: 30%;
       width: 100%;
       &-title {
         width: 100%;
@@ -190,7 +197,11 @@ export default {
         background: rgba(129, 140, 164, 1);
       }
       input:nth-child(2) {
-        background-image: linear-gradient(to top, rgba(79, 172, 254, 1), rgba(0, 242, 254, 1));
+        background-image: linear-gradient(
+          to top,
+          rgba(79, 172, 254, 1),
+          rgba(0, 242, 254, 1)
+        );
       }
     }
   }

vue.config.js

@@ -67,54 +67,54 @@ module.exports = {
       //   changeOrigin: true, // 允许跨域
       // },
       // 小点声
-      // "/oauth": {
-      //   target: "http://117.131.26.69:10081",
-      //   changeOrigin: true, // 允许跨域
-      //   pathRewrite: {
-      //     "^/oauth": "/proxy_oauth",
-      //   },
-      // },
-      // "/dms": {
-      //   target: "http://117.131.26.69:10081",
-      //   changeOrigin: true, // 允许跨域
-      //   pathRewrite: {
-      //     "^/dms": "/proxy_dms",
-      //   },
-      // },
-      // "/conllection": {
-      //   target: "http://117.131.26.69:10081",
-      //   changeOrigin: true, // 允许跨域
-      //   pathRewrite: {
-      //     "^/conllection": "/proxy_conllection",
-      //   },
-      // },
-      "/audit": {
+      "/oauth": {
         target: "http://117.131.26.69:10081",
         changeOrigin: true, // 允许跨域
         pathRewrite: {
-          "^/audit": "/proxy_audit",
+          "^/oauth": "/proxy_oauth",
         },
       },
-      "/oauth": {
-        target: "http://10.220.106.75:10011",
-        changeOrigin: true, // 允许跨域
-      },
       "/dms": {
-        target: "http://10.220.106.75:10012",
+        target: "http://117.131.26.69:10081",
         changeOrigin: true, // 允许跨域
+        pathRewrite: {
+          "^/dms": "/proxy_dms",
+        },
       },
       "/conllection": {
-        target: "http://10.220.106.75:10013",
+        target: "http://117.131.26.69:10081",
         changeOrigin: true, // 允许跨域
+        pathRewrite: {
+          "^/conllection": "/proxy_conllection",
+        },
       },
       "/audit": {
-        target: "http://10.220.106.75:10014",
-        changeOrigin: true, // 允许跨域
-      },
-      "/operation": {
-        target: "http://10.220.106.75:10021",
+        target: "http://117.131.26.69:10081",
         changeOrigin: true, // 允许跨域
+        pathRewrite: {
+          "^/audit": "/proxy_audit",
+        },
       },
+      // "/oauth": {
+      //   target: "http://10.220.106.75:10011",
+      //   changeOrigin: true, // 允许跨域
+      // },
+      // "/dms": {
+      //   target: "http://10.220.106.75:10012",
+      //   changeOrigin: true, // 允许跨域
+      // },
+      // "/conllection": {
+      //   target: "http://10.220.106.75:10013",
+      //   changeOrigin: true, // 允许跨域
+      // },
+      // "/audit": {
+      //   target: "http://10.220.106.75:10014",
+      //   changeOrigin: true, // 允许跨域
+      // },
+      // "/operation": {
+      //   target: "http://10.220.106.75:10021",
+      //   changeOrigin: true, // 允许跨域
+      // },
     },
   },
 };