This commit is contained in:
parent
d9fdca24b3
commit
79101c745b
|
|
@ -240,6 +240,84 @@ const mapTownCount = reactive([
|
|||
const mapTownDataDK = reactive([]);
|
||||
//社区地块
|
||||
const xkzDk = reactive([]);
|
||||
//社区中心点
|
||||
const xkzCenter = reactive([
|
||||
{
|
||||
name: "溪口村",
|
||||
center: [119.204344, 28.862394],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "扁石村",
|
||||
center: [119.183549, 28.858],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "大垅村",
|
||||
center: [119.170309, 28.862776],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "枫林村",
|
||||
center: [119.205442, 28.862981],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "双港口村",
|
||||
center: [119.211353, 28.869576],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "灵上村",
|
||||
center: [119.177185, 28.874582],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "灵下村",
|
||||
center: [119.175233, 28.878677],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "下徐村",
|
||||
center: [119.177544, 28.882818],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "大沃口村",
|
||||
center: [119.17661, 28.880171],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "寺下村",
|
||||
center: [119.1718, 28.89816],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "大阳家村",
|
||||
center: [119.176573, 28.898746],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "石角村",
|
||||
center: [119.141602, 28.919005],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "红罗村",
|
||||
center: [119.206318, 28.913218],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "冷水村",
|
||||
center: [119.213226, 28.93395],
|
||||
number: "50",
|
||||
},
|
||||
{
|
||||
name: "新溪社区",
|
||||
center: [119.184555, 28.853068],
|
||||
number: "50",
|
||||
},
|
||||
]);
|
||||
var map = null;
|
||||
const initMap = () => {
|
||||
map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
|
||||
|
|
@ -299,11 +377,9 @@ const addPolygonCounty = () => {
|
|||
};
|
||||
//添加街道名
|
||||
const addJd = () => {
|
||||
|
||||
mapTownCount.map((item) => {
|
||||
createCustomOverlayJd(item);
|
||||
});
|
||||
|
||||
};
|
||||
//添加街道名2含数量
|
||||
const addJd2 = () => {
|
||||
|
|
@ -354,7 +430,7 @@ const addPolygonCountyCs = () => {
|
|||
}
|
||||
});
|
||||
};
|
||||
// 创建地图上的街道名
|
||||
// 添加地图上的街道名
|
||||
const createCustomOverlayJd = (polygon) => {
|
||||
function createLabelDOM() {
|
||||
var content = document.createElement("div");
|
||||
|
|
@ -392,6 +468,7 @@ const createCustomOverlayJd = (polygon) => {
|
|||
jdCenter = item.center;
|
||||
}
|
||||
});
|
||||
addCs();
|
||||
goMapCenter(jdCenter, 14);
|
||||
}
|
||||
};
|
||||
|
|
@ -408,7 +485,7 @@ const createCustomOverlayJd = (polygon) => {
|
|||
});
|
||||
map.addOverlay(customOverlay);
|
||||
};
|
||||
// 创建地图上的街道名+(人数,标签)
|
||||
// 添加地图上的街道名+(人数,标签)
|
||||
const createCustomOverlayJd2 = (polygon) => {
|
||||
function createLabelDOM() {
|
||||
var content = document.createElement("div");
|
||||
|
|
@ -454,6 +531,7 @@ const createCustomOverlayJd2 = (polygon) => {
|
|||
jdCenter = item.center;
|
||||
}
|
||||
});
|
||||
addCs2();
|
||||
goMapCenter(jdCenter, 14);
|
||||
}
|
||||
};
|
||||
|
|
@ -471,6 +549,140 @@ const createCustomOverlayJd2 = (polygon) => {
|
|||
});
|
||||
map.addOverlay(customOverlay);
|
||||
};
|
||||
//创建村社
|
||||
const addCs = () => {
|
||||
xkzCenter.map((item) => {
|
||||
createCs(item);
|
||||
});
|
||||
};
|
||||
//创建村社
|
||||
const addCs2 = () => {
|
||||
xkzCenter.map((item) => {
|
||||
createCs2(item);
|
||||
});
|
||||
};
|
||||
//添加村社+(人数,标签)
|
||||
const createCs2 = (polygon) => {
|
||||
function createLabelDOM() {
|
||||
var content = document.createElement("div");
|
||||
content.style.display = "flex";
|
||||
content.style.flexDirection = "column";
|
||||
content.style.alignItems = "center";
|
||||
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
|
||||
|
||||
var div = document.createElement("div");
|
||||
div.style.color = "#333";
|
||||
div.style.whiteSpace = "nowrap";
|
||||
div.style.MozUserSelect = "none";
|
||||
div.style.display = "flex";
|
||||
div.style.justifyContent = "center";
|
||||
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.setAttribute("name", this.properties.title);
|
||||
|
||||
var title = document.createElement("div");
|
||||
title.style.fontSize = "16px";
|
||||
title.style.fontWeight = "600";
|
||||
title.style.color = "#000000";
|
||||
div.appendChild(title);
|
||||
title.appendChild(document.createTextNode(this.properties.title));
|
||||
content.appendChild(div);
|
||||
|
||||
var number = document.createElement("div");
|
||||
number.style.fontSize = "16px";
|
||||
number.style.fontWeight = "600";
|
||||
number.style.color = "rgba(0, 255, 189, 1)";
|
||||
div.appendChild(number);
|
||||
number.appendChild(document.createTextNode(this.properties.number));
|
||||
content.appendChild(div);
|
||||
let img2 = document.createElement("img");
|
||||
img2.style.width = "20px";
|
||||
img2.style.height = "20px";
|
||||
img2.src = this.properties.imgSrc2;
|
||||
|
||||
content.appendChild(div);
|
||||
content.appendChild(img2);
|
||||
// div.onclick = function () {
|
||||
// let jdCenter = [];
|
||||
// if (polygon.name == "溪口镇") {
|
||||
// title_choose.value = title_choose.value + `>${polygon.name}`;
|
||||
// console.log(title_choose.value);
|
||||
// loadCs();
|
||||
// addPolygonCountyCs();
|
||||
// mapTownCount.map((item) => {
|
||||
// if (item.name == "溪口镇") {
|
||||
// jdCenter = item.center;
|
||||
// }
|
||||
// });
|
||||
// goMapCenter(jdCenter, 14);
|
||||
// }
|
||||
// };
|
||||
return content;
|
||||
}
|
||||
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
|
||||
point: new BMapGL.Point(...polygon.center),
|
||||
opacity: 0.5,
|
||||
offsetY: 0,
|
||||
properties: {
|
||||
title: polygon.name,
|
||||
number: polygon.number,
|
||||
imgSrc2: dwd,
|
||||
type: "customOverlay",
|
||||
},
|
||||
});
|
||||
map.addOverlay(customOverlay);
|
||||
};
|
||||
//添加村社
|
||||
const createCs = (polygon) => {
|
||||
function createLabelDOM() {
|
||||
var content = document.createElement("div");
|
||||
content.style.display = "flex";
|
||||
content.style.flexDirection = "column";
|
||||
content.style.alignItems = "center";
|
||||
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
|
||||
|
||||
var div = document.createElement("div");
|
||||
div.style.color = "#333";
|
||||
div.style.whiteSpace = "nowrap";
|
||||
div.style.MozUserSelect = "none";
|
||||
div.style.display = "flex";
|
||||
div.style.justifyContent = "center";
|
||||
div.style.alignItems = "center";
|
||||
div.style.cursor = "pointer";
|
||||
div.setAttribute("name", this.properties.title);
|
||||
|
||||
var title = document.createElement("div");
|
||||
title.style.fontSize = "16px";
|
||||
title.style.fontWeight = "600";
|
||||
title.style.color = "#000000";
|
||||
div.appendChild(title);
|
||||
title.appendChild(document.createTextNode(this.properties.title));
|
||||
content.appendChild(div);
|
||||
let img2 = document.createElement("img");
|
||||
img2.style.width = "20px";
|
||||
img2.style.height = "20px";
|
||||
img2.src = this.properties.imgSrc2;
|
||||
|
||||
content.appendChild(div);
|
||||
content.appendChild(img2);
|
||||
return content;
|
||||
}
|
||||
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
|
||||
point: new BMapGL.Point(...polygon.center),
|
||||
opacity: 0.5,
|
||||
offsetY: 0,
|
||||
properties: {
|
||||
title: polygon.name,
|
||||
imgSrc2: dwd,
|
||||
type: "customOverlay",
|
||||
},
|
||||
});
|
||||
map.addOverlay(customOverlay);
|
||||
};
|
||||
//创建公共服务圈
|
||||
const addggfwq = () => {
|
||||
fwqList.value.map((item) => {
|
||||
|
|
@ -553,6 +765,7 @@ const createCustomOverlay = (polygon) => {
|
|||
// });
|
||||
map.addOverlay(customOverlay);
|
||||
};
|
||||
|
||||
//地图中点
|
||||
const goMapCenter = (point, zoom) => {
|
||||
map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom);
|
||||
|
|
|
|||
Loading…
Reference in New Issue