xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gx

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/map/xcbg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

186
src/view/sy_map.vue
View File

@ -126,6 +126,15 @@ import b3 from "@/assets/images/map/b3.png";
import b4 from "@/assets/images/map/b4.png"; import b4 from "@/assets/images/map/b4.png";
import b5 from "@/assets/images/map/b5.png"; import b5 from "@/assets/images/map/b5.png";
import b6 from "@/assets/images/map/b6.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 title_choose = ref("龙游县");
//村社颜色列表 //村社颜色列表
const colorList = [ const colorList = [
@ -157,6 +166,9 @@ const colorList = [
bg: "RGBA(27, 91, 55, 1)", bg: "RGBA(27, 91, 55, 1)",
}, },
]; ];
//中心点坐标
const center_now = ref([]);
const center_center = ref([119.178783, 29.034583]);
//地图设置 //地图设置
const mapTownCount = reactive([ const mapTownCount = reactive([
{ {
@ -322,7 +334,7 @@ var map = null;
const initMap = () => { const initMap = () => {
map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 }); map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
map.enableScrollWheelZoom(true); map.enableScrollWheelZoom(true);
map.setMapType(BMAP_EARTH_MAP); map.setMapType(BMAP_SATELLITE_MAP);
goMapCenter([119.178783, 29.034583], 12); goMapCenter([119.178783, 29.034583], 12);
//加载乡镇信息 //加载乡镇信息
loadTown(); loadTown();
@ -371,23 +383,28 @@ const addPolygonCounty = () => {
map.addOverlay(polygon); map.addOverlay(polygon);
} }
}); });
// mapTownCount.map((item) => { // mapTownCount.map((item) => {
// createCustomOverlayJd(item); // createCustomOverlayJd(item);
// }); // });
}; };
//添加街道名 //添加街道名
const addJd = () => { const addJd = () => {
mapTownCount.map((item) => { mapTownCount.map((item, index) => {
createCustomOverlayJd(item); createCustomOverlayJd(item, index);
}); });
}; };
//添加街道名2含数量 //添加街道名2含数量
const addJd2 = () => { const addJd2 = () => {
if (center_now.value[0] == 119.178783) {
goMapCenter([119.178783, 29.034581], 12); goMapCenter([119.178783, 29.034581], 12);
mapTownCount.map((item) => { }
createCustomOverlayJd2(item); 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 = () => { const loadCs = () => {
@ -418,7 +435,7 @@ const addPolygonCountyCs = () => {
item.point[0].map((p) => points.push(new BMapGL.Point(...p))); item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
if (points.length) { if (points.length) {
//创建面 //创建面
let polygonCs = new BMapGL.Polygon(points, { cs_qk_arr.value[index] = new BMapGL.Polygon(points, {
strokeColor: fillColor, strokeColor: fillColor,
strokeWeight: 2, strokeWeight: 2,
strokeOpacity: 0.8, strokeOpacity: 0.8,
@ -426,12 +443,13 @@ const addPolygonCountyCs = () => {
fillOpacity: 0.7, fillOpacity: 0.7,
name: item.name, name: item.name,
}); });
map.addOverlay(polygonCs); map.addOverlay(cs_qk_arr.value[index]);
} }
}); });
}; };
// 添加地图上的街道名 // 添加地图上的街道名
const createCustomOverlayJd = (polygon) => {
const createCustomOverlayJd = (polygon, indexx) => {
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
content.style.display = "flex"; content.style.display = "flex";
@ -459,8 +477,10 @@ const createCustomOverlayJd = (polygon) => {
div.onclick = function () { div.onclick = function () {
let jdCenter = []; let jdCenter = [];
if (polygon.name == "溪口镇") { if (polygon.name == "溪口镇") {
if (!title_choose.value.includes("溪口镇")) {
title_choose.value = title_choose.value + `>${polygon.name}`; title_choose.value = title_choose.value + `>${polygon.name}`;
console.log(title_choose.value); }
chooseArr.value.push("jd_noNumber");
loadCs(); loadCs();
addPolygonCountyCs(); addPolygonCountyCs();
mapTownCount.map((item) => { mapTownCount.map((item) => {
@ -468,13 +488,21 @@ const createCustomOverlayJd = (polygon) => {
jdCenter = item.center; jdCenter = item.center;
} }
}); });
center_now.value = jdCenter;
addCs(); addCs();
goMapCenter(jdCenter, 14); 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; return content;
} }
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, { jdm_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center), point: new BMapGL.Point(...polygon.center),
opacity: 0.5, opacity: 0.5,
offsetY: -10, offsetY: -10,
@ -483,10 +511,10 @@ const createCustomOverlayJd = (polygon) => {
type: "customOverlay", type: "customOverlay",
}, },
}); });
map.addOverlay(customOverlay); map.addOverlay(jdm_arr.value[indexx]);
}; };
// 添加地图上的街道名+(人数,标签) // 添加地图上的街道名+(人数,标签)
const createCustomOverlayJd2 = (polygon) => { const createCustomOverlayJd2 = (polygon, indexx) => {
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
content.style.display = "flex"; content.style.display = "flex";
@ -523,7 +551,6 @@ const createCustomOverlayJd2 = (polygon) => {
let jdCenter = []; let jdCenter = [];
if (polygon.name == "溪口镇") { if (polygon.name == "溪口镇") {
title_choose.value = title_choose.value + `>${polygon.name}`; title_choose.value = title_choose.value + `>${polygon.name}`;
console.log(title_choose.value);
loadCs(); loadCs();
addPolygonCountyCs(); addPolygonCountyCs();
mapTownCount.map((item) => { mapTownCount.map((item) => {
@ -532,12 +559,13 @@ const createCustomOverlayJd2 = (polygon) => {
} }
}); });
addCs2(); addCs2();
center_now.value = jdCenter;
goMapCenter(jdCenter, 14); goMapCenter(jdCenter, 14);
} }
}; };
return content; return content;
} }
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, { jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center), point: new BMapGL.Point(...polygon.center),
opacity: 0.5, opacity: 0.5,
offsetY: 0, offsetY: 0,
@ -547,22 +575,22 @@ const createCustomOverlayJd2 = (polygon) => {
type: "customOverlay", type: "customOverlay",
}, },
}); });
map.addOverlay(customOverlay); map.addOverlay(jdm_number_arr.value[indexx]);
}; };
//创建村社 //创建村社
const addCs = () => { const addCs = () => {
xkzCenter.map((item) => { xkzCenter.map((item, index) => {
createCs(item); createCs(item, index);
}); });
}; };
//创建村社 //创建村社(人数,标签)
const addCs2 = () => { const addCs2 = () => {
xkzCenter.map((item) => { xkzCenter.map((item, index) => {
createCs2(item); createCs2(item, index);
}); });
}; };
//添加村社+(人数,标签) //添加村社+(人数,标签)
const createCs2 = (polygon) => { const createCs2 = (polygon, indexx) => {
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
content.style.display = "flex"; content.style.display = "flex";
@ -575,13 +603,13 @@ const createCs2 = (polygon) => {
div.style.whiteSpace = "nowrap"; div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none"; div.style.MozUserSelect = "none";
div.style.display = "flex"; div.style.display = "flex";
div.style.justifyContent = "center"; div.style.justifyContent = "space-between";
div.style.alignItems = "center"; div.style.alignItems = "center";
div.style.cursor = "pointer"; div.style.cursor = "pointer";
div.style.padding="10px" div.style.padding = "10px";
div.style.backgroundColor = "red"; div.style.minWidth = "100px";
div.style.borderRadius = "20%"; div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
div.style.transform = "translateY(50px)"; div.style.transform = "translateY(70px)";
div.setAttribute("name", this.properties.title); div.setAttribute("name", this.properties.title);
var title = document.createElement("div"); var title = document.createElement("div");
@ -610,7 +638,6 @@ const createCs2 = (polygon) => {
// let jdCenter = []; // let jdCenter = [];
// if (polygon.name == "溪口镇") { // if (polygon.name == "溪口镇") {
// title_choose.value = title_choose.value + `>${polygon.name}`; // title_choose.value = title_choose.value + `>${polygon.name}`;
// console.log(title_choose.value);
// loadCs(); // loadCs();
// addPolygonCountyCs(); // addPolygonCountyCs();
// mapTownCount.map((item) => { // mapTownCount.map((item) => {
@ -623,7 +650,7 @@ const createCs2 = (polygon) => {
// }; // };
return content; return content;
} }
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, { cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center), point: new BMapGL.Point(...polygon.center),
opacity: 0.5, opacity: 0.5,
offsetY: 0, offsetY: 0,
@ -634,10 +661,10 @@ const createCs2 = (polygon) => {
type: "customOverlay", type: "customOverlay",
}, },
}); });
map.addOverlay(customOverlay); map.addOverlay(cs_number_name_arr.value[indexx]);
}; };
//添加村社 //添加村社
const createCs = (polygon) => { const createCs = (polygon, indexx) => {
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
content.style.display = "flex"; content.style.display = "flex";
@ -653,6 +680,10 @@ const createCs = (polygon) => {
div.style.justifyContent = "center"; div.style.justifyContent = "center";
div.style.alignItems = "center"; div.style.alignItems = "center";
div.style.cursor = "pointer"; 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); div.setAttribute("name", this.properties.title);
var title = document.createElement("div"); var title = document.createElement("div");
@ -671,7 +702,7 @@ const createCs = (polygon) => {
content.appendChild(img2); content.appendChild(img2);
return content; return content;
} }
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, { cs_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center), point: new BMapGL.Point(...polygon.center),
opacity: 0.5, opacity: 0.5,
offsetY: 0, offsetY: 0,
@ -681,16 +712,16 @@ const createCs = (polygon) => {
type: "customOverlay", type: "customOverlay",
}, },
}); });
map.addOverlay(customOverlay); map.addOverlay(cs_name_arr.value[indexx]);
}; };
//创建公共服务圈 //创建公共服务圈
const addggfwq = () => { const addggfwq = () => {
fwqList.value.map((item) => { fwqList.value.map((item, index) => {
createCustomOverlay(item); createCustomOverlay(item, index);
}); });
}; };
// 添加公共服务圈的图标 // 添加公共服务圈的图标
const createCustomOverlay = (polygon) => { const createCustomOverlay = (polygon, indexx) => {
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
content.style.display = "flex"; content.style.display = "flex";
@ -738,7 +769,7 @@ const createCustomOverlay = (polygon) => {
return content; return content;
} }
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, { fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.point), point: new BMapGL.Point(...polygon.point),
opacity: 0.5, opacity: 0.5,
offsetY: 0, offsetY: 0,
@ -763,7 +794,7 @@ const createCustomOverlay = (polygon) => {
// border: "0", // border: "0",
// transform: "translateX(-50%)", // transform: "translateX(-50%)",
// }); // });
map.addOverlay(customOverlay); map.addOverlay(fwq_list_arr.value[indexx]);
}; };
//地图中点 //地图中点
@ -772,7 +803,6 @@ const goMapCenter = (point, zoom) => {
}; };
const removeAllPolygon = (e) => { const removeAllPolygon = (e) => {
let allOverlay = map.getOverlays(); let allOverlay = map.getOverlays();
console.log("allOverlay", allOverlay);
for (let i = 0; i < allOverlay.length; i++) { for (let i = 0; i < allOverlay.length; i++) {
map.removeOverlay(allOverlay[i]); map.removeOverlay(allOverlay[i]);
} }
@ -794,13 +824,19 @@ const chooseArr = ref([]);
const xuanran = () => { const xuanran = () => {
addPolygonCounty(); addPolygonCounty();
if (chooseArr.value.includes("person")) { if (chooseArr.value.includes("person")) {
console.log(3434);
addJd2(); addJd2();
if (chooseArr.value.includes("jd_noNumber")) {
addPolygonCountyCs();
addCs2();
chooseArr.value = chooseArr.value.filter(
(item) => item !== "jd_noNumber"
);
chooseArr.value.push("jd_number");
}
} else { } else {
addJd(); addJd();
} }
if (chooseArr.value.includes("fwq")) { if (chooseArr.value.includes("fwq")) {
console.log(5656);
addggfwq(); addggfwq();
} }
// if (!chooseArr.value.includes("person")) { // if (!chooseArr.value.includes("person")) {
@ -815,19 +851,51 @@ const choose = ref({
}); });
const changeRs = (id) => { const changeRs = (id) => {
if (choose.value.person == 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; choose.value.person = 9999;
removeAllPolygon("person"); jdm_number_arr.value.forEach((item, index) => {
xuanran(); 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(); addJd();
// if (chooseArr.value.includes("jd_number")) {
// removeAllPolygon("person");
// xuanran();
// loadCs();
// addPolygonCountyCs();
// addCs();
// } else {
// removeAllPolygon("person");
// xuanran();
// addJd();
// }
} else { } else {
console.log(2222222); // if(chooseArr.value.includes("jd_number")){
chooseArr.value.push("person"); // chooseArr.value = chooseArr.value.filter((item) => item !== "jd_number");
// chooseArr.value.push("jd_noNumber");
// }
// chooseArr.value.push("person");
choose.value.person = id; choose.value.person = id;
choose.value.bq = 9999; choose.value.bq = 9999;
removeAllPolygon("person"); jdm_arr.value.forEach((item, index) => {
xuanran(); 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) => { const changebq = (id) => {
@ -836,19 +904,20 @@ const changebq = (id) => {
}; };
const changeFwq = (id, list, center) => { const changeFwq = (id, list, center) => {
if (choose.value.fwq == id) { 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; choose.value.fwq = 9999;
removeAllPolygon("fwq"); // removeAllPolygon("fwq");
xuanran(); fwq_list_arr.value.forEach((item, index) => {
map.removeOverlay(fwq_list_arr.value[index]);
});
// xuanran();
} else { } else {
console.log(9999); // chooseArr.value.push("fwq");
chooseArr.value.push("fwq");
choose.value.fwq = id; choose.value.fwq = id;
fwqList.value = list; fwqList.value = list;
removeAllPolygon("fwq"); // removeAllPolygon("fwq");
xuanran(); addggfwq();
console.log(1111111111, center); // xuanran();
setTimeout(() => { setTimeout(() => {
goMapCenter(center, 17); goMapCenter(center, 17);
}, 500); }, 500);
@ -863,7 +932,6 @@ const changeFwq = (id, list, center) => {
// fwqList.value.map((item) => { // fwqList.value.map((item) => {
// createCustomOverlay(item); // createCustomOverlay(item);
// }); // });
// console.log(fwqList.value);
}; };
const changeys = (id) => { const changeys = (id) => {
choose.value.yaosu = id; choose.value.yaosu = id;