gx

src/utils/mapInitializer.js

@@ -0,0 +1,65 @@
+// 重置与选择相关的状态
+const resetSelections = (xuanzhongCs, sfdd, title_choose, cfJd, cfCs) => {
+    xuanzhongCs.value = [];
+    sfdd.value = false;
+    title_choose.value = "";
+    cfJd.value = "";
+    cfCs.value = "";
+  };
+  
+  // 从特定数组中删除覆盖
+  const removeOverlaysFromArray = (map, array) => {
+    array.forEach((item, index) => {
+      map.removeOverlay(array[index]);
+    });
+  };
+  
+  // 从地图上删除所有叠加层
+  const clearOverlays = (map, arrays) => {
+    arrays.forEach(array => removeOverlaysFromArray(map, array));
+  };
+  
+  // 删除事件监听器和当前标记覆盖
+  const removeMarkerEvents = (map, markera, currentMarker) => {
+    map.removeEventListener("click", markera);
+    if (currentMarker !== null) {
+      map.removeOverlay(currentMarker);
+    }
+  };
+  
+  // 重置标记相关数组
+  const resetMarkers = (arrays) => {
+    arrays.forEach(array => array.value = []);
+  };
+  
+  // 将地图中心重置为默认位置
+  const resetMapCenter = (map, center, zoom) => {
+    goMapCenter(center, zoom);
+  };
+  
+  // 获取新数据
+  const fetchData = () => {
+    getData();
+  };
+  
+  // 初始化龙游县
+  const initializeMap = (map, xuanzhongCs, sfdd, title_choose, cfJd, cfCs, cs_un_choose_arr, cs_choose_arr, cs_number_name_arr, cs_name_arr, cs_qk_arr, cs_dd_arr, markera, currentMarker) => {
+    resetSelections(xuanzhongCs, sfdd, title_choose, cfJd, cfCs);
+    clearOverlays(map, [cs_un_choose_arr.value, cs_choose_arr.value, cs_number_name_arr.value, cs_name_arr.value, cs_qk_arr.value, cs_dd_arr.value]);
+    removeMarkerEvents(map, markera, currentMarker);
+    resetMarkers([cs_qk_arr, cs_name_arr, cs_number_name_arr, cs_choose_arr, cs_un_choose_arr, cs_dd_arr]);
+    resetMapCenter(map, [119.178783, 29.034583], 11);
+    fetchData();
+  };
+  
+  export default initializeMap;
+  export {
+    resetSelections,
+    removeOverlaysFromArray,
+    clearOverlays,
+    removeMarkerEvents,
+    resetMarkers,
+    resetMapCenter,
+    fetchData
+  };
+  

src/view/sy_map.vue

@@ -12,8 +12,13 @@
             <div class="title_line"></div>
           </div>
           <div class="content">
-            <div class="content_item" v-for="(item, index) in personTotal" :class="{ choose: item.id == choose.person }"
+            <div
-              @click="buten(item)" :key="index">
+              class="content_item"
+              v-for="(item, index) in personTotal"
+              :class="{ choose: item.id == choose.person }"
+              @click="buten(item)"
+              :key="index"
+            >
               <div class="content_item_name">{{ item.ages }}</div>
               <div class="content_item_value">{{ item.rksl }}</div>
             </div>
@@ -25,8 +30,13 @@
             <div class="title_line"></div>
           </div>
           <div class="content">
-            <div class="content_item" v-for="(item, index) in tsbqTotal" :class="{ choose: item.id == choose.person }"
+            <div
-              @click="buten2(item)" :key="index">
+              class="content_item"
+              v-for="(item, index) in tsbqTotal"
+              :class="{ choose: item.id == choose.person }"
+              @click="buten2(item)"
+              :key="index"
+            >
               <div class="content_item_name">{{ item.name }}</div>
               <div class="content_item_value">{{ item.rksl }}</div>
             </div>
@@ -40,11 +50,27 @@
             <div class="title_line"></div>
           </div>
           <div class="jbggfwq_content">
-            <div class="jbggfwq_content_item" v-for="(item, index) in jbfwqTotal" :key="index">
+            <div
+              class="jbggfwq_content_item"
+              v-for="(item, index) in jbfwqTotal"
+              :key="index"
+            >
               <div class="jbggfwq_content_item_left">{{ item.name }}</div>
               <div class="jbggfwq_content_item_right">
-                <div class="jbggfwq_content_item_right_item" v-for="itemm in item.child"
+                <div
-                  :class="{ choose: itemm.id == choose.fwq }" @click="changeFwq(itemm.id, itemm.fwqList, itemm.center)">
+                  class="jbggfwq_content_item_right_item"
+                  v-for="itemm in item.child"
+                  :class="{ choose: itemm.id == choose.fwq }"
+                  @click="
+                    changeFwq(
+                      itemm.id,
+                      itemm.fwqList,
+                      itemm.center,
+                      item.name,
+                      itemm.name
+                    )
+                  "
+                >
                   {{ itemm.name }}
                 </div>
               </div>
@@ -57,8 +83,13 @@
             <div class="title_line"></div>
           </div>
           <div class="zyys_content">
-            <div class="zyys_content_item" v-for="(item, index) in yaosuTotal"
+            <div
-              :class="{ choose: item.id == choose.yaosu, wz: item.wz == true }" @click="changeys(item.id)" :key="index">
+              class="zyys_content_item"
+              v-for="(item, index) in yaosuTotal"
+              :class="{ choose: item.id == choose.yaosu, wz: item.wz == true }"
+              @click="changeys(item.id)"
+              :key="index"
+            >
               <img :src="item.img" class="zyys_content_item_left" />
               <div class="zyys_content_item_right">{{ item.name }}</div>
             </div>
@@ -80,6 +111,7 @@ import {
   watch,
   nextTick,
 } from "vue";
+import initializeMap from "@/utils/mapInitializer.js";
 import http from "@/utils/request.js";
 import mapTown from "@/assets/json/ly.json";
 import xkz from "@/assets/json/xkz.json";
@@ -531,9 +563,17 @@ const addPolygonCounty = () => {
             if (choose.value.person == 0) {
               getDatas("溪口镇", "");
               getDataBq(cfJd.value, "");
-            } else if (choose.value.person == "cjr" || choose.value.person == "dibian" || choose.value.person == "db" || choose.value.person == "gxy" || choose.value.person == "tnb" || choose.value.person == "tyjr" || choose.value.person == "kjer") {
+            } else if (
+              choose.value.person == "cjr" ||
+              choose.value.person == "dibian" ||
+              choose.value.person == "db" ||
+              choose.value.person == "gxy" ||
+              choose.value.person == "tnb" ||
+              choose.value.person == "tyjr" ||
+              choose.value.person == "kjer"
+            ) {
               getDataBq(cfJd.value, "");
-              getDataBqs2(cfJd.value, '', choose.value.person,);
+              getDataBqs2(cfJd.value, "", choose.value.person);
               console.log(3);
             } else {
               console.log(4);
@@ -602,8 +642,8 @@ const addPolygonCounty = () => {
     }
   });
 };
-//添加街道名
 
+//添加街道名
 const addJd = () => {
   mapTownCount.map((item, index) => {
     createCustomOverlayJd(item, index);
@@ -615,7 +655,7 @@ const addJd2 = () => {
     mapTownCount.map((item, index) => {
       createCustomOverlayJd2(item, index);
     });
-  })
+  });
 
   // if (center_now.value[0] == 119.178783) {
   //   goMapCenter([119.178783, 29.034581], 11);
@@ -698,14 +738,21 @@ const addPolygonCountyCs = () => {
             DGcreateCs2(item, index);
           });
         }
-        if (choose.value.person == "cjr" || choose.value.person == "dibian" || choose.value.person == "db" || choose.value.person == "gxy" || choose.value.person == "tnb" || choose.value.person == "tyjr" || choose.value.person == "kjer") {
+        if (
-          console.log(1, '溪口镇');
+          choose.value.person == "cjr" ||
-          getDataBqs2(cfJd.value, cfCs.value, '');
+          choose.value.person == "dibian" ||
+          choose.value.person == "db" ||
+          choose.value.person == "gxy" ||
+          choose.value.person == "tnb" ||
+          choose.value.person == "tyjr" ||
+          choose.value.person == "kjer"
+        ) {
+          console.log(1, "溪口镇");
+          getDataBqs2(cfJd.value, cfCs.value, "");
         } else {
-          console.log(2, '溪口镇');
+          console.log(2, "溪口镇");
-
-          getDatas2('溪口镇', choose.value.person, cfCs.value);
 
+          getDatas2("溪口镇", choose.value.person, cfCs.value);
         }
         addCsChoose();
         addCsUnChoose();
@@ -911,9 +958,17 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
   let num = "";
   if (choose.value.person == "6666") {
     num = "swrs";
-  } if (choose.value.person == "cjr" || choose.value.person == "dibian" || choose.value.person == "db" || choose.value.person == "gxy" || choose.value.person == "tnb" || choose.value.person == "tyjr" || choose.value.person == "kjer") {
+  }
+  if (
+    choose.value.person == "cjr" ||
+    choose.value.person == "dibian" ||
+    choose.value.person == "db" ||
+    choose.value.person == "gxy" ||
+    choose.value.person == "tnb" ||
+    choose.value.person == "tyjr" ||
+    choose.value.person == "kjer"
+  ) {
     num = "numbers";
-
   } else {
     num = "number";
   }
@@ -928,7 +983,6 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
     },
   });
   map.addOverlay(jdm_number_arr.value[indexx]);
-
 };
 //创建村社
 const addCs = () => {
@@ -993,9 +1047,17 @@ const createCs2 = (polygon, indexx) => {
   let num = "";
   if (choose.value.person == "6666") {
     num = "swrs";
-  } if (choose.value.person == "cjr" || choose.value.person == "dibian" || choose.value.person == "db" || choose.value.person == "gxy" || choose.value.person == "tnb" || choose.value.person == "tyjr" || choose.value.person == "kjer") {
+  }
+  if (
+    choose.value.person == "cjr" ||
+    choose.value.person == "dibian" ||
+    choose.value.person == "db" ||
+    choose.value.person == "gxy" ||
+    choose.value.person == "tnb" ||
+    choose.value.person == "tyjr" ||
+    choose.value.person == "kjer"
+  ) {
     num = "numbers";
-
   } else {
     num = "number";
   }
@@ -1173,9 +1235,17 @@ const DGcreateCs2 = (polygon, indexx) => {
   let num = "";
   if (choose.value.person == "6666") {
     num = "swrs";
-  } if (choose.value.person == "cjr" || choose.value.person == "dibian" || choose.value.person == "db" || choose.value.person == "gxy" || choose.value.person == "tnb" || choose.value.person == "tyjr" || choose.value.person == "kjer") {
+  }
+  if (
+    choose.value.person == "cjr" ||
+    choose.value.person == "dibian" ||
+    choose.value.person == "db" ||
+    choose.value.person == "gxy" ||
+    choose.value.person == "tnb" ||
+    choose.value.person == "tyjr" ||
+    choose.value.person == "kjer"
+  ) {
     num = "numbers";
-
   } else {
     num = "number";
   }
@@ -1367,7 +1437,7 @@ const changebq = (id) => {
   // choose.value.person = id;
 };
 //基本公共服务圈点击
-const changeFwq = (id, list, center) => {
+const changeFwq = (id, list, center, name, names) => {
   if (choose.value.fwq == id) {
     // chooseArr.value = chooseArr.value.filter((item) => item !== "fwq");
     choose.value.fwq = 9999;
@@ -1384,6 +1454,7 @@ const changeFwq = (id, list, center) => {
   } else {
     choose.value.fwq = id;
     fwqList.value = list;
+    getServiceCircle(names, name);
     // 清空地图上所有的覆盖物
     console.log(22);
     map.clearOverlays();
@@ -2126,8 +2197,38 @@ const buten = async (item) => {
 const buten2 = async (item) => {
   // getDataBq(item.id, item.age);
   // getDatas("溪口镇", item.age);
+  // map.removeOverlay(marker1);
   getDataBqs(cfJd.value, cfCs.value, item.id);
 };
+const updateFwqList = (data, townName, communityName) => {
+  data.forEach((item) => {
+    if (item.csq === communityName) {
+      item.fwqList = data.map((item1) => ({
+        name: item1.zyysmc,
+        point: [item1.jd, item1.wd],
+        bgColor: "#00b050",
+        img: fwqbg1,
+        img2: b2,
+        x: 33,
+        y: 0,
+        textColor: "#fff",
+        padding: "4px 8px 10px",
+      }));
+    }
+  });
+};
+const getServiceCircle = async (communityName, townName) => {
+  try {
+    const response = await http.get(`/api/ggfwyth/ysyzt/zyysxx?csq=${communityName}&xzjd=${townName}`);
+    if (response.code === 200) {
+      console.log(response.data);
+      updateFwqList(response.data, townName, communityName);
+    }
+  } catch (error) {
+    console.error("Error fetching data:", error);
+  }
+};
+
 //获取人口数
 const getData = async (i, e) => {
   await http
@@ -2285,8 +2386,16 @@ const getDatas = async (e, i) => {
     });
 };
 const getDatas2 = async (e, i, cs) => {
-  if (i == "cjr" || i == "dibian" || i == "db" || i == "gxy" || i == "tnb" || i == "tyjr" || i == "kjer") {
+  if (
-    i = ''
+    i == "cjr" ||
+    i == "dibian" ||
+    i == "db" ||
+    i == "gxy" ||
+    i == "tnb" ||
+    i == "tyjr" ||
+    i == "kjer"
+  ) {
+    i = "";
   }
   await http
     .get(
@@ -2367,7 +2476,6 @@ const getDataBqs = async (jd, cs, bq) => {
     data = {
       xzjd: jd,
       tsbq: bq,
-
     };
     vv = 2;
   } else {
@@ -2388,12 +2496,11 @@ const getDataBqs = async (jd, cs, bq) => {
           }
         });
       });
-      console.log(mapTownCount, 'mapTownCount');
+      console.log(mapTownCount, "mapTownCount");
       changeRs2(bq);
       if (jd) {
         addCs2();
       }
-
     }
   });
 };
@@ -2514,13 +2621,17 @@ onMounted(() => {
   bottom: 0;
   width: 520px;
   height: 960px;
-  background: linear-gradient(270deg,
+  background: linear-gradient(
+      270deg,
       rgba(0, 52, 131, 0.69) 0%,
       rgba(0, 32, 83, 0.77) 50%,
-      rgba(0, 60, 131, 0.74) 100%),
+      rgba(0, 60, 131, 0.74) 100%
-    radial-gradient(128% 99% at 100% 46%,
+    ),
+    radial-gradient(
+      128% 99% at 100% 46%,
       rgba(0, 48, 125, 0.29) 0%,
-      rgba(0, 61, 134, 0.42) 100%);
+      rgba(0, 61, 134, 0.42) 100%
+    );
   box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
   backdrop-filter: blur(3px);
   padding: 30px 26px;
@@ -2692,13 +2803,17 @@ onMounted(() => {
   bottom: 0;
   width: 520px;
   height: 960px;
-  background: linear-gradient(270deg,
+  background: linear-gradient(
+      270deg,
       rgba(0, 52, 131, 0.69) 0%,
       rgba(0, 32, 83, 0.77) 50%,
-      rgba(0, 60, 131, 0.74) 100%),
+      rgba(0, 60, 131, 0.74) 100%
-    radial-gradient(128% 99% at 100% 46%,
+    ),
+    radial-gradient(
+      128% 99% at 100% 46%,
       rgba(0, 48, 125, 0.29) 0%,
-      rgba(0, 61, 134, 0.42) 100%);
+      rgba(0, 61, 134, 0.42) 100%
+    );
   box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
   backdrop-filter: blur(3px);
   padding: 30px 26px;
@@ -2856,10 +2971,12 @@ onMounted(() => {
       // line-height: 44px;
       letter-spacing: 4px;
       margin-bottom: 15px;
-      background: linear-gradient(180deg,
+      background: linear-gradient(
-          #ffffff 0%,
+        180deg,
-          #ffffff 40%,
+        #ffffff 0%,
-          #00ffff 100%);
+        #ffffff 40%,
+        #00ffff 100%
+      );
       /* 使文字没有背景颜色的背景 */
       background-clip: text;
       /* 为了兼容性，添加渐变背景到IE */