-
{{ 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 {