Browse Source

2d地图添加名称,并且和其他的面区分

lidongyu 1 year ago
parent
commit
caaa430797

+ 1 - 1
data-ui/src/views/data/common/ISuperMapAreaMarker.vue

@@ -286,7 +286,7 @@ export default {
           for (let j = 0; j < selection[i].latLng.length; j+=2) {
             graphicsList.push({lng:selection[i].latLng[j],lat:selection[i].latLng[j+1]});
           }
-          this.$refs.areaSupermap.setGraphicsList(graphicsList, "#1a1919","123");
+          this.$refs.areaSupermap.setGraphicsList(graphicsList, "#1a1919",selection[i].name);
         }
         // this.$refs.areaSupermap.setGraphicsList([{lat:"124",lng:"42"},{lat:"24",lng:"142"},{lat:"11",lng:"42"},{lat:"2",lng:"1"},{lat:"124",lng:"42"}], "#1a1919");
         // this.$refs.areaSupermap.setGraphicsList([{lat:"122.552490234375",lng:"45.78276229037425"},{lat:"131.275634765625",lng:"45.716885087220255"},{lat:"127.96875",lng:"42.53282026811079"},{lat:"122.67333984375",lng:"43.19159229965069"}], "#1a1919");

+ 34 - 6
data-ui/src/views/data/common/supermap.vue

@@ -725,18 +725,46 @@
         _that.connectLayer = window.L.featureGroup().addTo(this.map);
         _that.connectLayer.addLayer(polyline);
       },
-      setGraphicsList: function (graphicsList, color) {//地图图形
+      // setGraphicsList: function (graphicsList, color) {//地图图形
+      //   const _that = this;
+      //   let points = [];
+      //   for (let i = 0; i < graphicsList.length; i++) {
+      //     points.push([graphicsList[i].lat, graphicsList[i].lng]);//创建点
+      //   }
+      //   let polygon = window.L.polygon(points, {color: color});
+      //   polygon.addTo(this.map);
+      //   _that.graphicsLayer = window.L.featureGroup().addTo(this.map);
+      //   _that.graphicsLayer.addLayer(polygon);
+      // },
+      setGraphicsList: function (graphicsList, color,name) {//地图图形
         const _that = this;
         let points = [];
+        let polygons = new Map(); // 使用 Map 记录 Polygon 和对应的 Popup
         for (let i = 0; i < graphicsList.length; i++) {
           points.push([graphicsList[i].lat, graphicsList[i].lng]);//创建点
         }
-        let polygon = window.L.polygon(points, {color: color});
-        polygon.addTo(this.map);
-        _that.graphicsLayer = window.L.featureGroup().addTo(this.map);
-        _that.graphicsLayer.addLayer(polygon);
-      },
+        if (name){
+          let polygon = window.L.polygon(points, {color: color}); // 创建 Polygon
+          let center = polygon.getBounds().getCenter();
+          let namePopup = window.L.popup().setLatLng([center.lat, center.lng])
+            .setContent(name); // 创建对应的 Popup
+          namePopup.addTo(this.map);
+          polygon.bindPopup(namePopup); // 将 Popup 绑定到 Polygon
+          polygon.addTo(this.map);
+          _that.graphicsLayer = window.L.featureGroup().addTo(this.map);
+          _that.graphicsLayer.addLayer(polygon);
+
+          polygons.set(polygon, namePopup); // 将 Polygon 和 Popup 记录在 Map 中
+          // 在需要移除时,可以通过 polygons.get(polygon).remove() 移除对应的 Popup
+        }else {
+            let polygon = window.L.polygon(points, {color: color});
+            polygon.addTo(this.map);
+            _that.graphicsLayer = window.L.featureGroup().addTo(this.map);
+            _that.graphicsLayer.addLayer(polygon);
+        }
 
+
+      },
       dropLocation: function (lat, lng) {//落点定位
         this.controlLevel(10)
         setTimeout(() => {