gx

src/view/sy_map.vue

@@ -98,6 +98,7 @@ import {
   watch,
 } from "vue";
 import mapTown from "@/assets/json/ly.json";
+import xkz from "@/assets/json/xkz.json";
 import j0 from "@/assets/images/map/j0.png";
 import j1 from "@/assets/images/map/j1.png";
 import j2 from "@/assets/images/map/j2.png";
@@ -113,6 +114,69 @@ import m1 from "@/assets/images/map/m1.png";
 import m2 from "@/assets/images/map/m2.png";
 import dwd from "@/assets/images/map/dwd.png";
 //地图设置
+const mapTownCount = reactive([
+  {
+    name: "龙洲街道",
+    center: [119.1573083, 29.0267445],
+  },
+  {
+    name: "东华街道",
+    center: [119.209592, 29.11824],
+  },
+  {
+    name: "小南海镇",
+    center: [119.169616, 29.05309],
+  },
+  {
+    name: "湖镇镇",
+    center: [119.2956892, 29.0686151],
+  },
+  {
+    name: "溪口镇",
+    center: [119.1859408, 28.8479474],
+  },
+  {
+    name: "詹家镇",
+    center: [119.1401732, 29.015175],
+  },
+  {
+    name: "塔石镇",
+    center: [119.1656669, 29.1373072],
+  },
+  {
+    name: "横山镇",
+    center: [119.2176111, 29.1803275],
+  },
+  {
+    name: "模环乡",
+    center: [119.237015, 29.240862],
+  },
+  {
+    name: "石佛乡",
+    center: [119.1192998, 29.1718674],
+  },
+  {
+    name: "沐尘畲族乡",
+    center: [119.1837169, 28.8314116],
+  },
+  {
+    name: "罗家乡",
+    center: [119.2453273, 28.9430851],
+  },
+  {
+    name: "庙下乡",
+    center: [119.1637175, 28.8389885],
+  },
+  {
+    name: "大街乡",
+    center: [119.2664362, 28.8432149],
+  },
+  {
+    name: "社阳乡",
+    center: [119.2957367, 28.9674754],
+  },
+]);
+
 //默认龙游县灰色地块
 const mapTownDataDK = reactive([]);
 var map = null;
@@ -162,7 +226,6 @@ const addPolygonCounty = () => {
         fillColor: fillColor,
         fillOpacity: 0.7,
         name: item.name,
-        flag: "v",
       });
       polygon.addEventListener("click", () => {
         console.log(1111111);
@@ -170,6 +233,50 @@ const addPolygonCounty = () => {
       map.addOverlay(polygon);
     }
   });
+  mapTownCount.map((item) => {
+    //相同乡镇名称，图标和名称只创建1次
+    createCustomOverlayJd(item);
+  });
+};
+// 添加地图上的街道名
+const createCustomOverlayJd = (polygon) => {
+  function createLabelDOM() {
+    var content = document.createElement("div");
+    content.style.display = "flex";
+    content.style.flexDirection = "column";
+    content.style.alignItems = "center";
+    content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
+
+    var div = document.createElement("div");
+    div.style.color = "#333";
+    div.style.whiteSpace = "nowrap";
+    div.style.MozUserSelect = "none";
+    div.style.display = "flex";
+    div.style.justifyContent = "center";
+    div.style.alignItems = "center";
+    div.style.cursor = "pointer";
+    div.setAttribute("name", this.properties.title);
+
+    var title = document.createElement("div");
+    title.style.fontSize = "20px";
+    title.style.fontWeight = "700";
+    title.style.color = "#000000";
+    div.appendChild(title);
+    title.appendChild(document.createTextNode(this.properties.title));
+    content.appendChild(div);
+
+    return content;
+  }
+  var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
+    point: new BMapGL.Point(...polygon.center),
+    opacity: 0.5,
+    offsetY: -10,
+    properties: {
+      title: polygon.name,
+      type: "customOverlay",
+    },
+  });
+  map.addOverlay(customOverlay);
 };
 // 添加地图上的图标
 const createCustomOverlay = (polygon) => {
@@ -235,6 +342,14 @@ const createCustomOverlay = (polygon) => {
 const goMapCenter = (point, zoom) => {
   map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom);
 };
+const removeAllPolygon = () => {
+  let allOverlay = map.getOverlays();
+  console.log("allOverlay", allOverlay);
+  for (let i = 0; i < allOverlay.length; i++) {
+      map.removeOverlay(allOverlay[i]);
+  }
+  addPolygonCounty();
+};
 //选项设置
 //选中
 const choose = ref({
@@ -248,6 +363,7 @@ const change = (id, name) => {
 };
 const changeFwq = (id, list, center) => {
   choose.value.fwq = id;
+  removeAllPolygon();
   fwqList.value = list;
   goMapCenter(center, 17);
   fwqList.value.map((item) => {