This commit is contained in:
姚宇浩 2024-07-24 15:04:19 +08:00
parent ff2d2f4817
commit 847bf45e98
2 changed files with 150 additions and 82 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

View File

@ -126,6 +126,15 @@ import b3 from "@/assets/images/map/b3.png";
import b4 from "@/assets/images/map/b4.png";
import b5 from "@/assets/images/map/b5.png";
import b6 from "@/assets/images/map/b6.png";
import xcbg from "@/assets/images/map/xcbg.png";
//
const jdm_arr = ref([]);
const jdm_number_arr = ref([]);
const fwq_list_arr = ref([]);
const cs_qk_arr = ref([]);
const cs_name_arr = ref([]);
const cs_number_name_arr = ref([]);
//
const title_choose = ref("龙游县");
//
const colorList = [
@ -157,6 +166,9 @@ const colorList = [
bg: "RGBA(27, 91, 55, 1)",
},
];
//
const center_now = ref([]);
const center_center = ref([119.178783, 29.034583]);
//
const mapTownCount = reactive([
{
@ -322,7 +334,7 @@ var map = null;
const initMap = () => {
map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
map.enableScrollWheelZoom(true);
map.setMapType(BMAP_EARTH_MAP);
map.setMapType(BMAP_SATELLITE_MAP);
goMapCenter([119.178783, 29.034583], 12);
//
loadTown();
@ -371,23 +383,28 @@ const addPolygonCounty = () => {
map.addOverlay(polygon);
}
});
// mapTownCount.map((item) => {
// createCustomOverlayJd(item);
// });
};
//
const addJd = () => {
mapTownCount.map((item) => {
createCustomOverlayJd(item);
mapTownCount.map((item, index) => {
createCustomOverlayJd(item, index);
});
};
//2
const addJd2 = () => {
goMapCenter([119.178783, 29.034581], 12);
mapTownCount.map((item) => {
createCustomOverlayJd2(item);
if (center_now.value[0] == 119.178783) {
goMapCenter([119.178783, 29.034581], 12);
}
mapTownCount.map((item, index) => {
createCustomOverlayJd2(item, index);
});
goMapCenter([119.178783, 29.034583], 12);
if (center_now.value[0] == 119.178783) {
goMapCenter([119.178783, 29.034581], 12);
}
};
//
const loadCs = () => {
@ -418,7 +435,7 @@ const addPolygonCountyCs = () => {
item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
if (points.length) {
//
let polygonCs = new BMapGL.Polygon(points, {
cs_qk_arr.value[index] = new BMapGL.Polygon(points, {
strokeColor: fillColor,
strokeWeight: 2,
strokeOpacity: 0.8,
@ -426,12 +443,13 @@ const addPolygonCountyCs = () => {
fillOpacity: 0.7,
name: item.name,
});
map.addOverlay(polygonCs);
map.addOverlay(cs_qk_arr.value[index]);
}
});
};
//
const createCustomOverlayJd = (polygon) => {
const createCustomOverlayJd = (polygon, indexx) => {
function createLabelDOM() {
var content = document.createElement("div");
content.style.display = "flex";
@ -459,8 +477,10 @@ const createCustomOverlayJd = (polygon) => {
div.onclick = function () {
let jdCenter = [];
if (polygon.name == "溪口镇") {
title_choose.value = title_choose.value + `>${polygon.name}`;
console.log(title_choose.value);
if (!title_choose.value.includes("溪口镇")) {
title_choose.value = title_choose.value + `>${polygon.name}`;
}
chooseArr.value.push("jd_noNumber");
loadCs();
addPolygonCountyCs();
mapTownCount.map((item) => {
@ -468,13 +488,21 @@ const createCustomOverlayJd = (polygon) => {
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;
}
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
jdm_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center),
opacity: 0.5,
offsetY: -10,
@ -483,10 +511,10 @@ const createCustomOverlayJd = (polygon) => {
type: "customOverlay",
},
});
map.addOverlay(customOverlay);
map.addOverlay(jdm_arr.value[indexx]);
};
// +(,)
const createCustomOverlayJd2 = (polygon) => {
const createCustomOverlayJd2 = (polygon, indexx) => {
function createLabelDOM() {
var content = document.createElement("div");
content.style.display = "flex";
@ -523,7 +551,6 @@ const createCustomOverlayJd2 = (polygon) => {
let jdCenter = [];
if (polygon.name == "溪口镇") {
title_choose.value = title_choose.value + `>${polygon.name}`;
console.log(title_choose.value);
loadCs();
addPolygonCountyCs();
mapTownCount.map((item) => {
@ -531,13 +558,14 @@ const createCustomOverlayJd2 = (polygon) => {
jdCenter = item.center;
}
});
addCs2();
addCs2();
center_now.value = jdCenter;
goMapCenter(jdCenter, 14);
}
};
return content;
}
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center),
opacity: 0.5,
offsetY: 0,
@ -547,22 +575,22 @@ const createCustomOverlayJd2 = (polygon) => {
type: "customOverlay",
},
});
map.addOverlay(customOverlay);
map.addOverlay(jdm_number_arr.value[indexx]);
};
//
const addCs = () => {
xkzCenter.map((item) => {
createCs(item);
xkzCenter.map((item, index) => {
createCs(item, index);
});
};
//
//(,)
const addCs2 = () => {
xkzCenter.map((item) => {
createCs2(item);
xkzCenter.map((item, index) => {
createCs2(item, index);
});
};
//+(,)
const createCs2 = (polygon) => {
const createCs2 = (polygon, indexx) => {
function createLabelDOM() {
var content = document.createElement("div");
content.style.display = "flex";
@ -575,13 +603,13 @@ const createCs2 = (polygon) => {
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.display = "flex";
div.style.justifyContent = "center";
div.style.justifyContent = "space-between";
div.style.alignItems = "center";
div.style.cursor = "pointer";
div.style.padding="10px"
div.style.backgroundColor = "red";
div.style.borderRadius = "20%";
div.style.transform = "translateY(50px)";
div.style.padding = "10px";
div.style.minWidth = "100px";
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
div.style.transform = "translateY(70px)";
div.setAttribute("name", this.properties.title);
var title = document.createElement("div");
@ -610,7 +638,6 @@ const createCs2 = (polygon) => {
// let jdCenter = [];
// if (polygon.name == "") {
// title_choose.value = title_choose.value + `>${polygon.name}`;
// console.log(title_choose.value);
// loadCs();
// addPolygonCountyCs();
// mapTownCount.map((item) => {
@ -623,7 +650,7 @@ const createCs2 = (polygon) => {
// };
return content;
}
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center),
opacity: 0.5,
offsetY: 0,
@ -634,10 +661,10 @@ const createCs2 = (polygon) => {
type: "customOverlay",
},
});
map.addOverlay(customOverlay);
map.addOverlay(cs_number_name_arr.value[indexx]);
};
//
const createCs = (polygon) => {
const createCs = (polygon, indexx) => {
function createLabelDOM() {
var content = document.createElement("div");
content.style.display = "flex";
@ -653,6 +680,10 @@ const createCs = (polygon) => {
div.style.justifyContent = "center";
div.style.alignItems = "center";
div.style.cursor = "pointer";
div.style.padding = "10px";
div.style.minWidth = "60px";
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
div.style.transform = "translateY(70px)";
div.setAttribute("name", this.properties.title);
var title = document.createElement("div");
@ -671,7 +702,7 @@ const createCs = (polygon) => {
content.appendChild(img2);
return content;
}
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
cs_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center),
opacity: 0.5,
offsetY: 0,
@ -681,16 +712,16 @@ const createCs = (polygon) => {
type: "customOverlay",
},
});
map.addOverlay(customOverlay);
map.addOverlay(cs_name_arr.value[indexx]);
};
//
const addggfwq = () => {
fwqList.value.map((item) => {
createCustomOverlay(item);
fwqList.value.map((item, index) => {
createCustomOverlay(item, index);
});
};
//
const createCustomOverlay = (polygon) => {
const createCustomOverlay = (polygon, indexx) => {
function createLabelDOM() {
var content = document.createElement("div");
content.style.display = "flex";
@ -738,7 +769,7 @@ const createCustomOverlay = (polygon) => {
return content;
}
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.point),
opacity: 0.5,
offsetY: 0,
@ -763,7 +794,7 @@ const createCustomOverlay = (polygon) => {
// border: "0",
// transform: "translateX(-50%)",
// });
map.addOverlay(customOverlay);
map.addOverlay(fwq_list_arr.value[indexx]);
};
//
@ -772,7 +803,6 @@ const goMapCenter = (point, zoom) => {
};
const removeAllPolygon = (e) => {
let allOverlay = map.getOverlays();
console.log("allOverlay", allOverlay);
for (let i = 0; i < allOverlay.length; i++) {
map.removeOverlay(allOverlay[i]);
}
@ -794,13 +824,19 @@ const chooseArr = ref([]);
const xuanran = () => {
addPolygonCounty();
if (chooseArr.value.includes("person")) {
console.log(3434);
addJd2();
if (chooseArr.value.includes("jd_noNumber")) {
addPolygonCountyCs();
addCs2();
chooseArr.value = chooseArr.value.filter(
(item) => item !== "jd_noNumber"
);
chooseArr.value.push("jd_number");
}
} else {
addJd();
}
if (chooseArr.value.includes("fwq")) {
console.log(5656);
addggfwq();
}
// if (!chooseArr.value.includes("person")) {
@ -815,19 +851,51 @@ const choose = ref({
});
const changeRs = (id) => {
if (choose.value.person == id) {
console.log(111111);
chooseArr.value = chooseArr.value.filter((item) => item !== "person");
// chooseArr.value = chooseArr.value.filter((item) => item !== "person");
choose.value.person = 9999;
removeAllPolygon("person");
xuanran();
jdm_number_arr.value.forEach((item, index) => {
map.removeOverlay(jdm_number_arr.value[index]);
});
if (cs_number_name_arr.value) {
cs_number_name_arr.value.forEach((item, index) => {
map.removeOverlay(cs_number_name_arr.value[index]);
});
cs_number_name_arr.value.length = 0;
addCs();
}
addJd();
// if (chooseArr.value.includes("jd_number")) {
// removeAllPolygon("person");
// xuanran();
// loadCs();
// addPolygonCountyCs();
// addCs();
// } else {
// removeAllPolygon("person");
// xuanran();
// addJd();
// }
} else {
console.log(2222222);
chooseArr.value.push("person");
// if(chooseArr.value.includes("jd_number")){
// chooseArr.value = chooseArr.value.filter((item) => item !== "jd_number");
// chooseArr.value.push("jd_noNumber");
// }
// chooseArr.value.push("person");
choose.value.person = id;
choose.value.bq = 9999;
removeAllPolygon("person");
xuanran();
jdm_arr.value.forEach((item, index) => {
map.removeOverlay(jdm_arr.value[index]);
});
if (cs_name_arr.value) {
cs_name_arr.value.forEach((item, index) => {
map.removeOverlay(cs_name_arr.value[index]);
});
cs_name_arr.value.length = 0;
addCs2();
}
addJd2();
// removeAllPolygon("person");
// xuanran();
}
};
const changebq = (id) => {
@ -836,19 +904,20 @@ const changebq = (id) => {
};
const changeFwq = (id, list, center) => {
if (choose.value.fwq == id) {
console.log(7878);
chooseArr.value = chooseArr.value.filter((item) => item !== "fwq");
// chooseArr.value = chooseArr.value.filter((item) => item !== "fwq");
choose.value.fwq = 9999;
removeAllPolygon("fwq");
xuanran();
// removeAllPolygon("fwq");
fwq_list_arr.value.forEach((item, index) => {
map.removeOverlay(fwq_list_arr.value[index]);
});
// xuanran();
} else {
console.log(9999);
chooseArr.value.push("fwq");
// chooseArr.value.push("fwq");
choose.value.fwq = id;
fwqList.value = list;
removeAllPolygon("fwq");
xuanran();
console.log(1111111111, center);
// removeAllPolygon("fwq");
addggfwq();
// xuanran();
setTimeout(() => {
goMapCenter(center, 17);
}, 500);
@ -863,7 +932,6 @@ const changeFwq = (id, list, center) => {
// fwqList.value.map((item) => {
// createCustomOverlay(item);
// });
// console.log(fwqList.value);
};
const changeys = (id) => {
choose.value.yaosu = id;
@ -1081,7 +1149,7 @@ const jbfwqTotal = ref([
y: 0,
textColor: "#fff",
padding: "4px 8px 10px",
padding: "4px 8px 10px",
},
{
name: "衢州学院附属幼儿园",
@ -1092,7 +1160,7 @@ const jbfwqTotal = ref([
x: 55,
y: 0,
textColor: "#fff",
padding: "4px 8px 10px",
padding: "4px 8px 10px",
},
{
name: "溪口中银小学",
@ -1103,7 +1171,7 @@ const jbfwqTotal = ref([
x: 38,
y: 0,
textColor: "#fff",
padding: "4px 8px 10px",
padding: "4px 8px 10px",
},
{
name: "溪口初中",
@ -1114,7 +1182,7 @@ const jbfwqTotal = ref([
x: 33,
y: 0,
textColor: "#fff",
padding: "4px 8px 10px",
padding: "4px 8px 10px",
},
{
name: "居家养老中心",
@ -1125,7 +1193,7 @@ const jbfwqTotal = ref([
x: 38,
y: 0,
textColor: "#fff",
padding: "4px 8px 10px",
padding: "4px 8px 10px",
},
{
name: "共享食堂",
@ -1136,7 +1204,7 @@ const jbfwqTotal = ref([
x: 33,
y: 0,
textColor: "#fff",
padding: "4px 8px 10px",
padding: "4px 8px 10px",
},
{
name: "老年活动中心",
@ -1147,7 +1215,7 @@ const jbfwqTotal = ref([
x: 38,
y: 0,
textColor: "#fff",
padding: "4px 8px 10px",
padding: "4px 8px 10px",
},
{
name: "残疾人之家",
@ -1158,7 +1226,7 @@ const jbfwqTotal = ref([
x: 35,
y: 0,
textColor: "#fff",
padding: "4px 8px 10px",
padding: "4px 8px 10px",
},
{
name: "智慧篮球场",
@ -1169,7 +1237,7 @@ const jbfwqTotal = ref([
x: 34,
y: 50,
textColor: "#fff",
padding: "8px 8px 2px",
padding: "8px 8px 2px",
},
{
name: "慢行步道",
@ -1180,7 +1248,7 @@ const jbfwqTotal = ref([
x: 26,
y: 50,
textColor: "#fff",
padding: "8px 8px 2px",
padding: "8px 8px 2px",
},
{
name: "文化礼堂",
@ -1191,7 +1259,7 @@ const jbfwqTotal = ref([
x: 33,
y: 0,
textColor: "#79B72B",
padding: "4px 8px 10px",
padding: "4px 8px 10px",
},
{
name: "综合文化站",
@ -1202,7 +1270,7 @@ const jbfwqTotal = ref([
x: 35,
y: 0,
textColor: "#79B72B",
padding: "4px 8px 10px",
padding: "4px 8px 10px",
},
{
name: "共享菜园",
@ -1213,7 +1281,7 @@ const jbfwqTotal = ref([
x: 33,
y: 0,
textColor: "#79B72B",
padding: "4px 8px 2px",
padding: "4px 8px 2px",
},
{
name: "零工市场",
@ -1224,7 +1292,7 @@ const jbfwqTotal = ref([
x: 33,
y: 0,
textColor: "#79B72B",
padding: "4px 8px 10px",
padding: "4px 8px 10px",
},
{
name: "溪口中心医院",
@ -1235,7 +1303,7 @@ const jbfwqTotal = ref([
x: 10,
y: 50,
textColor: "#fff",
padding: "8px 8px 2px",
padding: "8px 8px 2px",
},
{
name: "溪口菜市场",
@ -1246,7 +1314,7 @@ const jbfwqTotal = ref([
x: -24,
y: 50,
textColor: "#fff",
padding: "8px 8px 2px",
padding: "8px 8px 2px",
},
{
name: "大型超市",
@ -1257,7 +1325,7 @@ const jbfwqTotal = ref([
x: -24,
y: 50,
textColor: "#fff",
padding: "8px 8px 2px",
padding: "8px 8px 2px",
},
{
name: "智慧停车场",
@ -1268,7 +1336,7 @@ const jbfwqTotal = ref([
x: -28,
y: 50,
textColor: "#fff",
padding: "8px 8px 2px",
padding: "8px 8px 2px",
},
{
name: "溪口镇便民服务中心",
@ -1279,7 +1347,7 @@ const jbfwqTotal = ref([
x: -40,
y: 50,
textColor: "#fff",
padding: "8px 8px 2px",
padding: "8px 8px 2px",
},
],
},