diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index 35a96a3..b1b2bdb 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -24,8 +24,13 @@
-
+
{{ item.name }}
{{ item.value }}
@@ -39,11 +44,19 @@
-
+
{{ item.name }}
-
+
{{ itemm.name }}
@@ -56,8 +69,13 @@
-
+
{{ item.name }}
@@ -119,6 +137,8 @@ const cs_name_arr = ref([]); const cs_number_name_arr = ref([]); const cs_choose_arr = ref([]); const cs_un_choose_arr = ref([]); +const cs_dd_arr = ref([]); + const cfjiedao = ref(""); const jrcs = ref(false); const title_choose = ref(""); @@ -171,6 +191,9 @@ const csh = () => { cs_qk_arr.value.forEach((item, index) => { map.removeOverlay(cs_qk_arr.value[index]); }); + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); goMapCenter([119.178783, 29.034583], 11); }; //选中社区 @@ -462,7 +485,12 @@ const addPolygonCounty = () => { } }); console.log(jrcs.value); - addCs(); + if ((choose.value.person = 9999)) { + addCs2(); + } else { + addCs(); + } + goMapCenter(jdCenter, 13); } else { title_choose.value = ""; @@ -478,6 +506,9 @@ const addPolygonCounty = () => { cs_un_choose_arr.value.forEach((item, index) => { map.removeOverlay(cs_un_choose_arr.value[index]); }); + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); } } @@ -548,6 +579,11 @@ const addPolygonCountyCs = () => { cs_qk_arr.value[index].addEventListener("click", () => { console.log(66666666, item.name); console.log(111, xkzDk); + xkzCenter.forEach((a, b) => { + if (a.name == item.name) { + cs_dd_arr.value.push(a); + } + }); chooseCsList.value.length = 0; unChooseList.value.length = 0; xkzDk.forEach((itemm, indexx) => { @@ -561,6 +597,15 @@ const addPolygonCountyCs = () => { cs_qk_arr.value.forEach((item, index) => { map.removeOverlay(cs_qk_arr.value[index]); }); + cs_name_arr.value.forEach((item, index) => { + map.removeOverlay(cs_name_arr.value[index]); + }); + cs_number_name_arr.value.forEach((item, index) => { + map.removeOverlay(cs_number_name_arr.value[index]); + }); + cs_dd_arr.value.map((item, index) => { + DGcreateCs(item, index); + }); console.log("chooseCsList.value", chooseCsList.value); console.log("unChooseList.value", unChooseList.value); addCsChoose(); @@ -614,6 +659,9 @@ const addCsUnChoose = () => { }); map.addOverlay(cs_un_choose_arr.value[index]); cs_un_choose_arr.value[index].addEventListener("click", () => { + cs_dd_arr.value.forEach((item, index) => { + map.removeOverlay(cs_dd_arr.value[index]); + }); cs_un_choose_arr.value.forEach((item, index) => { map.removeOverlay(cs_un_choose_arr.value[index]); }); @@ -623,6 +671,12 @@ const addCsUnChoose = () => { title_choose.value = title_choose.value.slice(0, -4); chooseCsList.value.length = 0; unChooseList.value.length = 0; + cs_dd_arr.value = []; + xkzCenter.forEach((a, b) => { + if (a.name == item.name) { + cs_dd_arr.value.push(a); + } + }); xkzDk.forEach((itemm, indexx) => { if (itemm.name == item.name) { chooseCsList.value.push(itemm); @@ -634,6 +688,9 @@ const addCsUnChoose = () => { cs_un_choose_arr.value.forEach((item, index) => { map.removeOverlay(cs_qk_arr.value[index]); }); + cs_dd_arr.value.map((item1, index1) => { + DGcreateCs(item1, index1); + }); addCsChoose(); addCsUnChoose(); }); @@ -740,21 +797,21 @@ const createCustomOverlayJd2 = (polygon, indexx) => { 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}`; - // loadCs(); - // addPolygonCountyCs(); - // mapTownCount.map((item) => { - // if (item.name == "溪口镇") { - // jdCenter = item.center; - // } - // }); - // addCs2(); - // goMapCenter(jdCenter, 14); - // } - // }; + div.onclick = function () { + let jdCenter = []; + if (polygon.name == "溪口镇") { + title_choose.value = title_choose.value + `>${polygon.name}`; + loadCs(); + addPolygonCountyCs(); + mapTownCount.map((item) => { + if (item.name == "溪口镇") { + jdCenter = item.center; + } + }); + addCs2(); + goMapCenter(jdCenter, 14); + } + }; return content; } jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { @@ -826,20 +883,6 @@ const createCs2 = (polygon, indexx) => { content.appendChild(div); content.appendChild(img2); - // div.onclick = function () { - // let jdCenter = []; - // if (polygon.name == "溪口镇") { - // title_choose.value = title_choose.value + `>${polygon.name}`; - // loadCs(); - // addPolygonCountyCs(); - // mapTownCount.map((item) => { - // if (item.name == "溪口镇") { - // jdCenter = item.center; - // } - // }); - // goMapCenter(jdCenter, 14); - // } - // }; return content; } cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { @@ -906,6 +949,58 @@ const createCs = (polygon, indexx) => { }); map.addOverlay(cs_name_arr.value[indexx]); }; +//添加单个村社 +const DGcreateCs = (polygon, indexx) => { + console.log("ppppppppp", 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.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; + } + cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { + point: new BMapGL.Point(...polygon.center), + opacity: 0.5, + offsetY: 0, + properties: { + title: polygon.name, + imgSrc2: dwd, + type: "customOverlay", + }, + }); + map.addOverlay(cs_dd_arr.value[indexx]); +}; //创建公共服务圈 const addggfwq = () => { fwqList.value.map((item, index) => { @@ -1068,7 +1163,6 @@ const changeRs = (id) => { // addJd(); // } } else { - console.log(8888); // if(chooseArr.value.includes("jd_number")){ // chooseArr.value = chooseArr.value.filter((item) => item !== "jd_number"); // chooseArr.value.push("jd_noNumber"); @@ -1842,6 +1936,7 @@ const yaosuTotal = ref([ }, ]); const getData = async (i, e) => { + console.log('iiii',i); await http .get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`) .then((res) => { @@ -1883,16 +1978,13 @@ const getDatas = async (e, i) => { res.data.committee.map((item) => { xkzCenter.map((items) => { if (item.committee == items.name) { - items.number = item.rksl + items.number = item.rksl; } - }) - }) + }); + }); console.log(xkzCenter); - } - }); - }; const reset_font = () => { let width = document.documentElement.clientWidth || document.body.clientWidth; @@ -1942,13 +2034,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; @@ -2106,13 +2202,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; @@ -2264,10 +2364,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 */