This commit is contained in:
parent
d7799787f1
commit
b6ffd56982
|
|
@ -5,7 +5,9 @@
|
|||
<div class="left" style="width: 517px">
|
||||
<div class="lyx">
|
||||
<div class="title">
|
||||
<div class="title_name">{{ title_choose }}</div>
|
||||
<div class="title_name">
|
||||
<span @click="csh()">龙游县</span>{{ title_choose }}
|
||||
</div>
|
||||
<div class="title_line"></div>
|
||||
</div>
|
||||
<div class="content">
|
||||
|
|
@ -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("溪口镇")) {
|
||||
|
|
@ -437,15 +470,23 @@ const addPolygonCounty = () => {
|
|||
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,21 @@ onMounted(() => {
|
|||
|
||||
.title {
|
||||
.title_name {
|
||||
display: flex;
|
||||
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;
|
||||
span{
|
||||
display: block;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
font-size: 34px;
|
||||
font-weight: 900;
|
||||
|
|
@ -2065,6 +2178,7 @@ onMounted(() => {
|
|||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.title_line {
|
||||
height: 4px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue