gx

src/view/sy_map.vue

@@ -168,6 +168,9 @@
           <div v-if="currentData.jzzt == 1">居住</div>
           <div v-else>未居住</div>
         </template>
+        <template #sxt="{ currentCol, currentData }">
+          <div>摄像头</div>
+        </template>
       </Dialog>
       <personDetail
         class="detail"
@@ -661,6 +664,13 @@ const fwqList = ref([]);
 
 //资源要素
 const yaosuTotal = ref([
+  {
+    id: 11,
+    name: "摄像头",
+    img: j0,
+    wz: false,
+    url: "/api/ggfwyth/ysyzt/getJashsxt",
+  },
   {
     id: 0,
     name: "体育场所",
@@ -733,10 +743,15 @@ const yaosuTotal = ref([
 const yaosuList = ref([]);
 //选中资源要素坐标
 const yaosuIcon = ref({
+  摄像头: {
+    sj: [],
+  },
   体育场所: {
     sj: [],
   },
-  幼儿园: { sj: [] },
+  幼儿园: {
+    sj: [],
+  },
   小学: { sj: [] },
   初中: { sj: [] },
   高中: { sj: [] },
@@ -797,6 +812,11 @@ const tableType = reactive({
       property: "domicAddr",
       width: "300px",
     },
+    {
+      label: "",
+      property: "sxt",
+      type: "slot",
+    },
   ],
   data: [],
 });
@@ -902,7 +922,7 @@ const markera = (e) => {
   map.addOverlay(marker);
   currentMarker = marker;
 };
-//点击人口数
+//点击人口数(关键字存age)
 const buten = async (item) => {
   if (choose.value.person == item.age) {
     choose.value.person = "";
@@ -939,7 +959,7 @@ const buten = async (item) => {
     getDatas(cfJd.value, item.age);
   }
 };
-//点击特殊标签
+//点击特殊标签(关键字存name)
 const buten2 = async (item) => {
   //取消时不请求
   if (choose.value.person == item.id) {
@@ -1224,6 +1244,7 @@ const getDatas = async (e, i, y = true) => {
     });
 };
 const getDatas2 = async (e, i, cs) => {
+  //i1用来防止i清空，用来渲染单个点位
   let i1 = i;
   if (
     i == "残疾人" ||
@@ -1276,7 +1297,6 @@ const getDatas2 = async (e, i, cs) => {
         // });
         let before_age = "";
         res.data.age.forEach((item, index) => {
-   
           if (index == 0 && item.age == 0) {
             personTotal.value.push({
               rksl: item.rksl,
@@ -1626,51 +1646,66 @@ const removeCharFromArray = (arr, charToRemove) => {
 const changeys = (name) => {
   if (yaosuList.value.includes(name)) {
     yaosuList.value = yaosuList.value.filter((ch) => ch !== name);
-    // yaosuIcon.value[name].sj.forEach((item, index) => {
-    //   map.removeOverlay( yaosuIcon.value[name].sj[index]);
-    // });
+    yaosuIcon.value[name].sj.forEach((item, index) => {
+      map.removeOverlay(yaosuIcon.value[name].sj[index].overlay);
+    });
   } else {
     yaosuList.value.push(name);
-    // getZyys(name);
+    let url;
+    let img
+    yaosuTotal.value.forEach((item, index) => {
+      if (item.name == name) {
+        url = item.url;
+        img=item.img
+      }
+    });
+    getZyys(url, name,img);
   }
 };
-const getZyys = (name) => {
-  http.get(``).then((res) => {
+const getZyys = (url, name,img) => {
+  http.get(url).then((res) => {
     if (res.code == 200) {
-      res.data.map((item, index) => {
-        createZyys(item, index, name);
+      yaosuIcon.value[name].sj = res.data;
+      yaosuIcon.value[name].sj.forEach((item, index) => {
+        item.img = img;
+        item.overlay = null;
+        item.center = [];
+        item.center.push(Number(item.jd));
+        item.center.push(Number(item.wd));
+      });
+      yaosuIcon.value[name].sj.forEach((itemm, indexx) => {
+        createZyys(itemm,indexx,name)
       });
     }
   });
 };
-// 添加资源要素的图标
+// 添加资源要素的图标(overlay存放标记点)
 const createZyys = (polygon, indexx, name) => {
-  // 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);
+    content.style.height = "30px";
+    content.style.width = "30px";
     let img2 = document.createElement("img");
     img2.style.width = "20px";
-    img2.style.height = "20px";
+    img2.style.height = "26px";
     img2.src = this.properties.imgSrc2;
     content.appendChild(img2);
     return content;
   }
-  yaosuIcon.value[name].sj[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
-    point: new BMapGL.Point(...polygon.point),
+  yaosuIcon.value[name].sj[indexx].overlay = new BMapGL.CustomOverlay(createLabelDOM, {
+    point: new BMapGL.Point(...polygon.center),
     opacity: 0.5,
     offsetY: -10,
     properties: {
-      imgSrc2: polygon.img2,
+      imgSrc2: polygon.img,
       type: "customOverlay",
     },
   });
-  map.addOverlay(yaosuIcon.value[name].sj[indexx]);
+  map.addOverlay( yaosuIcon.value[name].sj[indexx].overlay);
 };
 //----------资源要素------------
 //点击街道，回到街道
@@ -2497,7 +2532,7 @@ const addPolygonCountyCs = () => {
         strokeWeight: 2,
         strokeOpacity: 0.8,
         fillColor: fillColor,
-        fillOpacity: 0.7,
+        fillOpacity: 0.5,
         name: item.name,
         zIndex: 99,
       });
@@ -3362,12 +3397,13 @@ onMounted(() => {
 
   .zyys {
     .zyys_content {
+      height: 200px;
       margin-top: 20px;
       box-sizing: border-box;
       display: flex;
       justify-content: space-between;
       flex-flow: row wrap;
-
+      overflow: auto;
       .zyys_content_item {
         width: 110px;
         height: 54px;
@@ -3401,6 +3437,9 @@ onMounted(() => {
         background-size: 100% 100%;
       }
     }
+    .zyys_content::-webkit-scrollbar {
+      display: none;
+    }
   }
 }