diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index 5dabdd9..89e4fbc 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -5,7 +5,9 @@
-
{{ title_choose }}
+
+ 龙游县{{ title_choose }} +
@@ -138,9 +140,12 @@ const fwq_list_arr = ref([]); const cs_qk_arr = ref([]); const cs_name_arr = ref([]); const cs_number_name_arr = ref([]); +const cs_choose_arr = ref([]); +const cs_un_choose_arr = ref([]); // -const jrcs=ref(false) -const title_choose = ref("龙游县"); +const cfjiedao = ref(""); +const jrcs = ref(false); +const title_choose = ref(""); //村社颜色列表 const colorList = [ { @@ -171,8 +176,30 @@ const colorList = [ bg: "RGBA(27, 91, 55, 1)", }, ]; +//点击龙游县初始化 +const csh = () => { + title_choose.value = ""; + cfjiedao.value=''; + cs_un_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_un_choose_arr.value[index]); + }); + cs_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_choose_arr.value[index]); + }); + cs_number_name_arr.value.forEach((item, index) => { + map.removeOverlay(cs_number_name_arr.value[index]); + }); + cs_name_arr.value.forEach((item, index) => { + map.removeOverlay(cs_name_arr.value[index]); + }); + cs_qk_arr.value.forEach((item, index) => { + map.removeOverlay(cs_qk_arr.value[index]); + }); + goMapCenter([119.178783, 29.034583], 11); +}; //选中社区 - +const chooseCsList = ref([]); +const unChooseList = ref([]); //中心点坐标 const center_now = ref([]); const center_center = ref([119.178783, 29.034583]); @@ -411,16 +438,22 @@ const addPolygonCounty = () => { map.addOverlay(polygon); polygon.addEventListener("click", () => { console.log(item.name); - if(item.name !== "溪口镇"){ - jrcs.value=false; - console.log( jrcs.value,'000'); - } - if (jrcs.value && item.name !== "溪口镇") { - console.log(1); - } else { - console.log(2); - jrcs.value=true; + // if(item.name !== "溪口镇"){ + // jrcs.value=false; + // console.log( jrcs.value,'000'); + // } + // if (jrcs.value && item.name != "溪口镇") { + // console.log(1); + // } else { + // console.log(2); + + // jrcs.value=true; + if (item.name == cfjiedao.value) { + console.log(2222); + } else { + console.log(111); + cfjiedao.value = item.name; let jdCenter = []; if (item.name == "溪口镇") { if (!title_choose.value.includes("溪口镇")) { @@ -433,19 +466,27 @@ const addPolygonCounty = () => { jdCenter = item.center; } }); - console.log( jrcs.value); + console.log(jrcs.value); addCs(); goMapCenter(jdCenter, 13); } else { - title_choose.value = "龙游县"; + title_choose.value = ""; 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_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_choose_arr.value[index]); + }); + cs_un_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_un_choose_arr.value[index]); + }); } } + + // } }); } }); @@ -510,40 +551,97 @@ const addPolygonCountyCs = () => { map.addOverlay(cs_qk_arr.value[index]); cs_qk_arr.value[index].addEventListener("click", () => { console.log(item.name); - // console.log(111,xkzDk); - // xkzDk.forEach((itemm,indexx)=>{ - // if(itemm.name==item.name){ - - // } - // }) - // let jdCenter = []; - // if (item.name == "溪口镇") { - // if (!title_choose.value.includes("溪口镇")) { - // title_choose.value = title_choose.value + `>${item.name}`; - // } - // loadCs(); - // addPolygonCountyCs(); - // mapTownCount.map((item) => { - // if (item.name == "溪口镇") { - // jdCenter = item.center; - // } - // }); - // addCs(); - // goMapCenter(jdCenter, 13); - // } else { - // title_choose.value = "龙游县"; - // 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]); - // }); - // } + console.log(111, xkzDk); + chooseCsList.value.length = 0; + unChooseList.value.length = 0; + xkzDk.forEach((itemm, indexx) => { + if (itemm.name == item.name) { + chooseCsList.value.push(itemm); + } else { + unChooseList.value.push(itemm); + } + }); + title_choose.value = title_choose.value + `>${item.name}`; + cs_qk_arr.value.forEach((item, index) => { + map.removeOverlay(cs_qk_arr.value[index]); + }); + console.log("chooseCsList.value", chooseCsList.value); + console.log("unChooseList.value", unChooseList.value); + addCsChoose(); + addCsUnChoose(); + }); + } + }); +}; +//添加选中社区 +const addCsChoose = () => { + chooseCsList.value.map((item, index) => { + console.log("item", item); + let fillColor = "blue"; + //地区的坐标范围 + let points = []; + item.point[0].map((p) => points.push(new BMapGL.Point(...p))); + if (points.length) { + //创建面 + cs_choose_arr.value[index] = new BMapGL.Polygon(points, { + strokeColor: fillColor, + strokeWeight: 2, + strokeOpacity: 0.8, + fillColor: fillColor, + fillOpacity: 0.4, + name: item.name, + zIndex: 99, + }); + map.addOverlay(cs_choose_arr.value[index]); + } + }); +}; +//添加未选中社区 +const addCsUnChoose = () => { + unChooseList.value.map((item, index) => { + let fillColor = "RGBA(125, 140, 154, 1)"; + //地区的坐标范围 + let points = []; + item.point[0].map((p) => points.push(new BMapGL.Point(...p))); + if (points.length) { + //创建面 + cs_un_choose_arr.value[index] = new BMapGL.Polygon(points, { + strokeColor: fillColor, + strokeWeight: 2, + strokeOpacity: 0.8, + fillColor: fillColor, + fillOpacity: 0.5, + name: item.name, + zIndex: 99, + }); + map.addOverlay(cs_un_choose_arr.value[index]); + cs_un_choose_arr.value[index].addEventListener("click", () => { + cs_un_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_un_choose_arr.value[index]); + }); + cs_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_choose_arr.value[index]); + }); + title_choose.value = title_choose.value.slice(0, -4); + chooseCsList.value.length = 0; + unChooseList.value.length = 0; + xkzDk.forEach((itemm, indexx) => { + if (itemm.name == item.name) { + chooseCsList.value.push(itemm); + } else { + unChooseList.value.push(itemm); + } + }); + title_choose.value = title_choose.value + `>${item.name}`; + cs_un_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_qk_arr.value[index]); + }); + addCsChoose(); + addCsUnChoose(); }); } }); }; - // 添加地图上的街道名 const createCustomOverlayJd = (polygon, indexx) => { @@ -2052,6 +2150,7 @@ onMounted(() => { .title { .title_name { + display: flex; font-family: YouSheBiaoTiHei; font-size: 34px; font-weight: 900; @@ -2064,6 +2163,21 @@ onMounted(() => { /* 为了兼容性,添加渐变背景到IE */ -webkit-background-clip: text; -webkit-text-fill-color: transparent; + span{ + display: block; + font-family: YouSheBiaoTiHei; + font-size: 34px; + font-weight: 900; + // line-height: 44px; + letter-spacing: 4px; + margin-bottom: 15px; + background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #00ffff 100%); + /* 使文字没有背景颜色的背景 */ + background-clip: text; + /* 为了兼容性,添加渐变背景到IE */ + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + } } .title_line {