diff --git a/src/utils/mapInitializer.js b/src/utils/mapInitializer.js
new file mode 100644
index 0000000..90a8a4c
--- /dev/null
+++ b/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
+  };
+  
\ No newline at end of file
diff --git a/src/view/sy_map copy.vue b/src/view/sy_map copy.vue
new file mode 100644
index 0000000..45a5a5a
--- /dev/null
+++ b/src/view/sy_map copy.vue	
@@ -0,0 +1,2879 @@
+<template>
+  <div class="module">
+    <teleport to="body">
+      <div id="map" style="width: 100vw; height: 100vh"></div>
+      <div class="left" style="width: 517px">
+        <div class="lyx">
+          <div class="title">
+            <div class="title_name">
+              <span @click="csh()">龙游县</span>
+              <span>{{ title_choose }}</span>
+            </div>
+            <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 }"
+              @click="buten(item)" :key="index">
+              <div class="content_item_name">{{ item.ages }}</div>
+              <div class="content_item_value">{{ item.rksl }}</div>
+            </div>
+          </div>
+        </div>
+        <div class="tsbq">
+          <div class="title">
+            <div class="title_name">特殊标签</div>
+            <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 }"
+              @click="buten2(item)" :key="index">
+              <div class="content_item_name">{{ item.name }}</div>
+              <div class="content_item_value">{{ item.rksl }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right" style="width: 517px">
+        <div class="jbggfwq">
+          <div class="title">
+            <div class="title_name">基本公共服务圈</div>
+            <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_left">{{ item.name }}</div>
+              <div class="jbggfwq_content_item_right">
+                <div 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)">
+                  {{ itemm.name }}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="zyys">
+          <div class="title">
+            <div class="title_name">资源要素</div>
+            <div class="title_line"></div>
+          </div>
+          <div class="zyys_content">
+            <div 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>
+          </div>
+        </div>
+      </div>
+    </teleport>
+  </div>
+</template>
+<script setup>
+import {
+  ref,
+  reactive,
+  onMounted,
+  onBeforeMount,
+  onBeforeUnmount,
+  computed,
+  defineProps,
+  watch,
+  nextTick,
+} from "vue";
+import http from "@/utils/request.js";
+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";
+import j3 from "@/assets/images/map/j3.png";
+import j4 from "@/assets/images/map/j4.png";
+import j5 from "@/assets/images/map/j5.png";
+import j6 from "@/assets/images/map/j6.png";
+import j7 from "@/assets/images/map/j7.png";
+import j8 from "@/assets/images/map/j8.png";
+import j9 from "@/assets/images/map/j9.png";
+import j10 from "@/assets/images/map/j10.png";
+import dwd from "@/assets/images/map/dwd.png";
+import fwqbg1 from "@/assets/images/map/qlv.png";
+import fwqbg2 from "@/assets/images/map/qlan.png";
+import fwqbg3 from "@/assets/images/map/slan.png";
+import fwqbg4 from "@/assets/images/map/slv.png";
+import fwqbg5 from "@/assets/images/map/shuang.png";
+import fwqbg6 from "@/assets/images/map/qqlv.png";
+import b1 from "@/assets/images/map/bb1.png";
+import b2 from "@/assets/images/map/b2.png";
+import b3 from "@/assets/images/map/b3.png";
+import b4 from "@/assets/images/map/b4.png";
+import b5 from "@/assets/images/map/b5.png";
+import b6 from "@/assets/images/map/b6.png";
+import xcbg from "@/assets/images/map/xcbg.png";
+import AED from "@/assets/images/map/AED.png";
+
+//删除(存放渲染的地块及图标)
+const jdm_arr = ref([]);
+const jdm_number_arr = ref([]);
+const fwq_list_arr = ref([]);
+const cs_qk_arr = ref([]);
+const cs_name_arr = ref([]);
+const cs_number_name_arr = ref([]);
+const cs_choose_arr = ref([]);
+const cs_un_choose_arr = ref([]);
+const cs_dd_arr = ref([]);
+//是否进入村社
+const jrcs = ref(false);
+const title_choose = ref("");
+//是否单点社区
+const sfdd = ref(false);
+const xuanzhongCs = ref([]);
+//存放街道
+const cfJd = ref("");
+//存放村社
+const cfCs = ref("");
+//村社颜色列表
+const colorList = [
+  {
+    bg: "RGBA(52, 231, 134, 1)",
+  },
+  {
+    bg: "RGBA(255, 206, 0, 1)",
+  },
+  {
+    bg: "RGBA(186, 232, 128, 1)",
+  },
+  {
+    bg: "RGBA(35, 146, 223, 1)",
+  },
+  {
+    bg: "RGBA(60, 144, 252, 1)",
+  },
+  {
+    bg: "RGBA(255, 142, 0, 1)",
+  },
+  {
+    bg: "RGBA(137, 128, 0, 1)",
+  },
+  {
+    bg: "RGBA(0, 207, 249, 1)",
+  },
+  {
+    bg: "RGBA(27, 91, 55, 1)",
+  },
+];
+//存放特殊标签中文对应的简写
+const tsbq_id_total = ref([
+  {
+    name: "残疾人",
+    id: "cjr",
+  },
+  {
+    name: "低边",
+    id: "dibian",
+  },
+  {
+    name: "低保",
+    id: "db",
+  },
+  {
+    name: "高血压",
+    id: "gxy",
+  },
+  {
+    name: "糖尿病",
+    id: "tnb",
+  },
+  {
+    name: "退役军人",
+    id: "tyjr",
+  },
+  {
+    name: "困难儿童",
+    id: "kjer",
+  },
+]);
+//点击龙游县初始化
+const csh = () => {
+  // console.log(222, item.name);
+  xuanzhongCs.value = [];
+  sfdd.value = false;
+  title_choose.value = "";
+  cfJd.value = "";
+  cfCs.value = "";
+  cs_un_choose_arr.value.forEach((item, index) => {
+    map.removeOverlay(cs_un_choose_arr.value[index]);
+  });
+  cs_choose_arr.value.forEach((item, index) => {
+    map.removeOverlay(cs_choose_arr.value[index]);
+  });
+  cs_number_name_arr.value.forEach((item, index) => {
+    map.removeOverlay(cs_number_name_arr.value[index]);
+  });
+  cs_name_arr.value.forEach((item, index) => {
+    map.removeOverlay(cs_name_arr.value[index]);
+  });
+  cs_qk_arr.value.forEach((item, index) => {
+    map.removeOverlay(cs_qk_arr.value[index]);
+  });
+  cs_dd_arr.value.forEach((item, index) => {
+    map.removeOverlay(cs_dd_arr.value[index]);
+  });
+  // jdm_arr.value = [];
+  // jdm_number_arr.value = [];
+  // fwq_list_arr.value = [];
+  cs_qk_arr.value = [];
+  cs_name_arr.value = [];
+  cs_number_name_arr.value = [];
+  cs_choose_arr.value = [];
+  cs_un_choose_arr.value = [];
+  cs_dd_arr.value = [];
+  map.removeEventListener("click", markera);
+  if (currentMarker !== null) {
+    map.removeOverlay(currentMarker);
+  }
+  goMapCenter([119.178783, 29.034583], 11);
+  getData();
+};
+//选中社区
+const chooseCsList = ref([]);
+const unChooseList = ref([]);
+const sqname = ref();
+const townName = ref();
+//中心点坐标
+const center_now = ref([]);
+const center_center = ref([119.178783, 29.034583]);
+//地图设置
+const mapTownCount = reactive([
+  {
+    name: "龙洲街道",
+    center: [119.1573083, 28.9799445],
+    number: "1000",
+  },
+  {
+    name: "东华街道",
+    center: [119.209592, 28.9799445],
+    number: "1000",
+  },
+  {
+    name: "小南海镇",
+    center: [119.119616, 29.07309],
+    number: "1000",
+  },
+  {
+    name: "湖镇镇",
+    center: [119.2906892, 29.0386151],
+    number: "1000",
+  },
+  {
+    name: "溪口镇",
+    center: [119.1859408, 28.8879474],
+    number: "1000",
+  },
+  {
+    name: "詹家镇",
+    center: [119.1201732, 29.005175],
+    number: "1000",
+  },
+  {
+    name: "塔石镇",
+    center: [119.1256669, 29.1373072],
+    number: "1000",
+  },
+  {
+    name: "横山镇",
+    center: [119.1876111, 29.1903275],
+    number: "1000",
+  },
+  {
+    name: "模环乡",
+    center: [119.237015, 29.120862],
+    number: "1000",
+  },
+  {
+    name: "石佛乡",
+    center: [119.1002998, 29.2018674],
+    number: "1000",
+  },
+  {
+    name: "沐尘畲族乡",
+    center: [119.1837169, 28.8014116],
+    number: "1000",
+  },
+  {
+    name: "罗家乡",
+    center: [119.2453273, 28.9130851],
+    number: "1000",
+  },
+  {
+    name: "庙下乡",
+    center: [119.1037175, 28.8089885],
+    number: "1000",
+  },
+  {
+    name: "大街乡",
+    center: [119.2664362, 28.8432149],
+    number: "1000",
+  },
+  {
+    name: "社阳乡",
+    center: [119.3109367, 28.9074754],
+    number: "1000",
+  },
+]);
+
+//默认龙游县灰色地块
+const mapTownDataDK = reactive([]);
+//社区地块
+const xkzDk = reactive([]);
+//社区中心点
+const xkzCenter = reactive([
+  {
+    name: "溪口村",
+    center: [119.2002156322304, 28.83866363229786],
+    number: "50",
+  },
+  {
+    name: "扁石村",
+    center: [119.18143177857742, 28.858795781247416],
+    number: "50",
+  },
+  {
+    name: "大垄村",
+    center: [119.15947390269743, 28.856881986353613],
+    number: "50",
+  },
+  {
+    name: "枫林村",
+    center: [119.2244601402551, 28.874916936765324],
+    number: "50",
+  },
+  {
+    name: "双港口村",
+    center: [119.2112370831526, 28.873145674638753],
+    number: "50",
+  },
+  {
+    name: "灵上村",
+    center: [119.18997199384468, 28.871170115155575],
+    number: "50",
+  },
+  {
+    name: "灵下村",
+    center: [119.19215588030731, 28.890692457149832],
+    number: "50",
+  },
+  {
+    name: "下徐村",
+    center: [119.13517530022014, 28.877528537725134],
+    number: "50",
+  },
+  {
+    name: "大沃口村",
+    center: [119.17629950196843, 28.895987778606404],
+    number: "50",
+  },
+  {
+    name: "寺下村",
+    center: [119.15115841066512, 28.913624042836545],
+    number: "50",
+  },
+  {
+    name: "大阳家村",
+    center: [119.165141274073, 28.89860048623702],
+    number: "50",
+  },
+  {
+    name: "石角村",
+    center: [119.12327500764461, 28.911094612057784],
+    number: "50",
+  },
+  {
+    name: "红罗村",
+    center: [119.18884846618927, 28.911017362099795],
+    number: "50",
+  },
+  {
+    name: "冷水村",
+    center: [119.19787638778016, 28.934598743672993],
+    number: "50",
+  },
+  {
+    name: "新溪社区",
+    center: [119.184555, 28.853068],
+    number: "50",
+  },
+]);
+var map = null;
+// 鼠标点击添加点位
+let currentMarker = null; // 用于保存当前标记的引用
+const markera = (e) => {
+  // 检查并移除当前标记
+  if (currentMarker !== null) {
+    map.removeOverlay(currentMarker);
+  }
+  // 创建新标记
+  let icons = new BMapGL.Icon(AED, new BMapGL.Size(24, 62));
+  var marker = new BMapGL.Marker(new BMapGL.Point(e.latlng.lng, e.latlng.lat), {
+    icon: icons,
+  });
+  // 将新标记添加到地图中并更新当前标记引用
+  map.addOverlay(marker);
+  currentMarker = marker;
+};
+const BMAP = () => {
+  // 添加鼠标点击事件监听器
+  map.addEventListener("click", markera);
+};
+// 添加服务圈
+var circle;
+const drawACircle = (v) => {
+  if (!circle) {
+    var point = new BMapGL.Point(119.184803, 28.853725);
+    circle = new BMapGL.Circle(point, 900, {
+      strokeColor: "yellow",
+      strokeWeight: 2,
+
+      strokeOpacity: 0.8,
+      fillOpacity: 0.1,
+      // fillColor: "yellow",
+      strokeStyle: "dashed",
+      zIndex: 99,
+    });
+    map.addOverlay(circle);
+  }
+
+  if (v === "hide") {
+    circle.hide();
+  } else {
+    circle.show();
+    map.addOverlay(circle);
+    map.setViewport({
+      center: new BMapGL.Point(119.184803, 28.853725),
+      zoom: 14,
+    });
+  }
+};
+
+const initMap = () => {
+  map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
+  map.setMapType(BMAP_SATELLITE_MAP);
+  map.enableScrollWheelZoom(true);
+  goMapCenter([119.178783, 29.034583], 11);
+
+  //加载乡镇信息
+  loadTown();
+  //渲染地块
+  addPolygonCounty();
+  //添加街道名
+  addJd();
+};
+const loadTown = () => {
+  for (let v of mapTown.features) {
+    if (v.geometry.coordinates.length > 1) {
+      for (let w in v.geometry.coordinates) {
+        if (v.geometry.coordinates[w][0].length < 60) continue;
+        mapTownDataDK.push({
+          name: v.properties.name,
+          point: v.geometry.coordinates[w][0],
+        });
+      }
+    } else {
+      mapTownDataDK.push({
+        name: v.properties.name,
+        point: v.geometry.coordinates[0],
+      });
+    }
+  }
+};
+
+//添加地图区块
+const addPolygonCounty = () => {
+  map.clearOverlays();
+  let fillColor = "#ffffff";
+  mapTownDataDK.map((item) => {
+    item.leg = 0;
+    //地区的坐标范围
+    let points = [];
+    item.point.map((p) => points.push(new BMapGL.Point(...p)));
+    if (points.length) {
+      //创建面
+      let polygon = new BMapGL.Polygon(points, {
+        strokeColor: "#5E9AD2",
+        strokeWeight: 2,
+        strokeOpacity: 0.8,
+        fillColor: fillColor,
+        fillOpacity: 0.7,
+        name: item.name,
+        zIndex: 92,
+      });
+
+      map.addOverlay(polygon);
+      polygon.addEventListener("click", () => {
+        townName.value = item.name;
+        console.log(11111, item.name, townName.value);
+        // if(item.name !== "溪口镇"){
+        //   jrcs.value=false;
+        //   console.log( jrcs.value,'000');
+        // }
+        // if (jrcs.value && item.name != "溪口镇") {
+        //   console.log(1);
+        // } else {
+        //   console.log(2);
+
+        // jrcs.value=true;
+        if (item.name == cfJd.value) {
+          // console.log(2222);
+        } else {
+          // console.log(111);
+          cfJd.value = item.name;
+          let jdCenter = [];
+          if (item.name == "溪口镇") {
+            BMAP();
+            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") {
+              getDataBq(cfJd.value, "");
+              getDataBqs2(cfJd.value, '', choose.value.person,);
+              console.log(3);
+            } else {
+              console.log(4);
+              getDatas("溪口镇", choose.value.person);
+            }
+
+            if (!title_choose.value.includes("溪口镇")) {
+              title_choose.value = title_choose.value + `>${item.name}`;
+            }
+            loadCs();
+            addPolygonCountyCs();
+            mapTownCount.map((item) => {
+              if (item.name == "溪口镇") {
+                jdCenter = item.center;
+              }
+            });
+            // if (choose.value.person == "") {
+            //   addCs();
+            // } else {
+            //   addCs2();
+            // }
+            goMapCenter(jdCenter, 13);
+          } else {
+            map.removeEventListener("click", markera);
+            if (currentMarker !== null) {
+              map.removeOverlay(currentMarker);
+            }
+            cfJd.value = "";
+            cfCs.value = "";
+            xuanzhongCs.value = [];
+            sfdd.value = false;
+            title_choose.value = "";
+            cs_un_choose_arr.value.forEach((item, index) => {
+              map.removeOverlay(cs_un_choose_arr.value[index]);
+            });
+            cs_choose_arr.value.forEach((item, index) => {
+              map.removeOverlay(cs_choose_arr.value[index]);
+            });
+            cs_number_name_arr.value.forEach((item, index) => {
+              map.removeOverlay(cs_number_name_arr.value[index]);
+            });
+            cs_name_arr.value.forEach((item, index) => {
+              map.removeOverlay(cs_name_arr.value[index]);
+            });
+            cs_qk_arr.value.forEach((item, index) => {
+              map.removeOverlay(cs_qk_arr.value[index]);
+            });
+            cs_dd_arr.value.forEach((item, index) => {
+              map.removeOverlay(cs_dd_arr.value[index]);
+            });
+            // jdm_arr.value = [];
+            // jdm_number_arr.value = [];
+            // fwq_list_arr.value = [];
+            cs_qk_arr.value = [];
+            cs_name_arr.value = [];
+            cs_number_name_arr.value = [];
+            cs_choose_arr.value = [];
+            cs_un_choose_arr.value = [];
+            cs_dd_arr.value = [];
+            getData();
+          }
+        }
+
+        // }
+      });
+    }
+  });
+};
+//添加街道名
+
+const addJd = () => {
+  mapTownCount.map((item, index) => {
+    createCustomOverlayJd(item, index);
+  });
+};
+//添加街道名2含数量
+const addJd2 = () => {
+  nextTick(() => {
+    mapTownCount.map((item, index) => {
+      createCustomOverlayJd2(item, index);
+    });
+  })
+
+  // if (center_now.value[0] == 119.178783) {
+  //   goMapCenter([119.178783, 29.034581], 11);
+  // }
+};
+//加载村社信息
+const loadCs = () => {
+  for (let v of xkz.features) {
+    if (v.geometry.coordinates.length > 1) {
+      for (let w in v.geometry.coordinates) {
+        if (v.geometry.coordinates[w][0].length < 60) continue;
+        xkzDk.push({
+          name: v.properties.name,
+          point: v.geometry.coordinates[w][0],
+        });
+      }
+    } else {
+      xkzDk.push({
+        name: v.properties.name,
+        point: v.geometry.coordinates[0],
+      });
+    }
+  }
+};
+//添加村社区块
+const addPolygonCountyCs = () => {
+  xkzDk.map((item, index) => {
+    let num = index % 9;
+    let fillColor = colorList[num].bg;
+    //地区的坐标范围
+    let points = [];
+    item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
+    if (points.length) {
+      //创建面
+      cs_qk_arr.value[index] = new BMapGL.Polygon(points, {
+        strokeColor: fillColor,
+        strokeWeight: 2,
+        strokeOpacity: 0.8,
+        fillColor: fillColor,
+        fillOpacity: 0.7,
+        name: item.name,
+        zIndex: 99,
+      });
+      map.addOverlay(cs_qk_arr.value[index]);
+      cs_qk_arr.value[index].addEventListener("click", () => {
+        cfCs.value = item.name;
+        sfdd.value = true;
+        xkzCenter.forEach((a, b) => {
+          if (a.name == item.name) {
+            cs_dd_arr.value.push(a);
+            xuanzhongCs.value.push(a);
+          }
+        });
+        chooseCsList.value.length = 0;
+        unChooseList.value.length = 0;
+        xkzDk.forEach((itemm, indexx) => {
+          if (itemm.name == item.name) {
+            chooseCsList.value.push(itemm);
+          } else {
+            unChooseList.value.push(itemm);
+          }
+        });
+        title_choose.value = title_choose.value + `>${item.name}`;
+        console.log(item.name);
+        cs_qk_arr.value.forEach((item, index) => {
+          map.removeOverlay(cs_qk_arr.value[index]);
+        });
+        cs_name_arr.value.forEach((item, index) => {
+          map.removeOverlay(cs_name_arr.value[index]);
+        });
+        cs_number_name_arr.value.forEach((item, index) => {
+          map.removeOverlay(cs_number_name_arr.value[index]);
+        });
+        if (choose.value.person == "") {
+          cs_dd_arr.value.map((item, index) => {
+            DGcreateCs(item, index);
+          });
+        } else {
+          cs_dd_arr.value.map((item, index) => {
+            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") {
+          console.log(1, '溪口镇');
+          getDataBqs2(cfJd.value, cfCs.value, '');
+        } else {
+          console.log(2, '溪口镇');
+
+          getDatas2('溪口镇', choose.value.person, cfCs.value);
+
+        }
+        addCsChoose();
+        addCsUnChoose();
+      });
+    }
+  });
+};
+//添加选中社区
+const addCsChoose = () => {
+  chooseCsList.value.map((item, index) => {
+    sqname.value = item.name;
+    let fillColor = "blue";
+    //地区的坐标范围
+    let points = [];
+    item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
+    if (points.length) {
+      //创建面
+      cs_choose_arr.value[index] = new BMapGL.Polygon(points, {
+        strokeColor: fillColor,
+        strokeWeight: 2,
+        strokeOpacity: 0.8,
+        fillColor: fillColor,
+        fillOpacity: 0.4,
+        name: item.name,
+        zIndex: 99,
+      });
+      map.addOverlay(cs_choose_arr.value[index]);
+    }
+  });
+};
+//添加未选中社区
+const addCsUnChoose = () => {
+  unChooseList.value.map((item, index) => {
+    let fillColor = "RGBA(125, 140, 154, 1)";
+    //地区的坐标范围
+    let points = [];
+    item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
+    if (points.length) {
+      //创建面
+      cs_un_choose_arr.value[index] = new BMapGL.Polygon(points, {
+        strokeColor: fillColor,
+        strokeWeight: 2,
+        strokeOpacity: 0.8,
+        fillColor: fillColor,
+        fillOpacity: 0.5,
+        name: item.name,
+        zIndex: 99,
+      });
+      map.addOverlay(cs_un_choose_arr.value[index]);
+      cs_un_choose_arr.value[index].addEventListener("click", () => {
+        title_choose.value = title_choose.value.slice(
+          0,
+          -(cfCs.value.length + 1)
+        );
+
+        cfCs.value = item.name;
+        title_choose.value = title_choose.value + `>${cfCs.value}`;
+
+        sfdd.value = true;
+
+        cs_dd_arr.value.forEach((item, index) => {
+          map.removeOverlay(cs_dd_arr.value[index]);
+        });
+        cs_un_choose_arr.value.forEach((item, index) => {
+          map.removeOverlay(cs_un_choose_arr.value[index]);
+        });
+        cs_choose_arr.value.forEach((item, index) => {
+          map.removeOverlay(cs_choose_arr.value[index]);
+        });
+        chooseCsList.value.length = 0;
+        unChooseList.value.length = 0;
+        cs_dd_arr.value = [];
+        xuanzhongCs.value = [];
+        xkzCenter.forEach((a, b) => {
+          if (a.name == item.name) {
+            cs_dd_arr.value.push(a);
+            xuanzhongCs.value.push(a);
+          }
+        });
+        xkzDk.forEach((itemm, indexx) => {
+          if (itemm.name == item.name) {
+            chooseCsList.value.push(itemm);
+          } else {
+            unChooseList.value.push(itemm);
+          }
+        });
+        cs_un_choose_arr.value.forEach((item, index) => {
+          map.removeOverlay(cs_qk_arr.value[index]);
+        });
+        getDatas2(cfJd.value, choose.value.person, cfCs.value);
+        if (choose.value.person == "") {
+          cs_dd_arr.value.map((item, index) => {
+            DGcreateCs(item, index);
+          });
+        } else {
+          setTimeout(() => {
+            cs_dd_arr.value.map((item, index) => {
+              console.log("渲染", item);
+              DGcreateCs2(item, index);
+            });
+          }, 300);
+        }
+        addCsChoose();
+        addCsUnChoose();
+      });
+    }
+  });
+};
+// 添加地图上的街道名
+
+const createCustomOverlayJd = (polygon, indexx) => {
+  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);
+    content.style.height = "20px";
+    content.style.width = "20px";
+    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 = "10px";
+    title.style.fontWeight = "600";
+    title.style.color = "#000000";
+    div.appendChild(title);
+    title.appendChild(document.createTextNode(this.properties.title));
+    content.appendChild(div);
+    return content;
+  }
+  jdm_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
+    point: new BMapGL.Point(...polygon.center),
+    opacity: 0.5,
+    offsetY: -10,
+    properties: {
+      title: polygon.name,
+      type: "customOverlay",
+    },
+  });
+  map.addOverlay(jdm_arr.value[indexx]);
+};
+// 添加地图上的街道名+(人数,标签)
+const createCustomOverlayJd2 = (polygon, indexx) => {
+  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);
+    content.style.height = "30px";
+    content.style.width = "30px";
+    var div = document.createElement("div");
+    div.style.color = "#333";
+    div.style.whiteSpace = "nowrap";
+    div.style.MozUserSelect = "none";
+    div.style.display = "flex";
+    div.style.flexDirection = "column";
+    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 = "10px";
+    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 = "9px";
+    number.style.fontWeight = "600";
+    number.style.color = "#FEFF6C";
+    number.style.textShadow = "0px 2px 4px rgba(0,0,0,0.5)";
+    div.appendChild(number);
+    number.appendChild(document.createTextNode(this.properties.number));
+    content.appendChild(div);
+    div.onclick = function () {
+      let jdCenter = [];
+      if (polygon.name == "溪口镇") {
+        title_choose.value = title_choose.value + `>${polygon.name}`;
+        loadCs();
+        addPolygonCountyCs();
+        mapTownCount.map((item) => {
+          if (item.name == "溪口镇") {
+            jdCenter = item.center;
+          }
+        });
+        addCs2();
+        goMapCenter(jdCenter, 14);
+      }
+    };
+    return content;
+  }
+  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") {
+    num = "numbers";
+
+  } else {
+    num = "number";
+  }
+  jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
+    point: new BMapGL.Point(...polygon.center),
+    opacity: 0.5,
+    offsetY: 0,
+    properties: {
+      title: polygon.name,
+      number: polygon[`${num}`],
+      type: "customOverlay",
+    },
+  });
+  map.addOverlay(jdm_number_arr.value[indexx]);
+
+};
+//创建村社
+const addCs = () => {
+  xkzCenter.map((item, index) => {
+    createCs(item, index);
+  });
+};
+//创建村社(人数,标签)
+const addCs2 = () => {
+  xkzCenter.map((item, index) => {
+    createCs2(item, index);
+  });
+};
+//添加村社+(人数,标签)
+const createCs2 = (polygon, indexx) => {
+  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);
+    content.style.height = "60px";
+    content.style.width = "60px";
+    var div = document.createElement("div");
+    div.style.color = "#333";
+    div.style.whiteSpace = "nowrap";
+    div.style.MozUserSelect = "none";
+    div.style.display = "flex";
+    div.style.justifyContent = "space-between";
+    div.style.alignItems = "center";
+    div.style.cursor = "pointer";
+    div.style.padding = "5px";
+    div.style.minWidth = "90px";
+    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);
+
+    var number = document.createElement("div");
+    number.style.fontSize = "10px";
+    number.style.fontWeight = "600";
+    number.style.color = "black";
+    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 = "26px";
+    img2.src = this.properties.imgSrc2;
+
+    content.appendChild(div);
+    content.appendChild(img2);
+    return content;
+  }
+  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") {
+    num = "numbers";
+
+  } else {
+    num = "number";
+  }
+  cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
+    point: new BMapGL.Point(...polygon.center),
+    opacity: 0.5,
+    offsetY: 0,
+    properties: {
+      title: polygon.name,
+      number: polygon[`${num}`],
+      imgSrc2: dwd,
+      type: "customOverlay",
+    },
+  });
+  map.addOverlay(cs_number_name_arr.value[indexx]);
+};
+//添加村社
+const createCs = (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;
+  }
+  cs_name_arr.value[indexx] = 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(cs_name_arr.value[indexx]);
+};
+//添加单个村社
+const DGcreateCs = (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;
+  }
+  cs_dd_arr.value[indexx] = 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(cs_dd_arr.value[indexx]);
+};
+const DGcreateCs2 = (polygon, indexx) => {
+  console.log(choose.value.person, "单个村社", polygon);
+  console.log("单个村社", polygon.name);
+  console.log("单个村社", polygon.number);
+  console.log("单个村社", polygon.swrs);
+  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 = "space-between";
+    div.style.alignItems = "center";
+    div.style.cursor = "pointer";
+    div.style.padding = "5px";
+    div.style.minWidth = "90px";
+    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);
+
+    var number = document.createElement("div");
+    number.style.fontSize = "10px";
+    number.style.fontWeight = "600";
+    number.style.color = "black";
+    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 = "26px";
+    img2.src = this.properties.imgSrc2;
+
+    content.appendChild(div);
+    content.appendChild(img2);
+    return content;
+  }
+  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") {
+    num = "numbers";
+
+  } else {
+    num = "number";
+  }
+  console.log("单个", num);
+  cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
+    point: new BMapGL.Point(...polygon.center),
+    opacity: 0.5,
+    offsetY: 0,
+    properties: {
+      title: polygon.name,
+      number: polygon[`${num}`],
+      imgSrc2: dwd,
+      type: "customOverlay",
+    },
+  });
+  map.addOverlay(cs_dd_arr.value[indexx]);
+};
+//创建公共服务圈
+const addggfwq = () => {
+  // if (!fwqList || !fwqList.value) {
+  fwqList.value.map((item, index) => {
+    createCustomOverlay(item, index);
+  });
+  // return;
+  // }
+};
+// 添加公共服务圈的图标
+const createCustomOverlay = (polygon, indexx) => {
+  drawACircle();
+  function createLabelDOM() {
+    var content = document.createElement("div");
+    content.style.display = "flex";
+    content.style.flexDirection = "column";
+    content.style.alignItems = "center";
+    content.style.height = "40px";
+    content.style.width = "40px";
+    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.MozUserSelect = "none";
+    div.style.fontSize = "12px";
+    div.style.borderRadius = "10px";
+    div.style.display = "flex";
+    div.style.justifyContent = "center";
+    div.style.alignItems = "center";
+    div.style.background = `url(${polygon.img}) no-repeat 0/100% 100%`;
+    div.style.cursor = "pointer";
+    div.style.transform = `translate(${polygon.x}px,${polygon.y}px)`;
+    div.setAttribute("name", this.properties.title);
+
+    var title = document.createElement("div");
+    title.style.fontSize = "14px";
+    title.style.fontWeight = "700";
+    title.style.marginLeft = "0px";
+    title.style.color = `${polygon.textColor}`;
+    div.appendChild(title);
+    title.appendChild(document.createTextNode(this.properties.title));
+
+    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 () {
+    //   addPolygonTown(this.getAttribute('name'))
+    //   removeCustomOverlay()
+    //   addStage(this.getAttribute('name'))
+    //   state.mapStatus = 1
+    // }
+
+    return content;
+  }
+  fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
+    point: new BMapGL.Point(...polygon.point),
+    opacity: 0.5,
+    offsetY: 0,
+    properties: {
+      title: polygon.name,
+      imgSrc2: polygon.img2,
+      type: "customOverlay",
+    },
+  });
+  // var labelopts = {
+  //   position: new BMapGL.Point(polygon.point[0], polygon.point[1]), // 指定文本标注所在的地理位置
+  //   offset: new BMapGL.Size(0, -97), // 设置文本偏移量
+  // };
+  // var label = new BMapGL.Label(polygon.name, labelopts);
+  // label.setStyle({
+  //   color: "#fff",
+  //   borderRadius: "1px",
+  //   padding: "5px 13px",
+  //   //  background: `url(${b1s}) no-repeat 0/100% 100%`,
+  //   fontSize: "15px",
+  //   lineHeight: "20px",
+  //   border: "0",
+  //   transform: "translateX(-50%)",
+  // });
+  map.addOverlay(fwq_list_arr.value[indexx]);
+};
+
+//地图中点
+const goMapCenter = (point, zoom) => {
+  map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom);
+};
+const removeAllPolygon = (e) => {
+  let allOverlay = map.getOverlays();
+  for (let i = 0; i < allOverlay.length; i++) {
+    map.removeOverlay(allOverlay[i]);
+  }
+  // if (e == "fwq") {
+  //   addPolygonCounty();
+  //   nextTick(() => {
+  //     addJd();
+  //   });
+  // } else {
+  //   addPolygonCounty();
+  //   nextTick(() => {
+  //     addJd2();
+  //   });
+  // }
+};
+//选项设置
+//选中
+const chooseArr = ref([]);
+
+const choose = ref({
+  person: "",
+  bq: 9999,
+  fwq: 9999,
+  yaosu: 9999,
+});
+const changeRs = (id) => {
+  if (choose.value.person == id) {
+    choose.value.person = "";
+    jdm_number_arr.value.forEach((item, index) => {
+      map.removeOverlay(jdm_number_arr.value[index]);
+    });
+    console.log(1);
+    addJd();
+  } else {
+    console.log(2);
+    choose.value.person = id;
+    jdm_arr.value.forEach((item, index) => {
+      map.removeOverlay(jdm_arr.value[index]);
+    });
+    jdm_number_arr.value.forEach((item, index) => {
+      map.removeOverlay(jdm_number_arr.value[index]);
+    });
+    addJd2();
+  }
+};
+const changeRs2 = (id) => {
+  choose.value.person = id;
+  jdm_arr.value.forEach((item, index) => {
+    map.removeOverlay(jdm_arr.value[index]);
+  });
+  jdm_number_arr.value.forEach((item, index) => {
+    map.removeOverlay(jdm_number_arr.value[index]);
+  });
+  addJd2();
+};
+const changebq = (id) => {
+  if (choose.value.person == id) {
+    choose.value.person = "";
+    jdm_number_arr.value.forEach((item, index) => {
+      map.removeOverlay(jdm_number_arr.value[index]);
+    });
+    jdm_arr.value.forEach((item, index) => {
+      map.removeOverlay(jdm_arr.value[index]);
+    });
+    addJd();
+  } else {
+    choose.value.person = id;
+    jdm_arr.value.forEach((item, index) => {
+      map.removeOverlay(jdm_arr.value[index]);
+    });
+    jdm_number_arr.value.forEach((item, index) => {
+      map.removeOverlay(jdm_number_arr.value[index]);
+    });
+    // addJd2();
+    addJd();
+  }
+  // choose.value.person = id;
+};
+//基本公共服务圈点击
+const changeFwq = (id, list, center) => {
+  if (choose.value.fwq == id) {
+    // chooseArr.value = chooseArr.value.filter((item) => item !== "fwq");
+    choose.value.fwq = 9999;
+    console.log(11);
+    csh();
+    addPolygonCounty();
+    setTimeout(() => {
+      drawACircle("hide");
+    }, 500);
+    // 清空地图上所有的覆盖物
+    fwq_list_arr.value.forEach((item, index) => {
+      map.removeOverlay(fwq_list_arr.value[index]);
+    });
+  } else {
+    choose.value.fwq = id;
+    fwqList.value = list;
+    // 清空地图上所有的覆盖物
+    console.log(22);
+    map.clearOverlays();
+
+    setTimeout(() => {
+      // drawACircle();
+      addggfwq();
+      goMapCenter(center, 16);
+    }, 500);
+  }
+
+  // choose.value.fwq = id;
+  // removeAllPolygon("fwq");
+  // fwqList.value = list;
+  // goMapCenter(center, 17);
+  // fwqList.value.map((item) => {
+  //   createCustomOverlay(item);
+  // });
+};
+
+const changeys = (id) => {
+  choose.value.yaosu = id;
+};
+//人口数
+const personTotal = ref([
+  {
+    id: 0,
+    name: "总人口",
+    value: "1724114",
+    ages: "总人口",
+    age: "1000",
+  },
+  {
+    id: 1,
+    name: "0岁",
+    value: "26737",
+    ages: "0岁",
+    age: "1000",
+  },
+  {
+    id: 2,
+    name: "1岁",
+    value: "26737",
+    ages: "1岁",
+    age: "1000",
+  },
+  {
+    id: 3,
+    name: "2岁",
+    value: "26737",
+    ages: "2岁",
+    age: "1000",
+  },
+  {
+    id: 4,
+    name: "3岁",
+    value: "26737",
+    ages: "3岁",
+    age: "1000",
+  },
+
+  {
+    id: 5,
+    name: "4岁",
+    value: "26737",
+    ages: "4岁",
+    age: "1000",
+  },
+  {
+    id: 6,
+    name: "5岁",
+    value: "26737",
+    ages: "5岁",
+    age: "1000",
+  },
+  {
+    id: 7,
+    name: "6岁",
+    value: "26737",
+    ages: "6岁",
+    age: "1000",
+  },
+  {
+    id: 8,
+    name: "7岁",
+    value: "26737",
+    ages: "7岁",
+    age: "1000",
+  },
+  {
+    id: 9,
+    name: "8岁",
+    value: "26737",
+    ages: "8岁",
+    age: "1000",
+  },
+  {
+    id: 10,
+    name: "9岁",
+    value: "26737",
+    ages: "9岁",
+    age: "1000",
+  },
+  {
+    id: 11,
+    name: "10岁",
+    value: "26737",
+    ages: "10岁",
+    age: "1000",
+  },
+  {
+    id: 12,
+    name: "11岁",
+    value: "26737",
+    ages: "11岁",
+    age: "1000",
+  },
+  {
+    id: 13,
+    name: "12岁",
+    value: "26737",
+    ages: "12岁",
+    age: "1000",
+  },
+  {
+    id: 14,
+    name: "死亡总人口",
+    value: "5650",
+    ages: "死亡总人口",
+    age: "1000",
+  },
+]);
+
+//特殊标签
+const tsbqTotal = ref([
+  {
+    id: 10,
+    name: "退役军人",
+    value: "26737",
+  },
+  {
+    id: 20,
+    name: "留守",
+    value: "26737",
+  },
+  {
+    id: 30,
+    name: "困境儿童",
+    value: "26737",
+  },
+  {
+    id: 40,
+    name: "特困",
+    value: "26737",
+  },
+  {
+    id: 0,
+    name: "低边",
+    value: "26737",
+  },
+  {
+    id: 1,
+    name: "低保",
+    value: "26737",
+  },
+  {
+    id: 2,
+    name: "高血压",
+    value: "26737",
+  },
+  {
+    id: 3,
+    name: "糖尿病",
+    value: "26737",
+  },
+  {
+    id: 4,
+    name: "残疾人",
+    value: "26737",
+  },
+]);
+
+//基本公共服务圈
+const jbfwqTotal = ref([
+  {
+    id: 0,
+    name: "东华街道",
+    child: [
+      {
+        id: 100,
+        name: "上圩头村",
+      },
+      {
+        id: 200,
+        name: "官村",
+      },
+      {
+        id: 300,
+        name: "下杨",
+      },
+      {
+        id: 400,
+        name: "灵江社区",
+      },
+      {
+        id: 500,
+        name: "文成社区",
+      },
+      {
+        id: 600,
+        name: "子鸣社区",
+      },
+    ],
+  },
+  {
+    id: 1,
+    name: "社阳乡",
+    child: [
+      {
+        id: 11,
+        name: "社阳村",
+      },
+    ],
+  },
+  {
+    id: 2,
+    name: "小南海镇",
+    child: [
+      {
+        id: 21,
+        name: "茶圩里村",
+      },
+      {
+        id: 22,
+        name: "团石村",
+      },
+      {
+        id: 23,
+        name: "箬塘",
+      },
+    ],
+  },
+  {
+    id: 3,
+    name: "庙下乡",
+    child: [
+      {
+        id: 31,
+        name: "庙下村",
+      },
+    ],
+  },
+  {
+    id: 4,
+    name: "溪口镇",
+    child: [
+      {
+        id: 41,
+        name: "新溪社区",
+        center: [119.1845892, 28.8540481],
+        fwqList: [
+          {
+            name: "溪口幼儿园",
+            point: [119.1856806, 28.8509359],
+            bgColor: "#00b050",
+            img: fwqbg1,
+            img2: b2,
+            x: 33,
+            y: 0,
+            textColor: "#fff",
+
+            padding: "4px 8px 10px",
+          },
+          {
+            name: "衢州学院附属幼儿园",
+            point: [119.182056, 28.8566857],
+            bgColor: "#00b050",
+            img: fwqbg1,
+            img2: b2,
+            x: 55,
+            y: 0,
+            textColor: "#fff",
+            padding: "4px 8px 10px",
+          },
+          {
+            name: "溪口中银小学",
+            point: [119.1845353, 28.8584533],
+            bgColor: "#00b050",
+            img: fwqbg1,
+            img2: b2,
+            x: 38,
+            y: 0,
+            textColor: "#fff",
+            padding: "4px 8px 10px",
+          },
+          {
+            name: "溪口初中",
+            point: [119.180978, 28.8525691],
+            bgColor: "#00b050",
+            img: fwqbg1,
+            img2: b2,
+            x: 33,
+            y: 0,
+            textColor: "#fff",
+            padding: "4px 8px 10px",
+          },
+          {
+            name: "居家养老中心",
+            point: [119.186287, 28.8491049],
+            bgColor: "#f4c243",
+            img: fwqbg5,
+            img2: b1,
+            x: 38,
+            y: 0,
+            textColor: "#fff",
+            padding: "4px 8px 10px",
+          },
+          {
+            name: "共享食堂",
+            point: [119.184706, 28.8563179],
+            bgColor: "#f4c243",
+            img: fwqbg5,
+            img2: b1,
+            x: 33,
+            y: 0,
+            textColor: "#fff",
+            padding: "4px 8px 10px",
+          },
+          {
+            name: "老年活动中心",
+            point: [119.1839065, 28.8566106],
+            bgColor: "#f4c243",
+            img: fwqbg5,
+            img2: b1,
+            x: 38,
+            y: 0,
+            textColor: "#fff",
+            padding: "4px 8px 10px",
+          },
+          {
+            name: "残疾人之家",
+            point: [119.1862825, 28.8491207],
+            bgColor: "#f4c243",
+            img: fwqbg5,
+            img2: b1,
+            x: 35,
+            y: 0,
+            textColor: "#fff",
+            padding: "4px 8px 10px",
+          },
+          {
+            name: "智慧篮球场",
+            point: [119.1839873, 28.8560886],
+            bgColor: "#00b0f0",
+            img: fwqbg2,
+            img2: b3,
+            x: 34,
+            y: 50,
+            textColor: "#fff",
+            padding: "8px 8px 2px",
+          },
+          {
+            name: "慢行步道",
+            point: [119.1843107, 28.8510743],
+            bgColor: "#00b0f0",
+            img: fwqbg2,
+            img2: b3,
+            x: 26,
+            y: 50,
+            textColor: "#fff",
+            padding: "8px 8px 2px",
+          },
+          {
+            name: "文化礼堂",
+            point: [119.1845532, 28.8562072],
+            bgColor: "#a1ce63",
+            img: fwqbg6,
+            img2: b4,
+            x: 33,
+            y: 0,
+            textColor: "#79B72B",
+            padding: "4px 8px 10px",
+          },
+          {
+            name: "综合文化站",
+            point: [119.1845982, 28.8482348],
+            bgColor: "#a1ce63",
+            img: fwqbg6,
+            img2: b4,
+            x: 35,
+            y: 0,
+            textColor: "#79B72B",
+            padding: "4px 8px 10px",
+          },
+          {
+            name: "共享菜园",
+            point: [119.1834393, 28.8559858],
+            bgColor: "#a1ce63",
+            img: fwqbg6,
+            img2: b4,
+            x: 33,
+            y: 0,
+            textColor: "#79B72B",
+            padding: "4px 8px 2px",
+          },
+          {
+            name: "零工市场",
+            point: [119.1811487, 28.8614348],
+            bgColor: "#a1ce63",
+            img: fwqbg6,
+            img2: b4,
+            x: 33,
+            y: 0,
+            textColor: "#79B72B",
+            padding: "4px 8px 10px",
+          },
+          {
+            name: "溪口中心医院",
+            point: [119.1839334, 28.8516437],
+            bgColor: "#0070c0",
+            img: fwqbg3,
+            img2: b5,
+            x: 10,
+            y: 50,
+            textColor: "#fff",
+            padding: "8px 8px 2px",
+          },
+          {
+            name: "溪口菜市场",
+            point: [119.1848317, 28.8544673],
+            bgColor: "#184e32",
+            img: fwqbg4,
+            img2: b6,
+            x: -24,
+            y: 50,
+            textColor: "#fff",
+            padding: "8px 8px 2px",
+          },
+          {
+            name: "大型超市",
+            point: [119.1845892, 28.8540481],
+            bgColor: "#184e32",
+            img: fwqbg4,
+            img2: b6,
+            x: -24,
+            y: 50,
+            textColor: "#fff",
+            padding: "8px 8px 2px",
+          },
+          {
+            name: "智慧停车场",
+            point: [119.1865654, 28.8555824],
+            bgColor: "#184e32",
+            img: fwqbg4,
+            img2: b6,
+            x: -28,
+            y: 50,
+            textColor: "#fff",
+            padding: "8px 8px 2px",
+          },
+          {
+            name: "溪口镇便民服务中心",
+            point: [119.1838436, 28.8565473],
+            bgColor: "#184e32",
+            img: fwqbg4,
+            img2: b6,
+            x: -40,
+            y: 50,
+            textColor: "#fff",
+            padding: "8px 8px 2px",
+          },
+        ],
+      },
+      {
+        id: 42,
+        name: "石角村",
+      },
+      {
+        id: 43,
+        name: "红罗村",
+      },
+    ],
+  },
+  {
+    id: 5,
+    name: "罗家乡",
+    child: [
+      {
+        id: 51,
+        name: "罗家村",
+      },
+    ],
+  },
+  {
+    id: 6,
+    name: "模环乡",
+    child: [
+      {
+        id: 61,
+        name: "模环村",
+      },
+      {
+        id: 62,
+        name: "金星社区",
+      },
+    ],
+  },
+  {
+    id: 7,
+    name: "横山镇",
+    child: [
+      {
+        id: 71,
+        name: "志棠村",
+      },
+      {
+        id: 72,
+        name: "横山集镇",
+      },
+      {
+        id: 73,
+        name: "后徐",
+      },
+    ],
+  },
+  {
+    id: 8,
+    name: "石佛乡",
+    child: [
+      {
+        id: 81,
+        name: "三和村",
+      },
+      {
+        id: 82,
+        name: "石佛村",
+      },
+      {
+        id: 83,
+        name: "三门源村",
+      },
+    ],
+  },
+  {
+    id: 9,
+    name: "詹家镇",
+    child: [
+      {
+        id: 91,
+        name: "芝江",
+      },
+      {
+        id: 92,
+        name: "马叶",
+      },
+      {
+        id: 93,
+        name: "詹家",
+      },
+    ],
+  },
+  {
+    id: 10,
+    name: "龙洲街道",
+    child: [
+      {
+        id: 101,
+        name: "官潭村",
+      },
+      {
+        id: 102,
+        name: "田铺村",
+      },
+      {
+        id: 103,
+        name: "半爿月村",
+      },
+      {
+        id: 104,
+        name: "寺后村",
+      },
+      {
+        id: 105,
+        name: "清廉社区",
+      },
+      {
+        id: 106,
+        name: "莲湖社区",
+      },
+      {
+        id: 107,
+        name: "河西街社区",
+      },
+      {
+        id: 108,
+        name: "阳光社区",
+      },
+      {
+        id: 109,
+        name: "翠光社区",
+      },
+    ],
+  },
+  {
+    id: 11,
+    name: "湖镇镇",
+    child: [
+      {
+        id: 111,
+        name: "新光村",
+      },
+      {
+        id: 112,
+        name: "七都村",
+      },
+      {
+        id: 113,
+        name: "下库村",
+      },
+      {
+        id: 114,
+        name: "下田畈村",
+      },
+    ],
+  },
+  {
+    id: 12,
+    name: "塔石镇",
+    child: [
+      {
+        id: 121,
+        name: "塔石",
+      },
+      {
+        id: 122,
+        name: "泽随",
+      },
+      {
+        id: 123,
+        name: "雅村",
+      },
+    ],
+  },
+  {
+    id: 13,
+    name: "沐尘畲族乡",
+    child: [
+      {
+        id: 131,
+        name: "沐尘村",
+      },
+    ],
+  },
+  {
+    id: 14,
+    name: "大街乡",
+    child: [
+      {
+        id: 141,
+        name: "大街村",
+      },
+    ],
+  },
+]); //存放地图上服务圈数据
+const fwqList = ref([]);
+//资源要素
+const yaosuTotal = ref([
+  {
+    id: 0,
+    name: "体育场所",
+    img: j0,
+    wz: false,
+  },
+
+  {
+    id: 1,
+    name: "幼儿园",
+    img: j1,
+    wz: false,
+  },
+  {
+    id: 2,
+    name: "小学",
+    img: j2,
+    wz: false,
+  },
+  {
+    id: 3,
+    name: "初中",
+    img: j3,
+    wz: false,
+  },
+  {
+    id: 4,
+    name: "高中",
+    img: j4,
+    wz: false,
+  },
+  {
+    id: 5,
+    name: "医院",
+    img: j5,
+    wz: false,
+  },
+  {
+    id: 6,
+    name: "南孔书院",
+    img: j6,
+    wz: false,
+  },
+  {
+    id: 7,
+    name: "养老机构",
+    img: j7,
+    wz: false,
+  },
+  {
+    id: 8,
+    name: "汽车充电桩",
+    img: j8,
+    wz: true,
+  },
+  {
+    id: 9,
+    name: "卫生服务中心",
+    img: j9,
+    wz: true,
+  },
+  {
+    id: 10,
+    name: "AED",
+    img: j10,
+    wz: true,
+  },
+]);
+const buten = async (item) => {
+  getData(item.id, item.age);
+  getDatas("溪口镇", item.age);
+};
+const buten2 = async (item) => {
+  // getDataBq(item.id, item.age);
+  // getDatas("溪口镇", item.age);
+  // map.removeOverlay(marker1);
+  getDataBqs(cfJd.value, cfCs.value, item.id);
+};
+//获取人口数
+const getData = async (i, e) => {
+  await http
+    .get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`)
+    .then((res) => {
+      if (res.code == 200) {
+        if (cfJd.value == "") {
+          personTotal.value = [
+            {
+              id: "0",
+              ages: "总人口",
+              age: "",
+              value: "res.data.total",
+            },
+            {
+              id: "6666",
+              name: "死亡总人口",
+              value: "5650",
+              ages: "死亡总人口",
+              age: "1000",
+            },
+          ];
+          personTotal.value[0].rksl = res.data.total;
+          personTotal.value[0].ages = "总人口";
+          personTotal.value[1].rksl = res.data.swrs;
+          personTotal.value[1].ages = "死亡";
+          res.data.age.forEach((item, index) => {
+            personTotal.value.push({
+              id: index + 1,
+              rksl: item.rksl,
+              age: item.age + "",
+              ages: item.age + "岁",
+            });
+          });
+        }
+        mapTownCount.map((item) => {
+          // item.number = 0;
+          res.data.townWwrs.map((items) => {
+            if (items.xzjd == item.name) {
+              item.swrs = items.swrs;
+            }
+          });
+        });
+        mapTownCount.map((item) => {
+          item.number = 0;
+          res.data.town.map((items) => {
+            if (items.town == item.name) {
+              item.number = items.rksl;
+            }
+          });
+        });
+      }
+    });
+  if (i) {
+    changeRs(i);
+  }
+};
+const getDatas = async (e, i) => {
+  await http
+    .get(`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}`)
+    .then((res) => {
+      if (res.code == 200) {
+        if (cfCs.value != "") {
+        } else if (cfJd.value !== "") {
+          personTotal.value = [
+            {
+              id: "0",
+              ages: "总人口",
+              age: "",
+              value: "res.data.total",
+            },
+            {
+              id: "6666",
+              name: "死亡总人口",
+              value: "5650",
+              ages: "死亡总人口",
+              age: "1000",
+            },
+          ];
+          personTotal.value[0].rksl = res.data.total;
+          personTotal.value[0].ages = "总人口";
+          personTotal.value[1].rksl = res.data.swrs;
+          personTotal.value[1].ages = "死亡";
+          res.data.age.forEach((item, index) => {
+            personTotal.value.push({
+              id: index + 1,
+              rksl: item.rksl,
+              age: item.age + "",
+              ages: item.age + "岁",
+            });
+          });
+        }
+        // res.data.committee.map((item) => {
+        //   xkzCenter.map((items) => {
+        //     if (item.committee == items.name) {
+        //       items.number = item.rksl;
+        //     }
+        //   });
+        // });
+        xkzCenter.map((item) => {
+          // item.number = 0;
+          res.data.committeeSwrs.map((items) => {
+            if (items.csq == item.name) {
+              item.swrs = items.swrs;
+            }
+          });
+        });
+
+        xkzCenter.map((item) => {
+          item.number = 0;
+          res.data.committee.map((items) => {
+            if (items.committee == item.name) {
+              item.number = items.rksl;
+            }
+          });
+        });
+
+        cs_name_arr.value.forEach((item, index) => {
+          map.removeOverlay(cs_name_arr.value[index]);
+        });
+        cs_number_name_arr.value.forEach((item, index) => {
+          map.removeOverlay(cs_number_name_arr.value[index]);
+        });
+
+        if (title_choose.value == "") {
+        } else {
+          if (sfdd.value) {
+            if (choose.value.person == "") {
+              cs_dd_arr.value.forEach((item, index) => {
+                map.removeOverlay(cs_dd_arr.value[index]);
+              });
+              cs_dd_arr.value = [...xuanzhongCs.value];
+              cs_dd_arr.value.map((item, index) => {
+                DGcreateCs(item, index);
+              });
+            } else {
+              cs_dd_arr.value.forEach((item, index) => {
+                map.removeOverlay(cs_dd_arr.value[index]);
+              });
+              cs_dd_arr.value = [...xuanzhongCs.value];
+              cs_dd_arr.value.map((item, index) => {
+                DGcreateCs2(item, index);
+              });
+            }
+          } else {
+            console.log("hhhhh", xkzCenter);
+            if (choose.value.person == "") {
+              addCs();
+            } else {
+              addCs2();
+            }
+          }
+        }
+      }
+    });
+};
+const getDatas2 = async (e, i, cs) => {
+  if (i == "cjr" || i == "dibian" || i == "db" || i == "gxy" || i == "tnb" || i == "tyjr" || i == "kjer") {
+    i = ''
+  }
+  await http
+    .get(
+      `/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}&committee=${cs}`
+    )
+    .then((res) => {
+      if (res.code == 200) {
+        personTotal.value = [
+          {
+            id: "0",
+            ages: "总人口",
+            age: "",
+            value: "res.data.total",
+          },
+          {
+            id: "6666",
+            name: "死亡总人口",
+            value: "5650",
+            ages: "死亡总人口",
+            age: "1000",
+          },
+        ];
+        personTotal.value[0].rksl = res.data.total;
+        personTotal.value[0].ages = "总人口";
+        personTotal.value[1].rksl = res.data.swrs;
+        personTotal.value[1].ages = "死亡";
+        res.data.age.forEach((item, index) => {
+          personTotal.value.push({
+            id: index + 1,
+            rksl: item.rksl,
+            age: item.age + "",
+            ages: item.age + "岁",
+          });
+        });
+        xkzCenter.map((item) => {
+          item.swrs = 0;
+          res.data.committeeSwrs.map((items) => {
+            if (items.csq == item.name) {
+              item.swrs = items.swrs;
+            }
+          });
+        });
+      }
+    });
+};
+//获取特殊标签
+const getDataBq = async (jd, cs) => {
+  await http
+    .get(`/api/ggfwyth/ysyzt/getTsbq?csq=${cs || ""}&xzjd=${jd || ""}`)
+    .then((res) => {
+      if (res.code == 200) {
+        tsbqTotal.value.length = 0;
+        for (let name in res.data) {
+          let idd = "";
+          for (let v = 0; v < tsbq_id_total.value.length; v++) {
+            if (tsbq_id_total.value[v].name == name) {
+              idd = tsbq_id_total.value[v].id;
+            }
+          }
+          tsbqTotal.value.push({
+            id: idd,
+            name: name,
+            rksl: res.data[name],
+          });
+        }
+      }
+    });
+};
+const getDataBqs = async (jd, cs, bq) => {
+  let data = {};
+  let vv = 0;
+  if (cs == "" && jd == "") {
+    data = {
+      tsbq: bq,
+    };
+    vv = 1;
+  } else if (cs == "") {
+    data = {
+      xzjd: jd,
+      tsbq: bq,
+
+    };
+    vv = 2;
+  } else {
+    data = {
+      xzjd: jd,
+      tsbq: bq,
+      csq: cs,
+    };
+    vv = 3;
+  }
+  await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => {
+    if (res.code == 200) {
+      mapTownCount.map((item) => {
+        item.numbers = 0;
+        res.data.map((items) => {
+          if (items.xzjd == item.name) {
+            item.numbers = items.rs;
+          }
+        });
+      });
+      console.log(mapTownCount, 'mapTownCount');
+      changeRs2(bq);
+      if (jd) {
+        addCs2();
+      }
+
+    }
+  });
+};
+const getDataBqs2 = async (jd, cs, bq) => {
+  let data = {};
+  let vv = 0;
+  if (cs == "" && jd == "") {
+    data = {
+      tsbq: bq,
+    };
+    vv = 1;
+  } else if (cs == "") {
+    data = {
+      xzjd: jd,
+      tsbq: bq,
+    };
+    vv = 2;
+  } else {
+    data = {
+      xzjd: jd,
+      tsbq: bq,
+      csq: cs,
+    };
+    vv = 3;
+  }
+  await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => {
+    if (res.code == 200) {
+      // if (cfJd.value == "") {
+      // res.data.forEach((item, index) => {
+      //   tsbqTotal.value.push({
+      //     id: index + 1,
+      //     rksl: item.rksl,
+      //     age: item.age + "",
+      //     ages: item.age + "岁",
+      //   });
+      // });
+      // }
+      xkzCenter.map((item) => {
+        item.numbers = 0;
+        res.data.map((items) => {
+          if (items.csq == item.name) {
+            item.numbers = items.rs;
+          }
+        });
+      });
+      console.log(mapTownCount);
+      changeRs2(bq);
+      addCs2();
+    }
+  });
+};
+const reset_font = () => {
+  let width = document.documentElement.clientWidth || document.body.clientWidth;
+  let height =
+    document.documentElement.clientHeight || document.body.clientHeight;
+  document.querySelector(".header_content").style.transformOrigin = "top left";
+  document.querySelector(".header_content").style.transform =
+    "scale(" + width / 1920 + "," + height / 1080 + ")";
+  if (document.querySelector(".left")) {
+    document.querySelector(".left").style.transformOrigin = "bottom left";
+    document.querySelector(".left").style.transform =
+      "scale(" + width / 1920 + "," + height / 1080 + ")";
+    document.querySelector(".right").style.transformOrigin = "bottom right";
+    document.querySelector(".right").style.transform =
+      "scale(" + width / 1920 + "," + height / 1080 + ")";
+  }
+};
+// function initializeMap() {
+//       map = new BMapGL.Map("allmap");
+//       var point = new BMapGL.Point(119.175728, 28.846981);
+//       map.centerAndZoom(point, 16);
+//       map.enableScrollWheelZoom(true);
+
+//       // Initialize circle but don't add it to map yet
+//       circle = new BMapGL.Circle(point, 900, {
+//         strokeColor: "yellow",
+//         strokeWeight: 2,
+//         strokeOpacity: 0.8,
+//         fillOpacity: 0.1,
+//         fillColor: "yellow",
+//         strokeStyle: "dashed",
+//         zIndex: 99,
+//       });
+//     }
+
+// window.onload = initializeMap;
+onMounted(() => {
+  reset_font();
+  initMap();
+  getData();
+  getDataBq();
+  BMAP();
+});
+</script>
+
+<style lang="scss" scoped>
+::v-deep .anchorBL {
+  display: none;
+}
+
+.module {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  margin-top: 112px;
+}
+
+#id {
+  z-index: 10;
+}
+
+//左侧弹框
+.left {
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 520px;
+  height: 960px;
+  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%),
+    radial-gradient(128% 99% at 100% 46%,
+      rgba(0, 48, 125, 0.29) 0%,
+      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;
+  display: flex;
+  flex-direction: column;
+  z-index: 12;
+  overflow: hidden;
+
+  //人口数
+  .lyx {
+    .content {
+      box-sizing: border-box;
+      margin-top: 20px;
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: space-between;
+      color: #ffffff;
+      height: 450px;
+      overflow: auto;
+
+      .content_item {
+        cursor: pointer;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 24px;
+        width: 48%;
+        height: 57px;
+        background-image: url(@/assets/images/map/unchoose.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        margin-bottom: 12px;
+      }
+
+      .content_item:first-child {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 24px;
+        width: 100%;
+        height: 57px;
+        background-image: url(@/assets/images/map/unchoose.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        margin-bottom: 12px;
+      }
+
+      .content_item:nth-child(2) {
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 24px;
+        width: 100%;
+        height: 57px;
+        background-image: url(@/assets/images/map/unchoose.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        margin-bottom: 12px;
+      }
+
+      .content_item_name {
+        position: relative;
+      }
+
+      .content_item_name::before {
+        content: "";
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background: #29ffc1;
+        border: 3px solid rgba(0, 255, 189, 0.31);
+        border-radius: 6px;
+        top: 7.5px;
+        left: -13px;
+      }
+
+      .choose {
+        background-image: url(@/assets/images/map/choose.png) !important;
+        background-repeat: no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+    }
+
+    .content::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  //特殊标签
+  .tsbq {
+    margin-top: 40px;
+
+    .content {
+      box-sizing: border-box;
+      margin-top: 20px;
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: space-between;
+      color: #ffffff;
+      height: 220px;
+      overflow: auto;
+
+      .content_item {
+        cursor: pointer;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 24px;
+        width: 48%;
+        height: 57px;
+        background-image: url(@/assets/images/map/unchoose.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        margin-bottom: 12px;
+      }
+
+      // .content_item:last-child {
+      //   box-sizing: border-box;
+      //   display: flex;
+      //   align-items: center;
+      //   justify-content: space-between;
+      //   padding: 24px;
+      //   width: 100%;
+      //   height: 57px;
+      //   background-image: url(@/assets/images/map/unchoose.png);
+      //   background-repeat: no-repeat;
+      //   background-size: 100% 100%;
+      //   margin-bottom: 12px;
+      // }
+
+      .content_item_name {
+        position: relative;
+      }
+
+      .content_item_name::before {
+        content: "";
+        position: absolute;
+        width: 3px;
+        height: 3px;
+        background: rgb(255, 226, 41);
+        border: 3px solid rgba(255, 226, 41, 0.31);
+        border-radius: 6px;
+        top: 7.5px;
+        left: -13px;
+      }
+
+      .choose {
+        background-image: url(@/assets/images/map/choose.png) !important;
+        background-repeat: no-repeat !important;
+        background-size: 100% 100% !important;
+      }
+    }
+
+    .content::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+//右侧弹框
+.right {
+  box-sizing: border-box;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 520px;
+  height: 960px;
+  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%),
+    radial-gradient(128% 99% at 100% 46%,
+      rgba(0, 48, 125, 0.29) 0%,
+      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;
+  display: flex;
+  flex-direction: column;
+  z-index: 12;
+  overflow: hidden;
+
+  .jbggfwq {
+    .jbggfwq_content {
+      height: 550px;
+      overflow: auto;
+      margin-top: 15px;
+      display: flex;
+      flex-direction: column;
+
+      .jbggfwq_content_item {
+        margin-bottom: 5px;
+        display: flex;
+        // align-items: center;
+        color: #ffffff;
+
+        .jbggfwq_content_item_left {
+          margin-right: 10px;
+          width: 80px;
+          height: 48px;
+          line-height: 48px;
+        }
+
+        .jbggfwq_content_item_right {
+          width: 370px;
+          display: flex;
+          flex-flow: row wrap;
+          border-radius: 6px;
+          overflow: hidden;
+
+          .jbggfwq_content_item_right_item {
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-sizing: border-box;
+            width: 92px;
+            height: 48px;
+            font-weight: 500;
+            text-align: center;
+            font-size: 16px;
+            line-height: 28px;
+            background: rgba(124, 151, 180, 0.8);
+            // padding: 10px;
+            margin-bottom: 4px;
+            position: relative;
+            /* 必须设置 position 属性以便伪元素定位 */
+          }
+
+          .jbggfwq_content_item_right_item::after {
+            content: "";
+            display: block;
+            width: 1px;
+            height: 18px;
+            background-color: #fff;
+            position: absolute;
+            top: 14px;
+            right: 0px;
+          }
+
+          :nth-child(4n).jbggfwq_content_item_right_item::after {
+            opacity: 0;
+          }
+
+          :last-child.jbggfwq_content_item_right_item::after {
+            opacity: 0;
+          }
+
+          .choose {
+            background-image: url(@/assets/images/map/choose.png);
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+      }
+    }
+
+    .jbggfwq_content::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .zyys {
+    .zyys_content {
+      margin-top: 20px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      flex-flow: row wrap;
+
+      .zyys_content_item {
+        cursor: pointer;
+        margin-bottom: 15px;
+        color: #ffffff;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 110px;
+        height: 42px;
+        background: rgba(124, 151, 180, 0.8);
+
+        .zyys_content_item_left {
+          width: 18px;
+          height: 18px;
+          margin-right: 3px;
+        }
+
+        .zyys_content_item_right {
+          font-weight: 500;
+          font-size: 16px;
+        }
+      }
+
+      .wz {
+        width: 150px;
+      }
+
+      .choose {
+        background-image: url(@/assets/images/map/choose.png);
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+
+.title {
+  .title_name {
+    cursor: pointer;
+    display: flex;
+    font-family: YouSheBiaoTiHei;
+    font-size: 34px;
+    font-weight: 900;
+    // line-height: 44px;
+    letter-spacing: 4px;
+    margin-bottom: 15px;
+    background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #00ffff 100%);
+    /* 使文字没有背景颜色的背景 */
+    background-clip: text;
+    /* 为了兼容性，添加渐变背景到IE */
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    span {
+      display: block;
+      font-family: YouSheBiaoTiHei;
+      font-size: 34px;
+      font-weight: 900;
+      // line-height: 44px;
+      letter-spacing: 4px;
+      margin-bottom: 15px;
+      background: linear-gradient(180deg,
+          #ffffff 0%,
+          #ffffff 40%,
+          #00ffff 100%);
+      /* 使文字没有背景颜色的背景 */
+      background-clip: text;
+      /* 为了兼容性，添加渐变背景到IE */
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+
+  .title_line {
+    height: 4px;
+    width: 100%;
+    border-top: 1px solid #ffffff;
+    border-bottom: 2px dashed #ffffff;
+  }
+}
+</style>
diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue
index 837dcc6..f9e29e4 100644
--- a/src/view/sy_map.vue
+++ b/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 }"
-              @click="buten(item)" :key="index">
+            <div
+              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 }"
-              @click="buten2(item)" :key="index">
+            <div
+              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"
-                  :class="{ choose: itemm.id == choose.fwq }" @click="changeFwq(itemm.id, itemm.fwqList, itemm.center)">
+                <div
+                  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"
-              :class="{ choose: item.id == choose.yaosu, wz: item.wz == true }" @click="changeys(item.id)" :key="index">
+            <div
+              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") {
-          console.log(1, '溪口镇');
-          getDataBqs2(cfJd.value, cfCs.value, '');
+        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"
+        ) {
+          console.log(1, "溪口镇");
+          getDataBqs2(cfJd.value, cfCs.value, "");
         } else {
-          console.log(2, '溪口镇');
-
-          getDatas2('溪口镇', choose.value.person, cfCs.value);
+          console.log(2, "溪口镇");
 
+          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") {
-    i = ''
+  if (
+    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%),
-    radial-gradient(128% 99% at 100% 46%,
+      rgba(0, 60, 131, 0.74) 100%
+    ),
+    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%),
-    radial-gradient(128% 99% at 100% 46%,
+      rgba(0, 60, 131, 0.74) 100%
+    ),
+    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,
-          #ffffff 0%,
-          #ffffff 40%,
-          #00ffff 100%);
+      background: linear-gradient(
+        180deg,
+        #ffffff 0%,
+        #ffffff 40%,
+        #00ffff 100%
+      );
       /* 使文字没有背景颜色的背景 */
       background-clip: text;
       /* 为了兼容性，添加渐变背景到IE */