透明度调整

src/view/sy_map.vue

@@ -111,7 +111,7 @@
       <div class="right" style="width: 517px" v-show="!showEdit">
         <div class="jbggfwq">
           <div class="title">
-            <div class="title_name" >
+            <div class="title_name">
               <span> 基本公共服务圈</span>
             </div>
           </div>
@@ -477,6 +477,8 @@ const message = ref({});
 const jdm_arr = ref([]); //街道名
 const jdm_number_arr = ref([]); //街道名(+数量)
 const fwq_list_arr = ref([]); //基本公共服务圈
+const fwq_dk = ref([]); //基本公共服务圈村社地块
+const fwq_center = ref([]); //基本公共服务圈中心点
 const cs_qk_arr = ref([]); //社区彩色区块
 const cs_name_arr = ref([]); //社区名
 const cs_number_name_arr = ref([]); //社区名(+数量)
@@ -1246,13 +1248,15 @@ const moveDK = async () => {
     id: changeCsqkId.value,
     data: JSON.stringify(arrJWD),
   };
-  await http.post(`/api/ggfwyth/regionalDivision/editVillage`, sj).then((res) => {
+  await http
-    if (res.code == 200) {
+    .post(`/api/ggfwyth/regionalDivision/editVillage`, sj)
-      ElMessage.success({
+    .then((res) => {
-        message: "保存成功",
+      if (res.code == 200) {
-      });
+        ElMessage.success({
-    }
+          message: "保存成功",
-  });
+        });
+      }
+    });
   await getCssj();
   await loadCs(cfJd.value);
   cs_choose_arr.value.forEach((item, index) => {
@@ -2023,12 +2027,12 @@ const getDatasL = async (e, i) => {
         if (title_jd.value == "") {
         } else {
           if (cfCs.value) {
-              cs_dd_arr.value = [...xuanzhongCs.value];
+            cs_dd_arr.value = [...xuanzhongCs.value];
-              cs_dd_arr.value.map((item, index) => {
+            cs_dd_arr.value.map((item, index) => {
-                DGcreateCs2(item, index);
+              DGcreateCs2(item, index);
-              });
+            });
           } else {
-                addCs2();
+            addCs2();
           }
         }
       }
@@ -2103,7 +2107,7 @@ const getDatas = async (e, i, y = true) => {
                   ages: item.age + "岁",
                   percent: item.percent,
                 });
-                before_age = item.age+1;
+                before_age = item.age + 1;
               }
             }
           });
@@ -2272,7 +2276,7 @@ const getDatas2 = async (e, i, cs) => {
               before_age = before_age + 1;
               // before_age = item.age;
             } else {
-              for (let k = before_age; k < item.age ; k++) {
+              for (let k = before_age; k < item.age; k++) {
                 personTotal.value.push({
                   rksl: 0,
                   age: before_age + "",
@@ -2287,7 +2291,7 @@ const getDatas2 = async (e, i, cs) => {
                 ages: item.age + "岁",
                 percent: item.percent,
               });
-              before_age = item.age+1;
+              before_age = item.age + 1;
             }
           }
         });
@@ -2323,10 +2327,7 @@ const getDatas2 = async (e, i, cs) => {
         }
       }
     });
-  if (
+  if (tsbq_pp.value.includes(i1)) {
-
-    tsbq_pp.value.includes(i1)
-  ) {
   } else {
     if (choose.value.person == "") {
       cs_dd_arr.value.map((item, index) => {
@@ -2468,19 +2469,19 @@ const getDataBqs2 = async (jd, cs, bq) => {
             //     DGcreateCs(item, index);
             //   });
             // } else {
-              cs_dd_arr.value.forEach((item, index) => {
+            cs_dd_arr.value.forEach((item, index) => {
-                map.removeOverlay(cs_dd_arr.value[index]);
+              map.removeOverlay(cs_dd_arr.value[index]);
-              });
+            });
-              cs_dd_arr.value = [...xuanzhongCs.value];
+            cs_dd_arr.value = [...xuanzhongCs.value];
-              cs_dd_arr.value.map((item, index) => {
+            cs_dd_arr.value.map((item, index) => {
-                DGcreateCs2(item, index);
+              DGcreateCs2(item, index);
-              });
+            });
             // }
           } else {
             // if (choose.value.person == "") {
             //   addCs();
             // } else {
-              addCs2();
+            addCs2();
             // }
           }
         }
@@ -3015,26 +3016,37 @@ const getFwq = () => {
   });
 };
 //点击服务圈村
+const fwq_cslist = ref([]); //对应村社
+const fwq_jzdk = ref([]); //对应地块
+const fwq_centerList = ref([]); //对应中心点
+const clearfwq = () => {
+  fwq_list_arr.value.forEach((item, index) => {
+    map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标
+  });
+  fwq_dk.value.forEach((item, index) => {
+    map.removeOverlay(fwq_dk.value[index]); // 清空服务圈 地块
+  });
+  fwq_center.value.forEach((item, index) => {
+    map.removeOverlay(fwq_center.value[index]); // 清空服务圈 地块中心点
+  });
+};
 const changeFwq = async (id, name, names) => {
   if (choose.value.fwq == id) {
     choose.value.fwq = null;
     csh(); //地图初始化
     addPolygonCounty(); //添加地区
-    fwq_list_arr.value.forEach((item, index) => {
+    clearfwq();
-      map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标
-    });
     fwq_list_arr.value = [];
-    map.removeOverlay(circle); // 清空服务圈 圆
+    // map.removeOverlay(circle); // 清空服务圈 圆
-    circle = null;
+    // circle = null;
   } else {
     csh();
+    await loadCs(name);
     await getServiceCircle(names, name);
     if (fwqList.value.length !== 0) {
-      fwq_list_arr.value.forEach((item, index) => {
+      clearfwq();
-        map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标
+      // map.removeOverlay(circle); // 清空服务圈 圆
-      });
+      // circle = null;
-      map.removeOverlay(circle); // 清空服务圈 圆
-      circle = null;
       fwq_list_arr.value = [];
       choose.value.fwq = id;
       map.clearOverlays(); //清空地图上所有的覆盖物
@@ -3126,32 +3138,24 @@ const calculateZoomLevel = (maxDistance) => {
 const addggfwq = () => {
   if (fwqList.value.length !== 0) {
     data.fwqCoordinates = [];
-    // data.fwqCoordinates1 = [];
+    //创建图标
-    // data.fwqCoordinates2 = [];
     fwqList.value.map((item, index) => {
       data.fwqCoordinates.push(item.point);
-      // data.fwqCoordinates1.push(item.point[0]);
-      // data.fwqCoordinates2.push(item.point[1]);
       createCustomOverlay(item, index);
     });
-
+    //创建地块+中心点
+    addFwqCs();
+    fwq_centerList.value.map((item, index) => {
+      addFwqCsCenter(item, index);
+    });
     const centerPoint = calculateCenterPoint(data.fwqCoordinates);
     data.fwqCoordinates1 = centerPoint[0];
     data.fwqCoordinates2 = centerPoint[1];
 
-    // data.fwqCoordinates1 = calculateAverage(data.fwqCoordinates1);
-    // data.fwqCoordinates2 = calculateAverage(data.fwqCoordinates2);
     console.log(centerPoint); // 输出中心点的经纬度
-    // console.log("经纬度", data.fwqCoordinates1, data.fwqCoordinates2 );
 
     let distances = []; // 初始化距离数组
     fwqList.value.forEach((item) => {
-      // let distance = algorithm(
-      //   (item.point[0] = Number(item.point[0].replace(/[^0-9.-]/g, ""))),
-      //   (item.point[1] = Number(item.point[1].replace(/[^0-9.-]/g, ""))),
-      //   data.fwqCoordinates1,
-      //   data.fwqCoordinates2
-      // );
       let distance = algorithm(
         Number(item.point[0].replace(/[^0-9.-]/g, "")),
         Number(item.point[1].replace(/[^0-9.-]/g, "")),
@@ -3167,7 +3171,7 @@ const addggfwq = () => {
     }
     data.zoomLevel = calculateZoomLevel(maxDistance);
     console.log("最大距离:", maxDistance, data.zoomLevel);
-    drawACircle(maxDistance);
+    // drawACircle(maxDistance);
   } else {
     ElMessage.warning({
       message: "无数据",
@@ -3274,7 +3278,9 @@ const createCustomOverlay = (polygon, indexx) => {
   fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
     point: new BMapGL.Point(...polygon.point),
     opacity: 0.5,
-    offsetY: 0,
+    // offsetY: 0,
+    offsetX: 10,
+    offsetY: -15,
     properties: {
       title: polygon.name,
       imgSrc2: polygon.img2,
@@ -3298,35 +3304,129 @@ const createCustomOverlay = (polygon, indexx) => {
   // });
   map.addOverlay(fwq_list_arr.value[indexx]);
 };
+//添加公共服务圈地块+中心点
+const addFwqCs = () => {
+  fwq_dk.value.length = 0;
+  fwq_jzdk.value.map((item, index) => {
+    let num = index % 9;
+    let fillColor = "#ffffff";
+    let points = [];
+    item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
+    if (points.length) {
+      //创建面
+      fwq_dk.value[index] = new BMapGL.Polygon(points, {
+        strokeColor: "#5E9AD2",
+        strokeWeight: 2,
+        strokeOpacity: 0.8,
+        fillColor: fillColor,
+        fillOpacity: 0.3,
+        name: item.name,
+        zIndex: 2,
+      });
+      map.addOverlay(fwq_dk.value[index]);
+    }
+  });
+};
+const addFwqCsCenter = (polygon, indexx) => {
+  function createLabelDOM() {
+    var content = document.createElement("div");
+    content.style.display = "flex";
+    content.style.flexDirection = "column";
+    content.style.alignItems = "center";
+    content.style.height = "60px";
+    content.style.width = "60px";
+    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 = "5px";
+    div.style.minWidth = "60px";
+    div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
+    div.style.transform = "translateY(50px)";
+    div.setAttribute("name", this.properties.title);
+
+    var title = document.createElement("div");
+    title.style.fontSize = "10px";
+    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 = "26px";
+    img2.src = this.properties.imgSrc2;
+
+    content.appendChild(div);
+    content.appendChild(img2);
+    return content;
+  }
+  fwq_center.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
+    point: new BMapGL.Point(...polygon.center),
+    opacity: 0.5,
+    offsetX: 10,
+    offsetY: -15,
+    properties: {
+      title: polygon.name,
+      imgSrc2: dwd,
+      type: "customOverlay",
+    },
+  });
+  map.addOverlay(fwq_center.value[indexx]);
+};
+//
+//服务点数据处理
 const updateFwqList = (data, townName, communityName) => {
   // console.log(data, townName, communityName,'服务器数据');
   let updatedFwqList = [];
-  jbfwqTotal.value.forEach((town) => {
+  // jbfwqTotal.value.forEach((town) => {
-    if (town.name === townName) {
+  //   if (town.name === townName) {
-      town.child.forEach((community, index) => {
+  //     town.child.forEach((community, index) => {
-        if (community.name === communityName) {
+  //       if (community.name === communityName) {
-          updatedFwqList = data
+  fwq_cslist.value.length = 0;
-            .filter(
+  fwq_jzdk.value.length = 0;
-              (item) => item.xzjd === townName && item.jc === communityName
+  fwq_centerList.value.length = 0;
-            )
+  data.forEach((itemN) => {
-            .map((item) => ({
+    if (!fwq_cslist.value.includes(itemN.csq)) {
-              x: 53,
+      fwq_cslist.value.push(itemN.csq);
-              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;
-        }
-      });
     }
   });
+  fwq_cslist.value.forEach((fwq) => {
+    xkzDk.forEach((dk) => {
+      if (fwq == dk.name) {
+        fwq_jzdk.value.push(dk);
+      }
+    });
+    xkzCenter.forEach((center) => {
+      if (fwq == center.name) {
+        fwq_centerList.value.push(center);
+      }
+    });
+  });
+  console.log(77, fwq_centerList.value);
+
+  updatedFwqList = data.map((item) => ({
+    x: 53,
+    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;
+  //       }
+  //     });
+  //   }
+  // });
   fwqList.value = updatedFwqList;
-  // console.log(jbfwqTotal.value[4].child[0], "乡镇");
 };
 //------------------------------
 //-------乡镇街道级别---------
@@ -3368,7 +3468,7 @@ let offsetX = 0.01095; // 街道横向偏移量
 let offsetY = 0.00314; // 纵向偏移量
 let offsetX2 = 0.01; // 村社横向偏移量
 let offsetY2 = 0.00328; // 纵向偏移量
-const isclick = ref('');
+const isclick = ref("");
 const addPolygonCounty = () => {
   map.clearOverlays();
   let fillColor = "#ffffff";