gx

src/view/sy_map.vue

@@ -4,7 +4,7 @@
     <div class="left">
       <div class="lyx">
         <div class="title">
-          <div class="title_name">龙游县</div>
+          <div class="title_name">{{ title_choose }}</div>
           <div class="title_line"></div>
         </div>
         <div class="content">
@@ -12,7 +12,7 @@
             class="content_item"
             v-for="(item, index) in personTotal"
             :class="{ choose: item.id == choose.person }"
-            @click="change(item.id, 'person')"
+            @click="changeRs(item.id)"
             :key="index"
           >
             <div class="content_item_name">{{ item.name }}</div>
@@ -30,7 +30,7 @@
             class="content_item"
             v-for="(item, index) in tsbqTotal"
             :class="{ choose: item.id == choose.bq }"
-            @click="change(item.id, 'bq')"
+            @click="changebq(item.id)"
             :key="index"
           >
             <div class="content_item_name">{{ item.name }}</div>
@@ -75,7 +75,7 @@
             class="zyys_content_item"
             v-for="(item, index) in yaosuTotal"
             :class="{ choose: item.id == choose.yaosu, wz: item.wz == true }"
-            @click="change(item.id, 'yaosu')"
+            @click="changeys(item.id)"
             :key="index"
           >
             <img :src="item.img" class="zyys_content_item_left" />
@@ -113,67 +113,118 @@ import j10 from "@/assets/images/map/j10.png";
 import m1 from "@/assets/images/map/m1.png";
 import m2 from "@/assets/images/map/m2.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";
+const title_choose = 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 mapTownCount = reactive([
   {
     name: "龙洲街道",
-    center: [119.1573083, 29.0267445],
+    center: [119.1573083, 28.9799445],
+    number: "1000",
   },
   {
     name: "东华街道",
-    center: [119.209592, 29.11824],
+    center: [119.209592, 28.9799445],
+    number: "1000",
   },
   {
     name: "小南海镇",
-    center: [119.169616, 29.05309],
+    center: [119.119616, 29.07309],
+    number: "1000",
   },
   {
     name: "湖镇镇",
-    center: [119.2956892, 29.0686151],
+    center: [119.2906892, 29.0386151],
+    number: "1000",
   },
   {
     name: "溪口镇",
-    center: [119.1859408, 28.8479474],
+    center: [119.1859408, 28.8879474],
+    number: "1000",
   },
   {
     name: "詹家镇",
-    center: [119.1401732, 29.015175],
+    center: [119.1201732, 29.005175],
+    number: "1000",
   },
   {
     name: "塔石镇",
-    center: [119.1656669, 29.1373072],
+    center: [119.1256669, 29.1373072],
+    number: "1000",
   },
   {
     name: "横山镇",
-    center: [119.2176111, 29.1803275],
+    center: [119.1876111, 29.1903275],
+    number: "1000",
   },
   {
     name: "模环乡",
-    center: [119.237015, 29.240862],
+    center: [119.237015, 29.120862],
+    number: "1000",
   },
   {
     name: "石佛乡",
-    center: [119.1192998, 29.1718674],
+    center: [119.1002998, 29.2018674],
+    number: "1000",
   },
   {
     name: "沐尘畲族乡",
-    center: [119.1837169, 28.8314116],
+    center: [119.1837169, 28.8014116],
+    number: "1000",
   },
   {
     name: "罗家乡",
-    center: [119.2453273, 28.9430851],
+    center: [119.2453273, 28.9130851],
+    number: "1000",
   },
   {
     name: "庙下乡",
-    center: [119.1637175, 28.8389885],
+    center: [119.1037175, 28.8089885],
+    number: "1000",
   },
   {
     name: "大街乡",
     center: [119.2664362, 28.8432149],
+    number: "1000",
   },
   {
     name: "社阳乡",
-    center: [119.2957367, 28.9674754],
+    center: [119.3109367, 28.9074754],
+    number: "1000",
   },
 ]);
 
@@ -191,6 +242,8 @@ const initMap = () => {
   loadTown();
   //渲染地块
   addPolygonCounty();
+  //添加街道名
+  addJd();
 };
 const loadTown = () => {
   for (let v of mapTown.features) {
@@ -235,11 +288,22 @@ const addPolygonCounty = () => {
       map.addOverlay(polygon);
     }
   });
+  // mapTownCount.map((item) => {
+  //   createCustomOverlayJd(item);
+  // });
+};
+//添加街道名
+const addJd = () => {
   mapTownCount.map((item) => {
-    //相同乡镇名称，图标和名称只创建1次
     createCustomOverlayJd(item);
   });
 };
+//添加街道名2含数量
+const addJd2 = () => {
+  mapTownCount.map((item) => {
+    createCustomOverlayJd2(item);
+  });
+};
 //加载村社信息
 const loadCs = () => {
   for (let v of xkz.features) {
@@ -261,16 +325,16 @@ const loadCs = () => {
 };
 //添加村社区块
 const addPolygonCountyCs = () => {
-  console.log(888888,xkzDk);
-  let fillColor = "#red";
-  xkzDk.map((item) => {
+  xkzDk.map((item, index) => {
+    let num = index % 9;
+    let fillColor = colorList[num].bg;
     //地区的坐标范围
     let points = [];
-    item.point.map((p) => points.push(new BMapGL.Point(...p)));
+    item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
     if (points.length) {
       //创建面
       let polygonCs = new BMapGL.Polygon(points, {
-        strokeColor: "blue",
+        strokeColor: fillColor,
         strokeWeight: 2,
         strokeOpacity: 0.8,
         fillColor: fillColor,
@@ -281,7 +345,7 @@ const addPolygonCountyCs = () => {
     }
   });
 };
-// 添加地图上的街道名
+// 创建地图上的街道名
 const createCustomOverlayJd = (polygon) => {
   function createLabelDOM() {
     var content = document.createElement("div");
@@ -301,18 +365,25 @@ const createCustomOverlayJd = (polygon) => {
     div.setAttribute("name", this.properties.title);
 
     var title = document.createElement("div");
-    title.style.fontSize = "20px";
-    title.style.fontWeight = "700";
+    title.style.fontSize = "16px";
+    title.style.fontWeight = "600";
     title.style.color = "#000000";
     div.appendChild(title);
     title.appendChild(document.createTextNode(this.properties.title));
     content.appendChild(div);
     div.onclick = function () {
-      console.log(11111111, polygon);
+      let jdCenter = [];
       if (polygon.name == "溪口镇") {
+        title_choose.value = title_choose.value + `>${polygon.name}`;
+        console.log(title_choose.value);
         loadCs();
         addPolygonCountyCs();
-        console.log(2222);
+        mapTownCount.map((item) => {
+          if (item.name == "溪口镇") {
+            jdCenter = item.center;
+          }
+        });
+        goMapCenter(jdCenter, 14);
       }
     };
     return content;
@@ -328,7 +399,70 @@ const createCustomOverlayJd = (polygon) => {
   });
   map.addOverlay(customOverlay);
 };
-// 添加地图上的图标
+// 创建地图上的街道名+(人数,标签)
+const createCustomOverlayJd2 = (polygon) => {
+  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);
+
+    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 = "16px";
+    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 = "16px";
+    number.style.fontWeight = "600";
+    number.style.color = "rgba(0, 255, 189, 1)";
+    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}`;
+        console.log(title_choose.value);
+        loadCs();
+        addPolygonCountyCs();
+        mapTownCount.map((item) => {
+          if (item.name == "溪口镇") {
+            jdCenter = item.center;
+          }
+        });
+        goMapCenter(jdCenter, 14);
+      }
+    };
+    return content;
+  }
+  var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
+    point: new BMapGL.Point(...polygon.center),
+    opacity: 0.5,
+    offsetY: 0,
+    properties: {
+      title: polygon.name,
+      number: polygon.number,
+      type: "customOverlay",
+    },
+  });
+  map.addOverlay(customOverlay);
+};
+// 添加公共服务圈的图标
 const createCustomOverlay = (polygon) => {
   function createLabelDOM() {
     var content = document.createElement("div");
@@ -347,14 +481,15 @@ const createCustomOverlay = (polygon) => {
     div.style.display = "flex";
     div.style.justifyContent = "center";
     div.style.alignItems = "center";
-    div.style.background = polygon.bgColor;
+    div.style.background = `url(${fwqbg1}) no-repeat 0/100% 100%`;
     div.style.cursor = "pointer";
+    div.style.transform = "translateX(30px)";
     div.setAttribute("name", this.properties.title);
 
     var title = document.createElement("div");
     title.style.fontSize = "14px";
     title.style.fontWeight = "700";
-    title.style.marginLeft = "4px";
+    title.style.marginLeft = "0px";
     title.style.color = "#ddd";
     div.appendChild(title);
     title.appendChild(document.createTextNode(this.properties.title));
@@ -379,41 +514,68 @@ const createCustomOverlay = (polygon) => {
   var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
     point: new BMapGL.Point(...polygon.point),
     opacity: 0.5,
-    offsetY: -10,
+    offsetY: 0,
     properties: {
       title: polygon.name,
       imgSrc2: dwd,
       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(customOverlay);
 };
 //地图中点
 const goMapCenter = (point, zoom) => {
   map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom);
 };
-const removeAllPolygon = () => {
+const removeAllPolygon = (e) => {
   let allOverlay = map.getOverlays();
   console.log("allOverlay", allOverlay);
   for (let i = 0; i < allOverlay.length; i++) {
     map.removeOverlay(allOverlay[i]);
   }
-  addPolygonCounty();
+  if (e == "fwq") {
+    addPolygonCounty();
+    addJd();
+  } else {
+    addPolygonCounty();
+    addJd2();
+  }
 };
 //选项设置
 //选中
 const choose = ref({
-  person: 0,
-  bq: 0,
-  fwq: 100,
-  yaosu: 0,
+  person: 9999,
+  bq: 9999,
+  fwq: 9999,
+  yaosu: 9999,
 });
-const change = (id, name) => {
-  choose.value[name] = id;
+const changeRs = (id) => {
+  choose.value.person = id;
+  choose.value.bq = 9999;
+  removeAllPolygon("person");
+};
+const changebq = (id) => {
+  choose.value.bq = id;
+  choose.value.person = 9999;
 };
 const changeFwq = (id, list, center) => {
   choose.value.fwq = id;
-  removeAllPolygon();
+  removeAllPolygon("fwq");
   fwqList.value = list;
   goMapCenter(center, 17);
   fwqList.value.map((item) => {
@@ -421,6 +583,9 @@ const changeFwq = (id, list, center) => {
   });
   console.log(fwqList.value);
 };
+const changeys = (id) => {
+  choose.value.yaosu = id;
+};
 //人口数
 const personTotal = ref([
   {
@@ -497,6 +662,26 @@ const personTotal = ref([
 
 //特殊标签
 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: "低边",
@@ -608,6 +793,7 @@ const jbfwqTotal = ref([
             name: "溪口幼儿园",
             point: [119.1856806, 28.8509359],
             bgColor: "#00b050",
+        
           },
           {
             name: "衢州学院附属幼儿园",
@@ -1081,6 +1267,7 @@ onMounted(() => {
       color: #ffffff;
       height: 220px;
       overflow: auto;
+
       .content_item {
         cursor: pointer;
         box-sizing: border-box;
@@ -1178,7 +1365,7 @@ onMounted(() => {
           line-height: 48px;
         }
         .jbggfwq_content_item_right {
-          width: 400px;
+          width: 370px;
           display: flex;
           flex-flow: row wrap;
           .jbggfwq_content_item_right_item {