This commit is contained in:
parent
ff2d2f4817
commit
847bf45e98
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
|
|
@ -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 = () => {
|
||||
if (center_now.value[0] == 119.178783) {
|
||||
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 = () => {
|
||||
|
|
@ -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 == "溪口镇") {
|
||||
if (!title_choose.value.includes("溪口镇")) {
|
||||
title_choose.value = title_choose.value + `>${polygon.name}`;
|
||||
console.log(title_choose.value);
|
||||
}
|
||||
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) => {
|
||||
|
|
@ -532,12 +559,13 @@ const createCustomOverlayJd2 = (polygon) => {
|
|||
}
|
||||
});
|
||||
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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue