1

src/view/home.vue

@@ -58,7 +58,7 @@ window.addEventListener("resize", function () {
 
 <style scoped lang="scss">
 .content {
-  background: url("../assets/bgImg.png") no-repeat 100% 100%;
+  background: url("../assets/bgImg.png") no-repeat 0/100% 100%;
   background-color: #254574;
   // background-image: url("../assets/bgImg.png");
   // background-size: 100% 100%;

src/view/sy_map.vue

@@ -1056,7 +1056,7 @@ const pagination = reactive({
 //--------定义方法----------------------------------------
 //地图初始化
 const initMap = () => {
-  map = new BMapGL.Map("map", { minZoom: 8, maxZoom: 18 });
+  map = new BMapGL.Map("map", { minZoom: 8, maxZoom: 19 });
   map.setMapType(BMAP_SATELLITE_MAP);
   map.enableScrollWheelZoom(true);
   goMapCenter([119.178783, 29.034583], 11);
@@ -3231,18 +3231,21 @@ const createCustomOverlay = (polygon, indexx) => {
     content.style.display = "flex";
     content.style.flexDirection = "column";
     content.style.alignItems = "center";
+    content.style.justifyContent = "end";
     content.style.height = "40px";
-    content.style.width = "40px";
+    content.style.width = "140px";
     content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
 
     var div = document.createElement("div");
     div.style.color = "#ddd";
     div.style.padding = `${polygon.padding}`;
-    div.style.whiteSpace = "nowrap";
+    // div.style.whiteSpace = "nowrap";
+    div.style.maxWidth = "100px";
     div.style.MozUserSelect = "none";
     div.style.fontSize = "12px";
     div.style.borderRadius = "10px";
     div.style.display = "flex";
+    div.style.flexWrap = "wrap";
     div.style.justifyContent = "center";
     div.style.alignItems = "center";
     div.style.background = `url(${polygon.img}) no-repeat 0/100% 100%`;
@@ -3254,6 +3257,7 @@ const createCustomOverlay = (polygon, indexx) => {
     title.style.fontSize = "14px";
     title.style.fontWeight = "700";
     title.style.marginLeft = "0px";
+    title.style.display = "flex";
     title.style.color = `${polygon.textColor}`;
     div.appendChild(title);
     title.appendChild(document.createTextNode(this.properties.title));
@@ -3281,6 +3285,7 @@ const createCustomOverlay = (polygon, indexx) => {
     // offsetY: 0,
     offsetX: 10,
     offsetY: -15,
+    zIndex: 10,
     properties: {
       title: polygon.name,
       imgSrc2: polygon.img2,
@@ -3321,7 +3326,6 @@ const addFwqCs = () => {
         fillColor: fillColor,
         fillOpacity: 0.6,
         name: item.name,
-        zIndex: 2,
       });
       map.addOverlay(fwq_dk.value[index]);
     }
@@ -3368,6 +3372,7 @@ const addFwqCsCenter = (polygon, indexx) => {
   }
   fwq_center.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
     point: new BMapGL.Point(...polygon.center),
+    zIndex: 1,
     opacity: 0.5,
     offsetX: 10,
     offsetY: -15,
@@ -3382,12 +3387,7 @@ const addFwqCsCenter = (polygon, indexx) => {
 //
 //服务点数据处理
 const updateFwqList = (data, townName, communityName) => {
-  // console.log(data, townName, communityName,'服务器数据');
   let updatedFwqList = [];
-  // jbfwqTotal.value.forEach((town) => {
-  //   if (town.name === townName) {
-  //     town.child.forEach((community, index) => {
-  //       if (community.name === communityName) {
   fwq_cslist.value.length = 0;
   fwq_jzdk.value.length = 0;
   fwq_centerList.value.length = 0;
@@ -3409,8 +3409,75 @@ const updateFwqList = (data, townName, communityName) => {
     });
   });
   console.log(77, fwq_centerList.value);
+  //把坐标相同的合并
+  // let toP = [];//存放坐标
+  // let toName = [];//存放名称
+  // data.forEach((item, index) => {
+  //   if (toP.length == 0) {
+  //     toP.push([item.jd, item.wd]);
+  //     toName.push(item.zyysmc);
+  //   } else {
+  //     let b = [item.jd, item.wd];
+  //     let indexS = toP.findIndex((subArray) => {
+  //       return subArray.every((element, index) => element === b[index]);
+  //     });
 
-  updatedFwqList = data.map((item) => ({
+  //     if (indexS !== -1) {
+  //       toName[indexS] = toName[indexS] + "," + item.zyysmc;
+  //     } else {
+  //       toP.push(b);
+  //       toName.push(item.zyysmc);
+  //     }
+  //   }aa
+  // });
+  // let totalA = [];
+  // toP.forEach((item, index) => {
+  //   totalA.push({
+  //     zyysmc: toName[index],
+  //     jd: item[0],
+  //     wd: item[1],
+  //   });
+  // });
+  //根据字数来修改参数
+  updatedFwqList = data.map((item) => {
+    if (item.zyysmc.length > 21) {
+      return {
+        x: 53,
+        y: 0,
+        img: fwqbg1,
+        img2: b2,
+        name: item.zyysmc,
+        point: [item.jd, item.wd],
+        padding: "4px 8px 24px",
+        textColor: "#fff",
+        bgColor: "#00b050",
+      };
+    } else if (item.zyysmc.length > 14) {
+      return {
+        x: 53,
+        y: 0,
+        img: fwqbg1,
+        img2: b2,
+        name: item.zyysmc,
+        point: [item.jd, item.wd],
+        padding: "4px 8px 18px",
+        textColor: "#fff",
+        bgColor: "#00b050",
+      };
+    } else if (item.zyysmc.length > 7) {
+      return {
+        x: 53,
+        y: 0,
+        img: fwqbg1,
+        img2: b2,
+        name: item.zyysmc,
+        point: [item.jd, item.wd],
+        padding: "4px 8px 13px",
+        textColor: "#fff",
+        bgColor: "#00b050",
+      };
+    } else if (item.zyysmc.length > 4) {
+      return {
         x: 53,
         y: 0,
         img: fwqbg1,
@@ -3420,7 +3487,21 @@ const updateFwqList = (data, townName, communityName) => {
         padding: "4px 8px 10px",
         textColor: "#fff",
         bgColor: "#00b050",
-  }));
+      };
+    } else {
+      return {
+        x: 30,
+        y: 0,
+        img: fwqbg1,
+        img2: b2,
+        name: item.zyysmc,
+        point: [item.jd, item.wd],
+        padding: "4px 8px 10px",
+        textColor: "#fff",
+        bgColor: "#00b050",
+      };
+    }
+  });
   // community.fwqList = updatedFwqList;
   //       }
   //     });