gx

src/view/sy_map.vue

@@ -240,6 +240,84 @@ const mapTownCount = reactive([
 const mapTownDataDK = reactive([]);
 //社区地块
 const xkzDk = reactive([]);
+//社区中心点
+const xkzCenter = reactive([
+  {
+    name: "溪口村",
+    center: [119.204344, 28.862394],
+    number: "50",
+  },
+  {
+    name: "扁石村",
+    center: [119.183549, 28.858],
+    number: "50",
+  },
+  {
+    name: "大垅村",
+    center: [119.170309, 28.862776],
+    number: "50",
+  },
+  {
+    name: "枫林村",
+    center: [119.205442, 28.862981],
+    number: "50",
+  },
+  {
+    name: "双港口村",
+    center: [119.211353, 28.869576],
+    number: "50",
+  },
+  {
+    name: "灵上村",
+    center: [119.177185, 28.874582],
+    number: "50",
+  },
+  {
+    name: "灵下村",
+    center: [119.175233, 28.878677],
+    number: "50",
+  },
+  {
+    name: "下徐村",
+    center: [119.177544, 28.882818],
+    number: "50",
+  },
+  {
+    name: "大沃口村",
+    center: [119.17661, 28.880171],
+    number: "50",
+  },
+  {
+    name: "寺下村",
+    center: [119.1718, 28.89816],
+    number: "50",
+  },
+  {
+    name: "大阳家村",
+    center: [119.176573, 28.898746],
+    number: "50",
+  },
+  {
+    name: "石角村",
+    center: [119.141602, 28.919005],
+    number: "50",
+  },
+  {
+    name: "红罗村",
+    center: [119.206318, 28.913218],
+    number: "50",
+  },
+  {
+    name: "冷水村",
+    center: [119.213226, 28.93395],
+    number: "50",
+  },
+  {
+    name: "新溪社区",
+    center: [119.184555, 28.853068],
+    number: "50",
+  },
+]);
 var map = null;
 const initMap = () => {
   map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
@@ -299,11 +377,9 @@ const addPolygonCounty = () => {
 };
 //添加街道名
 const addJd = () => {
- 
   mapTownCount.map((item) => {
     createCustomOverlayJd(item);
   });
- 
 };
 //添加街道名2含数量
 const addJd2 = () => {
@@ -354,7 +430,7 @@ const addPolygonCountyCs = () => {
     }
   });
 };
-// 创建地图上的街道名
+// 添加地图上的街道名
 const createCustomOverlayJd = (polygon) => {
   function createLabelDOM() {
     var content = document.createElement("div");
@@ -392,6 +468,7 @@ const createCustomOverlayJd = (polygon) => {
             jdCenter = item.center;
           }
         });
+        addCs();
         goMapCenter(jdCenter, 14);
       }
     };
@@ -408,7 +485,7 @@ const createCustomOverlayJd = (polygon) => {
   });
   map.addOverlay(customOverlay);
 };
-// 创建地图上的街道名+(人数,标签)
+// 添加地图上的街道名+(人数,标签)
 const createCustomOverlayJd2 = (polygon) => {
   function createLabelDOM() {
     var content = document.createElement("div");
@@ -454,6 +531,7 @@ const createCustomOverlayJd2 = (polygon) => {
             jdCenter = item.center;
           }
         });
+         addCs2();
         goMapCenter(jdCenter, 14);
       }
     };
@@ -471,6 +549,140 @@ const createCustomOverlayJd2 = (polygon) => {
   });
   map.addOverlay(customOverlay);
 };
+//创建村社
+const addCs = () => {
+  xkzCenter.map((item) => {
+    createCs(item);
+  });
+};
+//创建村社
+const addCs2 = () => {
+  xkzCenter.map((item) => {
+    createCs2(item);
+  });
+};
+//添加村社+(人数,标签)
+const createCs2 = (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.style.padding="10px"
+    div.style.backgroundColor = "red";
+    div.style.borderRadius = "20%";
+    div.style.transform = "translateY(50px)";
+    div.setAttribute("name", this.properties.title);
+
+    var title = document.createElement("div");
+    title.style.fontSize = "16px";
+    title.style.fontWeight = "600";
+    title.style.color = "#000000";
+    div.appendChild(title);
+    title.appendChild(document.createTextNode(this.properties.title));
+    content.appendChild(div);
+
+    var number = document.createElement("div");
+    number.style.fontSize = "16px";
+    number.style.fontWeight = "600";
+    number.style.color = "rgba(0, 255, 189, 1)";
+    div.appendChild(number);
+    number.appendChild(document.createTextNode(this.properties.number));
+    content.appendChild(div);
+    let img2 = document.createElement("img");
+    img2.style.width = "20px";
+    img2.style.height = "20px";
+    img2.src = this.properties.imgSrc2;
+
+    content.appendChild(div);
+    content.appendChild(img2);
+    // div.onclick = function () {
+    //   let jdCenter = [];
+    //   if (polygon.name == "溪口镇") {
+    //     title_choose.value = title_choose.value + `>${polygon.name}`;
+    //     console.log(title_choose.value);
+    //     loadCs();
+    //     addPolygonCountyCs();
+    //     mapTownCount.map((item) => {
+    //       if (item.name == "溪口镇") {
+    //         jdCenter = item.center;
+    //       }
+    //     });
+    //     goMapCenter(jdCenter, 14);
+    //   }
+    // };
+    return content;
+  }
+  var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
+    point: new BMapGL.Point(...polygon.center),
+    opacity: 0.5,
+    offsetY: 0,
+    properties: {
+      title: polygon.name,
+      number: polygon.number,
+      imgSrc2: dwd,
+      type: "customOverlay",
+    },
+  });
+  map.addOverlay(customOverlay);
+};
+//添加村社
+const createCs = (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 = "16px";
+    title.style.fontWeight = "600";
+    title.style.color = "#000000";
+    div.appendChild(title);
+    title.appendChild(document.createTextNode(this.properties.title));
+    content.appendChild(div);
+    let img2 = document.createElement("img");
+    img2.style.width = "20px";
+    img2.style.height = "20px";
+    img2.src = this.properties.imgSrc2;
+
+    content.appendChild(div);
+    content.appendChild(img2);
+    return content;
+  }
+  var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
+    point: new BMapGL.Point(...polygon.center),
+    opacity: 0.5,
+    offsetY: 0,
+    properties: {
+      title: polygon.name,
+      imgSrc2: dwd,
+      type: "customOverlay",
+    },
+  });
+  map.addOverlay(customOverlay);
+};
 //创建公共服务圈
 const addggfwq = () => {
   fwqList.value.map((item) => {
@@ -553,6 +765,7 @@ const createCustomOverlay = (polygon) => {
   // });
   map.addOverlay(customOverlay);
 };
+
 //地图中点
 const goMapCenter = (point, zoom) => {
   map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom);