diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index fedc465..ba7957d 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -15,7 +15,7 @@ class="content_item" v-for="(item, index) in personTotal" :class="{ choose: item.id == choose.person }" - @click="getData(item.id, item.age), getDatas('溪口镇', item.age)" + @click="buten(item)" :key="index" >
{{ item.ages }}
@@ -143,13 +143,17 @@ const cs_number_name_arr = ref([]); const cs_choose_arr = ref([]); const cs_un_choose_arr = ref([]); const cs_dd_arr = ref([]); - +//点击点 +const marker = ref([]); +// const cfjiedao = ref(""); const jrcs = ref(false); const title_choose = ref(""); //是否单点社区 const sfdd = ref(false); const xuanzhongCs = ref([]); +//存放街道 +const cfJd = ref(""); //村社颜色列表 const colorList = [ { @@ -214,6 +218,7 @@ const csh = () => { cs_un_choose_arr.value = []; cs_dd_arr.value = []; goMapCenter([119.178783, 29.034583], 11); + getData(); }; //选中社区 const chooseCsList = ref([]); @@ -532,6 +537,7 @@ const addPolygonCounty = () => { // cs_choose_arr.value = []; // cs_un_choose_arr.value = []; // cs_dd_arr.value = []; + cfJd.value = ""; xuanzhongCs.value = []; sfdd.value = false; title_choose.value = ""; @@ -563,6 +569,7 @@ const addPolygonCounty = () => { cs_choose_arr.value = []; cs_un_choose_arr.value = []; cs_dd_arr.value = []; + getData(); } } @@ -586,6 +593,7 @@ const addJd2 = () => { mapTownCount.map((item, index) => { createCustomOverlayJd2(item, index); }); + // if (center_now.value[0] == 119.178783) { // goMapCenter([119.178783, 29.034581], 11); // } @@ -777,7 +785,8 @@ const createCustomOverlayJd = (polygon, indexx) => { content.style.flexDirection = "column"; content.style.alignItems = "center"; content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); - + content.style.height = "20px"; + content.style.width = "20px"; var div = document.createElement("div"); div.style.color = "#333"; div.style.whiteSpace = "nowrap"; @@ -795,32 +804,6 @@ const createCustomOverlayJd = (polygon, indexx) => { div.appendChild(title); title.appendChild(document.createTextNode(this.properties.title)); content.appendChild(div); - // div.onclick = function () { - // let jdCenter = []; - // if (polygon.name == "溪口镇") { - // if (!title_choose.value.includes("溪口镇")) { - // title_choose.value = title_choose.value + `>${polygon.name}`; - // } - // chooseArr.value.push("jd_noNumber"); - // loadCs(); - // addPolygonCountyCs(); - // mapTownCount.map((item) => { - // if (item.name == "溪口镇") { - // jdCenter = item.center; - // } - // }); - // center_now.value = jdCenter; - // addCs(); - // goMapCenter(jdCenter, 14); - // } else { - // 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]); - // }); - // } - // }; return content; } jdm_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { @@ -842,7 +825,8 @@ const createCustomOverlayJd2 = (polygon, indexx) => { content.style.flexDirection = "column"; content.style.alignItems = "center"; content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); - + content.style.height = "30px"; + content.style.width = "30px"; var div = document.createElement("div"); div.style.color = "#333"; div.style.whiteSpace = "nowrap"; @@ -907,6 +891,7 @@ const addCs = () => { //创建村社(人数,标签) const addCs2 = () => { xkzCenter.map((item, index) => { + console.log("addCs2", item); createCs2(item, index); }); }; @@ -918,7 +903,8 @@ const createCs2 = (polygon, indexx) => { content.style.flexDirection = "column"; content.style.alignItems = "center"; content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); - + content.style.height = "45px"; + content.style.width = "45px"; var div = document.createElement("div"); div.style.color = "#333"; div.style.whiteSpace = "nowrap"; @@ -947,7 +933,7 @@ const createCs2 = (polygon, indexx) => { number.style.color = "black"; div.appendChild(number); number.appendChild(document.createTextNode(this.properties.number)); - content.appendChild(div); + // content.appendChild(div); let img2 = document.createElement("img"); img2.style.width = "20px"; img2.style.height = "26px"; @@ -957,6 +943,7 @@ const createCs2 = (polygon, indexx) => { content.appendChild(img2); return content; } + cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { point: new BMapGL.Point(...polygon.center), opacity: 0.5, @@ -977,6 +964,8 @@ const createCs = (polygon, indexx) => { content.style.display = "flex"; content.style.flexDirection = "column"; content.style.alignItems = "center"; + content.style.height = "45px"; + content.style.width = "45px"; content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); var div = document.createElement("div"); @@ -1029,6 +1018,8 @@ const DGcreateCs = (polygon, indexx) => { content.style.display = "flex"; content.style.flexDirection = "column"; content.style.alignItems = "center"; + content.style.height = "40px"; + content.style.width = "40px"; content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); var div = document.createElement("div"); @@ -1080,6 +1071,8 @@ const DGcreateCs2 = (polygon, indexx) => { content.style.display = "flex"; content.style.flexDirection = "column"; content.style.alignItems = "center"; + content.style.height = "40px"; + content.style.width = "40px"; content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); var div = document.createElement("div"); @@ -1146,6 +1139,8 @@ const createCustomOverlay = (polygon, indexx) => { content.style.display = "flex"; content.style.flexDirection = "column"; content.style.alignItems = "center"; + content.style.height = "40px"; + content.style.width = "40px"; content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); var div = document.createElement("div"); @@ -1281,6 +1276,7 @@ const changeRs = (id) => { // } // chooseArr.value.push("person"); console.log("new"); + choose.value.person = id; choose.value.bq = 9999; jdm_arr.value.forEach((item, index) => { @@ -1289,6 +1285,9 @@ const changeRs = (id) => { jdm_number_arr.value.forEach((item, index) => { map.removeOverlay(jdm_number_arr.value[index]); }); + + addJd2(); + // if (cs_name_arr.value?.length) { // cs_name_arr.value.forEach((item, index) => { // map.removeOverlay(cs_name_arr.value[index]); @@ -1305,7 +1304,7 @@ const changeRs = (id) => { // jdm_arr.value.forEach((item, index) => { // map.removeOverlay(jdm_arr.value[index]); // }); - addJd2(); + // removeAllPolygon("person"); // xuanran(); } @@ -2054,30 +2053,36 @@ const yaosuTotal = ref([ wz: true, }, ]); +const buten = async (item) => { + getData(item.id, item.age); + getDatas("溪口镇", item.age); +}; const getData = async (i, e) => { console.log("iiii", i); await http .get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`) .then((res) => { if (res.code == 200) { - personTotal.value = [ - { - id: "0", - ages: "总人口", - age: "", - value: "res.data.total", - }, - ]; - personTotal.value[0].rksl = res.data.total; - personTotal.value[0].ages = "总人口"; - res.data.age.forEach((item, index) => { - personTotal.value.push({ - id: index + 1, - rksl: item.rksl, - age: item.age + "", - ages: item.age + "岁", + if (cfJd.value == "") { + personTotal.value = [ + { + id: "0", + ages: "总人口", + age: "", + value: "res.data.total", + }, + ]; + personTotal.value[0].rksl = res.data.total; + personTotal.value[0].ages = "总人口"; + res.data.age.forEach((item, index) => { + personTotal.value.push({ + id: index + 1, + rksl: item.rksl, + age: item.age + "", + ages: item.age + "岁", + }); }); - }); + } res.data.town.map((item) => { mapTownCount.map((items) => { if (item.town == items.name) { @@ -2096,6 +2101,27 @@ const getDatas = async (e, i) => { .get(`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}`) .then((res) => { if (res.code == 200) { + if (cfJd.value !== "") { + personTotal.value = [ + { + id: "0", + ages: "总人口", + age: "", + value: "res.data.total", + }, + ]; + personTotal.value[0].rksl = res.data.total; + personTotal.value[0].ages = "总人口"; + res.data.age.forEach((item, index) => { + personTotal.value.push({ + id: index + 1, + rksl: item.rksl, + age: item.age + "", + ages: item.age + "岁", + }); + }); + } + res.data.committee.map((item) => { xkzCenter.map((items) => { if (item.committee == items.name) { @@ -2103,6 +2129,7 @@ const getDatas = async (e, i) => { } }); }); + console.log(xkzCenter); cs_name_arr.value.forEach((item, index) => { map.removeOverlay(cs_name_arr.value[index]); @@ -2110,6 +2137,7 @@ const getDatas = async (e, i) => { cs_number_name_arr.value.forEach((item, index) => { map.removeOverlay(cs_number_name_arr.value[index]); }); + console.log(cs_dd_arr.value, "cs_dd_arr.value"); if (title_choose.value == "") { } else { @@ -2135,7 +2163,6 @@ const getDatas = async (e, i) => { }); } } else { - console.log("yyyy3333333"); if (choose.value.person == "") { addCs(); } else { @@ -2146,6 +2173,32 @@ const getDatas = async (e, i) => { } }); }; +const getDatas2 = async (e, i) => { + await http + .get(`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}`) + .then((res) => { + if (res.code == 200) { + personTotal.value = [ + { + id: "0", + ages: "总人口", + age: "", + value: "res.data.total", + }, + ]; + personTotal.value[0].rksl = res.data.total; + personTotal.value[0].ages = "总人口"; + res.data.age.forEach((item, index) => { + personTotal.value.push({ + id: index + 1, + rksl: item.rksl, + age: item.age + "", + ages: item.age + "岁", + }); + }); + } + }); +}; const reset_font = () => { let width = document.documentElement.clientWidth || document.body.clientWidth; let height = @@ -2166,6 +2219,7 @@ onMounted(() => { reset_font(); initMap(); getData(); + BMAP(); });