gx

src/view/sy_map.vue

@@ -5,7 +5,9 @@
       <div class="left" style="width: 517px">
         <div class="lyx">
           <div class="title">
-            <div class="title_name">{{ title_choose }}</div>
+            <div class="title_name">
+              <span @click="csh()">龙游县</span>{{ title_choose }}
+            </div>
             <div class="title_line"></div>
           </div>
           <div class="content">
@@ -138,9 +140,12 @@ 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 jrcs=ref(false)
+const cfjiedao = ref("");
-const title_choose = ref("龙游县");
+const jrcs = ref(false);
+const title_choose = ref("");
 //村社颜色列表
 const colorList = [
   {
@@ -171,8 +176,30 @@ const colorList = [
     bg: "RGBA(27, 91, 55, 1)",
   },
 ];
+//点击龙游县初始化
+const csh = () => {
+  title_choose.value = "";
+  cfjiedao.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]);
+  });
+  goMapCenter([119.178783, 29.034583], 11);
+};
 //选中社区
-
+const chooseCsList = ref([]);
+const unChooseList = ref([]);
 //中心点坐标
 const center_now = ref([]);
 const center_center = ref([119.178783, 29.034583]);
@@ -411,16 +438,22 @@ const addPolygonCounty = () => {
       map.addOverlay(polygon);
       polygon.addEventListener("click", () => {
         console.log(item.name);
-        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 !== "溪口镇"){
+        //   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 == cfjiedao.value) {
+          console.log(2222);
+        } else {
+          console.log(111);
+          cfjiedao.value = item.name;
           let jdCenter = [];
           if (item.name == "溪口镇") {
             if (!title_choose.value.includes("溪口镇")) {
@@ -437,15 +470,23 @@ const addPolygonCounty = () => {
             addCs();
             goMapCenter(jdCenter, 13);
           } else {
-            title_choose.value = "龙游县";
+            title_choose.value = "";
             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_choose_arr.value.forEach((item, index) => {
+              map.removeOverlay(cs_choose_arr.value[index]);
+            });
+            cs_un_choose_arr.value.forEach((item, index) => {
+              map.removeOverlay(cs_un_choose_arr.value[index]);
+            });
           }
         }
+
+        // }
       });
     }
   });
@@ -510,40 +551,97 @@ const addPolygonCountyCs = () => {
       map.addOverlay(cs_qk_arr.value[index]);
       cs_qk_arr.value[index].addEventListener("click", () => {
         console.log(item.name);
-        // console.log(111,xkzDk);
+        console.log(111, xkzDk);
-        // xkzDk.forEach((itemm,indexx)=>{
+        chooseCsList.value.length = 0;
-        //   if(itemm.name==item.name){
+        unChooseList.value.length = 0;
-
+        xkzDk.forEach((itemm, indexx) => {
-        //   }
+          if (itemm.name == item.name) {
-        // })
+            chooseCsList.value.push(itemm);
-        // let jdCenter = [];
+          } else {
-        // if (item.name == "溪口镇") {
+            unChooseList.value.push(itemm);
-        //   if (!title_choose.value.includes("溪口镇")) {
+          }
-        //     title_choose.value = title_choose.value + `>${item.name}`;
+        });
-        //   }
+        title_choose.value = title_choose.value + `>${item.name}`;
-        //   loadCs();
+        cs_qk_arr.value.forEach((item, index) => {
-        //   addPolygonCountyCs();
+          map.removeOverlay(cs_qk_arr.value[index]);
-        //   mapTownCount.map((item) => {
+        });
-        //     if (item.name == "溪口镇") {
+        console.log("chooseCsList.value", chooseCsList.value);
-        //       jdCenter = item.center;
+        console.log("unChooseList.value", unChooseList.value);
-        //     }
+        addCsChoose();
-        //   });
+        addCsUnChoose();
-        //   addCs();
+      });
-        //   goMapCenter(jdCenter, 13);
+    }
-        // } else {
+  });
-        //   title_choose.value = "龙游县";
+};
-        //   cs_qk_arr.value.forEach((item, index) => {
+//添加选中社区
-        //     map.removeOverlay(cs_qk_arr.value[index]);
+const addCsChoose = () => {
-        //   });
+  chooseCsList.value.map((item, index) => {
-        //   cs_name_arr.value.forEach((item, index) => {
+    console.log("item", item);
-        //     map.removeOverlay(cs_name_arr.value[index]);
+    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", () => {
+        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]);
+        });
+        title_choose.value = title_choose.value.slice(0, -4);
+        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}`;
+        cs_un_choose_arr.value.forEach((item, index) => {
+          map.removeOverlay(cs_qk_arr.value[index]);
+        });
+        addCsChoose();
+        addCsUnChoose();
       });
     }
   });
 };
-
 // 添加地图上的街道名
 
 const createCustomOverlayJd = (polygon, indexx) => {
@@ -2052,6 +2150,21 @@ onMounted(() => {
 
 .title {
   .title_name {
+    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;
@@ -2065,6 +2178,7 @@ onMounted(() => {
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     }
+  }
 
   .title_line {
     height: 4px;