From 57fc61493164da6d65da05e935bc82d9b6650584 Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Mon, 23 Sep 2024 13:09:45 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9C=8D=E5=8A=A1=E5=9C=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/view/sy_map.vue | 258 ++++++++++++++++++++++++++++++-------------- 1 file changed, 179 insertions(+), 79 deletions(-) diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index 9514778..4902df4 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -111,7 +111,7 @@
-
+
基本公共服务圈
@@ -477,6 +477,8 @@ const message = ref({}); const jdm_arr = ref([]); //街道名 const jdm_number_arr = ref([]); //街道名(+数量) const fwq_list_arr = ref([]); //基本公共服务圈 +const fwq_dk = ref([]); //基本公共服务圈村社地块 +const fwq_center = ref([]); //基本公共服务圈中心点 const cs_qk_arr = ref([]); //社区彩色区块 const cs_name_arr = ref([]); //社区名 const cs_number_name_arr = ref([]); //社区名(+数量) @@ -1246,13 +1248,15 @@ const moveDK = async () => { id: changeCsqkId.value, data: JSON.stringify(arrJWD), }; - await http.post(`/api/ggfwyth/regionalDivision/editVillage`, sj).then((res) => { - if (res.code == 200) { - ElMessage.success({ - message: "保存成功", - }); - } - }); + await http + .post(`/api/ggfwyth/regionalDivision/editVillage`, sj) + .then((res) => { + if (res.code == 200) { + ElMessage.success({ + message: "保存成功", + }); + } + }); await getCssj(); await loadCs(cfJd.value); cs_choose_arr.value.forEach((item, index) => { @@ -2023,12 +2027,12 @@ const getDatasL = async (e, i) => { if (title_jd.value == "") { } else { if (cfCs.value) { - cs_dd_arr.value = [...xuanzhongCs.value]; - cs_dd_arr.value.map((item, index) => { - DGcreateCs2(item, index); - }); + cs_dd_arr.value = [...xuanzhongCs.value]; + cs_dd_arr.value.map((item, index) => { + DGcreateCs2(item, index); + }); } else { - addCs2(); + addCs2(); } } } @@ -2103,7 +2107,7 @@ const getDatas = async (e, i, y = true) => { ages: item.age + "岁", percent: item.percent, }); - before_age = item.age+1; + before_age = item.age + 1; } } }); @@ -2272,7 +2276,7 @@ const getDatas2 = async (e, i, cs) => { before_age = before_age + 1; // before_age = item.age; } else { - for (let k = before_age; k < item.age ; k++) { + for (let k = before_age; k < item.age; k++) { personTotal.value.push({ rksl: 0, age: before_age + "", @@ -2287,7 +2291,7 @@ const getDatas2 = async (e, i, cs) => { ages: item.age + "岁", percent: item.percent, }); - before_age = item.age+1; + before_age = item.age + 1; } } }); @@ -2323,10 +2327,7 @@ const getDatas2 = async (e, i, cs) => { } } }); - if ( - - tsbq_pp.value.includes(i1) - ) { + if (tsbq_pp.value.includes(i1)) { } else { if (choose.value.person == "") { cs_dd_arr.value.map((item, index) => { @@ -2468,19 +2469,19 @@ const getDataBqs2 = async (jd, cs, bq) => { // DGcreateCs(item, index); // }); // } else { - cs_dd_arr.value.forEach((item, index) => { - map.removeOverlay(cs_dd_arr.value[index]); - }); - cs_dd_arr.value = [...xuanzhongCs.value]; - cs_dd_arr.value.map((item, index) => { - DGcreateCs2(item, index); - }); + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); + cs_dd_arr.value = [...xuanzhongCs.value]; + cs_dd_arr.value.map((item, index) => { + DGcreateCs2(item, index); + }); // } } else { // if (choose.value.person == "") { // addCs(); // } else { - addCs2(); + addCs2(); // } } } @@ -3015,26 +3016,37 @@ const getFwq = () => { }); }; //点击服务圈村 +const fwq_cslist = ref([]); //对应村社 +const fwq_jzdk = ref([]); //对应地块 +const fwq_centerList = ref([]); //对应中心点 +const clearfwq = () => { + fwq_list_arr.value.forEach((item, index) => { + map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标 + }); + fwq_dk.value.forEach((item, index) => { + map.removeOverlay(fwq_dk.value[index]); // 清空服务圈 地块 + }); + fwq_center.value.forEach((item, index) => { + map.removeOverlay(fwq_center.value[index]); // 清空服务圈 地块中心点 + }); +}; const changeFwq = async (id, name, names) => { if (choose.value.fwq == id) { choose.value.fwq = null; csh(); //地图初始化 addPolygonCounty(); //添加地区 - fwq_list_arr.value.forEach((item, index) => { - map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标 - }); + clearfwq(); fwq_list_arr.value = []; - map.removeOverlay(circle); // 清空服务圈 圆 - circle = null; + // map.removeOverlay(circle); // 清空服务圈 圆 + // circle = null; } else { csh(); + await loadCs(name); await getServiceCircle(names, name); if (fwqList.value.length !== 0) { - fwq_list_arr.value.forEach((item, index) => { - map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标 - }); - map.removeOverlay(circle); // 清空服务圈 圆 - circle = null; + clearfwq(); + // map.removeOverlay(circle); // 清空服务圈 圆 + // circle = null; fwq_list_arr.value = []; choose.value.fwq = id; map.clearOverlays(); //清空地图上所有的覆盖物 @@ -3126,32 +3138,24 @@ const calculateZoomLevel = (maxDistance) => { const addggfwq = () => { if (fwqList.value.length !== 0) { data.fwqCoordinates = []; - // data.fwqCoordinates1 = []; - // data.fwqCoordinates2 = []; + //创建图标 fwqList.value.map((item, index) => { data.fwqCoordinates.push(item.point); - // data.fwqCoordinates1.push(item.point[0]); - // data.fwqCoordinates2.push(item.point[1]); createCustomOverlay(item, index); }); - + //创建地块+中心点 + addFwqCs(); + fwq_centerList.value.map((item, index) => { + addFwqCsCenter(item, index); + }); const centerPoint = calculateCenterPoint(data.fwqCoordinates); data.fwqCoordinates1 = centerPoint[0]; data.fwqCoordinates2 = centerPoint[1]; - // data.fwqCoordinates1 = calculateAverage(data.fwqCoordinates1); - // data.fwqCoordinates2 = calculateAverage(data.fwqCoordinates2); console.log(centerPoint); // 输出中心点的经纬度 - // console.log("经纬度", data.fwqCoordinates1, data.fwqCoordinates2 ); let distances = []; // 初始化距离数组 fwqList.value.forEach((item) => { - // let distance = algorithm( - // (item.point[0] = Number(item.point[0].replace(/[^0-9.-]/g, ""))), - // (item.point[1] = Number(item.point[1].replace(/[^0-9.-]/g, ""))), - // data.fwqCoordinates1, - // data.fwqCoordinates2 - // ); let distance = algorithm( Number(item.point[0].replace(/[^0-9.-]/g, "")), Number(item.point[1].replace(/[^0-9.-]/g, "")), @@ -3167,7 +3171,7 @@ const addggfwq = () => { } data.zoomLevel = calculateZoomLevel(maxDistance); console.log("最大距离:", maxDistance, data.zoomLevel); - drawACircle(maxDistance); + // drawACircle(maxDistance); } else { ElMessage.warning({ message: "无数据", @@ -3274,7 +3278,9 @@ const createCustomOverlay = (polygon, indexx) => { fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { point: new BMapGL.Point(...polygon.point), opacity: 0.5, - offsetY: 0, + // offsetY: 0, + offsetX: 10, + offsetY: -15, properties: { title: polygon.name, imgSrc2: polygon.img2, @@ -3298,35 +3304,129 @@ const createCustomOverlay = (polygon, indexx) => { // }); map.addOverlay(fwq_list_arr.value[indexx]); }; +//添加公共服务圈地块+中心点 +const addFwqCs = () => { + fwq_dk.value.length = 0; + fwq_jzdk.value.map((item, index) => { + let num = index % 9; + let fillColor = "#ffffff"; + let points = []; + item.point[0].map((p) => points.push(new BMapGL.Point(...p))); + if (points.length) { + //创建面 + fwq_dk.value[index] = new BMapGL.Polygon(points, { + strokeColor: "#5E9AD2", + strokeWeight: 2, + strokeOpacity: 0.8, + fillColor: fillColor, + fillOpacity: 0.7, + name: item.name, + zIndex: 2, + }); + map.addOverlay(fwq_dk.value[index]); + } + }); +}; +const addFwqCsCenter = (polygon, indexx) => { + function createLabelDOM() { + var content = document.createElement("div"); + content.style.display = "flex"; + content.style.flexDirection = "column"; + content.style.alignItems = "center"; + content.style.height = "60px"; + content.style.width = "60px"; + 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.justifyContent = "center"; + div.style.alignItems = "center"; + div.style.cursor = "pointer"; + div.style.padding = "5px"; + div.style.minWidth = "60px"; + div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`; + div.style.transform = "translateY(50px)"; + div.setAttribute("name", this.properties.title); + + var title = document.createElement("div"); + title.style.fontSize = "10px"; + title.style.fontWeight = "600"; + title.style.color = "#000000"; + div.appendChild(title); + title.appendChild(document.createTextNode(this.properties.title)); + content.appendChild(div); + let img2 = document.createElement("img"); + img2.style.width = "20px"; + img2.style.height = "26px"; + img2.src = this.properties.imgSrc2; + + content.appendChild(div); + content.appendChild(img2); + return content; + } + fwq_center.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { + point: new BMapGL.Point(...polygon.center), + opacity: 0.5, + offsetX: 10, + offsetY: -15, + properties: { + title: polygon.name, + imgSrc2: dwd, + type: "customOverlay", + }, + }); + map.addOverlay(fwq_center.value[indexx]); +}; +// +//服务点数据处理 const updateFwqList = (data, townName, communityName) => { // console.log(data, townName, communityName,'服务器数据'); let updatedFwqList = []; - jbfwqTotal.value.forEach((town) => { - if (town.name === townName) { - town.child.forEach((community, index) => { - if (community.name === communityName) { - updatedFwqList = data - .filter( - (item) => item.xzjd === townName && item.jc === communityName - ) - .map((item) => ({ - x: 53, - y: 0, - img: fwqbg1, - img2: b2, - name: item.zyysmc, - point: [item.jd, item.wd], - padding: "4px 8px 10px", - textColor: "#fff", - bgColor: "#00b050", - })); - community.fwqList = updatedFwqList; - } - }); + // jbfwqTotal.value.forEach((town) => { + // if (town.name === townName) { + // town.child.forEach((community, index) => { + // if (community.name === communityName) { + fwq_cslist.value.length = 0; + fwq_jzdk.value.length = 0; + fwq_centerList.value.length = 0; + data.forEach((itemN) => { + if (!fwq_cslist.value.includes(itemN.csq)) { + fwq_cslist.value.push(itemN.csq); } }); + fwq_cslist.value.forEach((fwq) => { + xkzDk.forEach((dk) => { + if (fwq == dk.name) { + fwq_jzdk.value.push(dk); + } + }); + xkzCenter.forEach((center) => { + if (fwq == center.name) { + fwq_centerList.value.push(center); + } + }); + }); + console.log(77, fwq_centerList.value); + + updatedFwqList = data.map((item) => ({ + x: 53, + y: 0, + img: fwqbg1, + img2: b2, + name: item.zyysmc, + point: [item.jd, item.wd], + padding: "4px 8px 10px", + textColor: "#fff", + bgColor: "#00b050", + })); + // community.fwqList = updatedFwqList; + // } + // }); + // } + // }); fwqList.value = updatedFwqList; - // console.log(jbfwqTotal.value[4].child[0], "乡镇"); }; //------------------------------ //-------乡镇街道级别--------- @@ -3368,7 +3468,7 @@ let offsetX = 0.01095; // 街道横向偏移量 let offsetY = 0.00314; // 纵向偏移量 let offsetX2 = 0.01; // 村社横向偏移量 let offsetY2 = 0.00328; // 纵向偏移量 -const isclick = ref(''); +const isclick = ref(""); const addPolygonCounty = () => { map.clearOverlays(); let fillColor = "#ffffff"; @@ -3402,7 +3502,7 @@ const addPolygonCounty = () => { // if (isclick.value=='') { // return; // } else { - + // } // } if (showEdit.value) {