gx

src/view/sy_map.vue

@@ -6,7 +6,8 @@
         <div class="lyx">
           <div class="title">
             <div class="title_name">
-              <span @click="csh()">龙游县</span>{{ title_choose }}
+              <span @click="csh()">龙游县</span>
+              <span>{{ title_choose }}</span>
             </div>
             <div class="title_line"></div>
           </div>
@@ -102,6 +103,7 @@ import {
   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";
@@ -115,8 +117,6 @@ 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 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";
@@ -131,8 +131,8 @@ 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 http from "@/utils/request.js";
 import AED from "@/assets/images/map/AED.png";
+
 //删除(存放渲染的地块及图标)
 const jdm_arr = ref([]);
 const jdm_number_arr = ref([]);
@@ -205,13 +205,14 @@ const tsbq_id_total = ref([
     name: "糖尿病",
     id: "tnb",
   },
-    {
+  {
     name: "退役军人",
     id: "tyjr",
   },
 ]);
 //点击龙游县初始化
 const csh = () => {
+  // console.log(222, item.name);
   xuanzhongCs.value = [];
   sfdd.value = false;
   title_choose.value = "";
@@ -255,6 +256,7 @@ const csh = () => {
 const chooseCsList = ref([]);
 const unChooseList = ref([]);
 const sqname = ref();
+const townName = ref();
 //中心点坐标
 const center_now = ref([]);
 const center_center = ref([119.178783, 29.034583]);
@@ -433,16 +435,43 @@ const markera = (e) => {
   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 });
@@ -499,8 +528,8 @@ const addPolygonCounty = () => {
 
       map.addOverlay(polygon);
       polygon.addEventListener("click", () => {
-        // console.log(11111, item.name);
+        townName.value = item.name;
-
+        console.log(11111, item.name, townName.value);
         // if(item.name !== "溪口镇"){
         //   jrcs.value=false;
         //   console.log( jrcs.value,'000');
@@ -666,6 +695,7 @@ const addPolygonCountyCs = () => {
           }
         });
         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]);
         });
@@ -1166,12 +1196,16 @@ const DGcreateCs2 = (polygon, 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";
@@ -1321,27 +1355,33 @@ const changebq = (id) => {
   }
   // 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;
-    // removeAllPolygon("fwq");
+    console.log(11);
+    csh();
+    addPolygonCounty();
+    setTimeout(() => {
+      drawACircle("hide");
+    }, 500);
+    // 清空地图上所有的覆盖物
     fwq_list_arr.value.forEach((item, index) => {
       map.removeOverlay(fwq_list_arr.value[index]);
     });
-    // xuanran();
   } else {
-    // chooseArr.value.push("fwq");
     choose.value.fwq = id;
     fwqList.value = list;
-    // removeAllPolygon("fwq");
+    // 清空地图上所有的覆盖物
-    addggfwq();
+    console.log(22);
-    // xuanran();
+    map.clearOverlays();
-    setTimeout(() => {
-      goMapCenter(center, 17);
-    }, 500);
 
-    // addggfwq()
+    setTimeout(() => {
+      // drawACircle();
+      addggfwq();
+      goMapCenter(center, 16);
+    }, 500);
   }
 
   // choose.value.fwq = id;
@@ -1352,6 +1392,7 @@ const changeFwq = (id, list, center) => {
   //   createCustomOverlay(item);
   // });
 };
+
 const changeys = (id) => {
   choose.value.yaosu = id;
 };
@@ -1515,7 +1556,6 @@ const tsbqTotal = ref([
 ]);
 
 //基本公共服务圈
-
 const jbfwqTotal = ref([
   {
     id: 0,
@@ -2388,6 +2428,25 @@ const reset_font = () => {
       "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();
@@ -2749,6 +2808,7 @@ onMounted(() => {
 
 .title {
   .title_name {
+    cursor: pointer;
     display: flex;
     font-family: YouSheBiaoTiHei;
     font-size: 34px;