gx

src/view/home.vue

@@ -7,15 +7,7 @@
       <Header />
   
         <router-view />
-  
+
-      <!-- <router-view v-slot="{ Component }">
-        <keep-alive>
-          <component :is="Component" />
-        </keep-alive>
-      </router-view> -->
-      <!-- <keep-alive :max="1" :include="['首页地图']">
-        <router-view />
-      </keep-alive> -->
     </div>
   </div>
 </template>

src/view/sy_mapcopy.vue

@@ -119,15 +119,15 @@
               v-for="(item, index) in jbfwqTotal"
               :key="index"
             >
-              <div class="jbggfwq_content_item_left">{{ item.name }}</div>
+              <div class="jbggfwq_content_item_left">{{ item.xzjd }}</div>
               <div class="jbggfwq_content_item_right">
                 <div
                   class="jbggfwq_content_item_right_item"
-                  v-for="itemm in item.child"
+                  v-for="itemm in item.jcs"
-                  :class="{ choose: itemm.name == choose.fwq }"
+                  :class="{ choose: itemm.jc == choose.fwq }"
-                  @click="changeFwq(itemm.name, item.name, itemm.name)"
+                  @click="changeFwq(itemm.jc, item.xzjd, itemm.jc)"
                 >
-                  {{ itemm.name }}
+                  {{ itemm.jc }}
                 </div>
               </div>
             </div>
@@ -141,8 +141,11 @@
             <div
               class="zyys_content_item"
               v-for="(item, index) in yaosuTotal"
-              :class="{ choose: item.id == choose.yaosu, wz: item.wz == true }"
+              :class="{
-              @click="changeys(item.id)"
+                choose: yaosuList.includes(item.name),
+                wz: item.wz == true,
+              }"
+              @click="changeys(item.name)"
               :key="index"
             >
               <img :src="item.img" class="zyys_content_item_left" />
@@ -959,6 +962,24 @@ const yaosuTotal = ref([
     wz: true,
   },
 ]);
+//选中的资源要素
+const yaosuList = ref([]);
+//选中资源要素坐标
+const yaosuIcon = ref({
+  体育场所: {
+    sj: [],
+  },
+  幼儿园: { sj: [] },
+  小学: { sj: [] },
+  初中: { sj: [] },
+  高中: { sj: [] },
+  医院: { sj: [] },
+  南孔书院: { sj: [] },
+  养老机构: { sj: [] },
+  汽车充电桩: { sj: [] },
+  卫生服务中心: { sj: [] },
+  AED: { sj: [] },
+});
 // 鼠标点击添加点位
 let currentMarker = null; // 用于保存当前标记的引用
 // 详情弹框
@@ -1789,9 +1810,58 @@ const changeRs2 = (id) => {
     addJd2();
   }
 };
-const changeys = (id) => {
+//----------资源要素------------
-  choose.value.yaosu = id;
+//判断数组中是否包含某个字符
+const removeCharFromArray = (arr, charToRemove) => {
+  // 如果数组包含该字符，则过滤掉它
+  if (arr.includes(charToRemove)) {
+    return arr.filter((ch) => ch !== charToRemove);
+  } else {
+    arr.push(charToRemove);
+    return arr;
+  }
 };
+const changeys = (name) => {
+  if (yaosuList.value.includes(name)) {
+    yaosuList.value = yaosuList.value.filter((ch) => ch !== name);
+  } else {
+    yaosuList.value.push(name);
+    yaosuIcon.value.forEach((item,index)=>{
+      createZyys()
+    })
+  }
+  // yaosuList.value = removeCharFromArray(yaosuList.value, name);
+};
+// 添加资源要素的图标
+const createZyys = (polygon, indexx) => {
+  // data.fwqCoordinates = polygon.point;
+  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);
+    let img2 = document.createElement("img");
+    img2.style.width = "20px";
+    img2.style.height = "20px";
+    img2.src = this.properties.imgSrc2;
+    content.appendChild(img2);
+    return content;
+  }
+  fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
+    point: new BMapGL.Point(...polygon.point),
+    opacity: 0.5,
+    offsetY: -10,
+    properties: {
+      imgSrc2: polygon.img2,
+      type: "customOverlay",
+    },
+  });
+  map.addOverlay(fwq_list_arr.value[indexx]);
+};
+//----------资源要素------------
 //点击街道，回到街道
 const to_jd = (item_name) => {
   clear();
@@ -1942,18 +2012,20 @@ const person_detail = (age) => {
 const getFwq = () => {
   http.get(`/api/ggfwyth/ysyzt/listXzjdAndCsq`).then((res) => {
     if (res.code == 200) {
-      res.data.forEach((item,index) => {
+         jbfwqTotal.value=res.data;
-        jbfwqTotal.value.push({
+      // res.data.forEach((item, index) => {
-          name:item.xzjd,
+     
-          child:[],
+        // jbfwqTotal.value.push({
-        })
+        //   name: item.xzjd,
-        item.csqs.forEach((item2) => {
+        //   child: [],
-          jbfwqTotal.value[index].child.push({
+        // });
-            name:item2.csq,
+        // item.csqs.forEach((item2) => {
-            jc:item2.jc
+        //   jbfwqTotal.value[index].child.push({
-          })
+        //     name: item2.csq,
-        });
+        //     jc: item2.jc,
-      });
+        //   });
+        // });
+      // });
     }
   });
 };
@@ -1994,7 +2066,7 @@ const changeFwq = async (id, name, names) => {
 const getServiceCircle = async (communityName, townName) => {
   try {
     const response = await http.get(
-      `/api/ggfwyth/ysyzt/zyysxx?csq=${communityName}&xzjd=${townName}`
+      `/api/ggfwyth/ysyzt/zyysxx?jc=${communityName}&xzjd=${townName}`
     );
     if (response.code === 200) {
       updateFwqList(response.data, townName, communityName);
@@ -2250,10 +2322,6 @@ const addPolygonCounty = () => {
         // townName.value = item.name;
         if (item.name == cfJd.value) {
         } else {
-          // cs_qk_arr.value.forEach((item, index) => {
-          //   map.removeOverlay(cs_qk_arr.value[index]);
-          // });
-          // cs_qk_arr.value.length=0;
           clear();
           xkzDk.length = 0;
           cfJd.value = item.name;
@@ -2384,8 +2452,8 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
     content.style.flexDirection = "column";
     content.style.alignItems = "center";
     content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
-    content.style.height = "30px";
+    content.style.height = "20px";
-    content.style.width = "30px";
+    content.style.width = "20px";
     var div = document.createElement("div");
     div.style.color = "#333";
     div.style.whiteSpace = "nowrap";
@@ -2448,7 +2516,7 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
   jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
     point: new BMapGL.Point(...polygon.center),
     opacity: 0.5,
-    offsetY: 0,
+    offsetY: -10,
     properties: {
       title: polygon.name,
       number: polygon[`${num}`],
@@ -2762,7 +2830,7 @@ const createCs = (polygon, indexx) => {
   cs_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
     point: new BMapGL.Point(...polygon.center),
     opacity: 0.5,
-    offsetY: 0,
+    offsetY: -10,
     properties: {
       title: polygon.name,
       imgSrc2: dwd,
@@ -2838,7 +2906,7 @@ const createCs2 = (polygon, indexx) => {
   cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
     point: new BMapGL.Point(...polygon.center),
     opacity: 0.5,
-    offsetY: 0,
+    offsetY: -10,
     properties: {
       title: polygon.name,
       number: polygon[`${num}`],
@@ -2907,7 +2975,7 @@ const DGcreateCs = (polygon, indexx) => {
   cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
     point: new BMapGL.Point(...polygon.center),
     opacity: 0.5,
-    offsetY: 0,
+    offsetY: -10,
     properties: {
       title: polygon.name,
       imgSrc2: dwd,
@@ -2988,7 +3056,7 @@ const DGcreateCs2 = (polygon, indexx) => {
   cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
     point: new BMapGL.Point(...polygon.center),
     opacity: 0.5,
-    offsetY: 0,
+    offsetY: -10,
     properties: {
       title: polygon.name,
       number: polygon[`${num}`],