From ad93ed72ce8006734136512fbe7c2c754b5b502b Mon Sep 17 00:00:00 2001 From: duanxiaohai <1812246227@qq.com> Date: Tue, 30 Jul 2024 13:11:05 +0800 Subject: [PATCH] gx --- src/view/map_copy.vue | 2 +- src/view/sy_map.vue | 151 +++++++++++++++++++++++++++--------------- 2 files changed, 97 insertions(+), 56 deletions(-) diff --git a/src/view/map_copy.vue b/src/view/map_copy.vue index 5507e61..dbf43f4 100644 --- a/src/view/map_copy.vue +++ b/src/view/map_copy.vue @@ -1921,7 +1921,7 @@ const addCsUnChoose = () => { cs_dd_arr.value.map((item, index) => { DGcreateCs2(item, index); }); - }, 100); + }, 800); } addCsChoose(); addCsUnChoose(); diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index 0925de2..dcb6a7f 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -12,8 +12,13 @@
-
+
{{ ageLess0(item.ages) }}
{{ item.rksl }}
@@ -25,8 +30,13 @@
-
+
{{ item.name }}
{{ item.rksl }}
@@ -40,19 +50,19 @@
-
+
{{ item.name }}
-
+
{{ itemm.name }}
@@ -65,8 +75,13 @@
-
+
{{ item.name }}
@@ -88,6 +103,7 @@ import { watch, nextTick, } from "vue"; +import { ElMessage } from "element-plus"; import initializeMap from "@/utils/mapInitializer.js"; import http from "@/utils/request.js"; import mapTown from "@/assets/json/ly.json"; @@ -440,8 +456,7 @@ const BMAP = () => { // 添加服务圈 var circle; const drawACircle = (v) => { - console.log("经纬度",data.fwqCoordinates1, data.fwqCoordinates2,data.fwqCoordinates); - // forEach; + console.log("经纬度", data.fwqCoordinates1, data.fwqCoordinates2); if (!circle) { var point = new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2); circle = new BMapGL.Circle(point, 1000, { @@ -456,16 +471,16 @@ const drawACircle = (v) => { map.addOverlay(circle); } - if (v === "hide") { - circle.hide(); - } else { - circle.show(); - map.addOverlay(circle); - map.setViewport({ - center: new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2), - zoom: 14, - }); - } + // if (v === "hide") { + // circle.hide(); + // } else { + // circle.show(); + // map.addOverlay(circle); + // map.setViewport({ + // center: new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2), + // zoom: 14, + // }); + // } }; const initMap = () => { @@ -1247,7 +1262,7 @@ const DGcreateCs2 = (polygon, indexx) => { }; //创建公共服务圈 const addggfwq = () => { - if (fwqList.value) { + if (fwqList.value.length !== 0) { data.fwqCoordinates1 = []; data.fwqCoordinates2 = []; fwqList.value.map((item, index) => { @@ -1255,21 +1270,22 @@ const addggfwq = () => { data.fwqCoordinates2.push(item.point[1]); createCustomOverlay(item, index); }); - function calculateAverage(coordinates) { const numericCoordinates = coordinates.map(Number); // 将字符串转换为数字 const sum = numericCoordinates.reduce((acc, val) => acc + val, 0); // 计算总和 - return sum / numericCoordinates.length; // 计算平均值 + const average = sum / numericCoordinates.length; // 计算平均值 + return parseFloat(average.toFixed(5)); // 保留5位小数并转换为数字 } data.fwqCoordinates1 = calculateAverage(data.fwqCoordinates1); data.fwqCoordinates2 = calculateAverage(data.fwqCoordinates2); - // console.log(average1,average2, 555); drawACircle(); + } else { + ElMessage.warning("无数据"); } }; // 添加公共服务圈的图标 const createCustomOverlay = (polygon, indexx) => { - data.fwqCoordinates = polygon.point; + // data.fwqCoordinates = polygon.point; function createLabelDOM() { var content = document.createElement("div"); content.style.display = "flex"; @@ -1440,7 +1456,9 @@ const changebq = (id) => { // choose.value.person = id; }; //点击服务圈村 -const changeFwq = async (id, list, center, name, names) => { +const changeFwq = async (id, name, names) => { + console.log("fwqid", choose.value.fwq, id); + console.log(fwqList.value, "无"); if (choose.value.fwq == id) { choose.value.fwq = null; csh(); //地图初始化 @@ -1448,16 +1466,29 @@ const changeFwq = async (id, list, center, name, names) => { fwq_list_arr.value.forEach((item, index) => { map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标 }); - drawACircle("hide"); //隐藏服务圈 圆 + fwq_list_arr.value = []; + map.removeOverlay(circle); // 清空服务圈 圆 + circle = null; + // drawACircle("hide"); //隐藏服务圈 圆 } else { await getServiceCircle(names, name); - choose.value.fwq = id; - map.clearOverlays(); //清空地图上所有的覆盖物 - choose.value.person = ""; - addggfwq(); //创建公共服务圈 - setTimeout(() => { - goMapCenter([data.fwqCoordinates1,data.fwqCoordinates2], 16); //中心点缩放 - }, 500); + if (fwqList.value.length !== 0) { + fwq_list_arr.value.forEach((item, index) => { + map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标 + }); + map.removeOverlay(circle); // 清空服务圈 圆 + circle = null; + fwq_list_arr.value = []; + choose.value.fwq = id; + map.clearOverlays(); //清空地图上所有的覆盖物 + choose.value.person = ""; + addggfwq(); //创建公共服务圈 + setTimeout(() => { + goMapCenter([data.fwqCoordinates1, data.fwqCoordinates2], 16); //中心点缩放 + }, 500); + } else { + ElMessage.warning("无数据"); + } } }; @@ -2686,13 +2717,17 @@ onMounted(() => { bottom: 0; width: 520px; height: 960px; - background: linear-gradient(270deg, + background: linear-gradient( + 270deg, rgba(0, 52, 131, 0.69) 0%, rgba(0, 32, 83, 0.77) 50%, - rgba(0, 60, 131, 0.74) 100%), - radial-gradient(128% 99% at 100% 46%, + rgba(0, 60, 131, 0.74) 100% + ), + radial-gradient( + 128% 99% at 100% 46%, rgba(0, 48, 125, 0.29) 0%, - rgba(0, 61, 134, 0.42) 100%); + rgba(0, 61, 134, 0.42) 100% + ); box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5); backdrop-filter: blur(3px); padding: 30px 26px; @@ -2864,13 +2899,17 @@ onMounted(() => { bottom: 0; width: 520px; height: 960px; - background: linear-gradient(270deg, + background: linear-gradient( + 270deg, rgba(0, 52, 131, 0.69) 0%, rgba(0, 32, 83, 0.77) 50%, - rgba(0, 60, 131, 0.74) 100%), - radial-gradient(128% 99% at 100% 46%, + rgba(0, 60, 131, 0.74) 100% + ), + radial-gradient( + 128% 99% at 100% 46%, rgba(0, 48, 125, 0.29) 0%, - rgba(0, 61, 134, 0.42) 100%); + rgba(0, 61, 134, 0.42) 100% + ); box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5); backdrop-filter: blur(3px); padding: 30px 26px; @@ -3029,10 +3068,12 @@ onMounted(() => { // line-height: 44px; letter-spacing: 4px; margin-bottom: 15px; - background: linear-gradient(180deg, - #ffffff 0%, - #ffffff 40%, - #00ffff 100%); + background: linear-gradient( + 180deg, + #ffffff 0%, + #ffffff 40%, + #00ffff 100% + ); /* 使文字没有背景颜色的背景 */ background-clip: text; /* 为了兼容性,添加渐变背景到IE */