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);
|
||||
|
|
@ -583,7 +796,7 @@ const xuanran = () => {
|
|||
if (chooseArr.value.includes("person")) {
|
||||
console.log(3434);
|
||||
addJd2();
|
||||
}else{
|
||||
} else {
|
||||
addJd();
|
||||
}
|
||||
if (chooseArr.value.includes("fwq")) {
|
||||
|
|
@ -635,7 +848,7 @@ const changeFwq = (id, list, center) => {
|
|||
fwqList.value = list;
|
||||
removeAllPolygon("fwq");
|
||||
xuanran();
|
||||
console.log(1111111111,center);
|
||||
console.log(1111111111, center);
|
||||
setTimeout(() => {
|
||||
goMapCenter(center, 17);
|
||||
}, 500);
|
||||
|
|
@ -864,8 +1077,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#00b050",
|
||||
img: fwqbg1,
|
||||
img2: b2,
|
||||
x:33,
|
||||
y:0,
|
||||
x: 33,
|
||||
y: 0,
|
||||
},
|
||||
{
|
||||
name: "衢州学院附属幼儿园",
|
||||
|
|
@ -873,8 +1086,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#00b050",
|
||||
img: fwqbg1,
|
||||
img2: b2,
|
||||
x:55,
|
||||
y:0,
|
||||
x: 55,
|
||||
y: 0,
|
||||
},
|
||||
{
|
||||
name: "溪口中银小学",
|
||||
|
|
@ -882,8 +1095,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#00b050",
|
||||
img: fwqbg1,
|
||||
img2: b2,
|
||||
x:38,
|
||||
y:0,
|
||||
x: 38,
|
||||
y: 0,
|
||||
},
|
||||
{
|
||||
name: "溪口初中",
|
||||
|
|
@ -891,8 +1104,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#00b050",
|
||||
img: fwqbg1,
|
||||
img2: b2,
|
||||
x:33,
|
||||
y:0,
|
||||
x: 33,
|
||||
y: 0,
|
||||
},
|
||||
{
|
||||
name: "居家养老中心",
|
||||
|
|
@ -900,8 +1113,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#f4c243",
|
||||
img: fwqbg5,
|
||||
img2: b1,
|
||||
x:38,
|
||||
y:0,
|
||||
x: 38,
|
||||
y: 0,
|
||||
},
|
||||
{
|
||||
name: "共享食堂",
|
||||
|
|
@ -909,8 +1122,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#f4c243",
|
||||
img: fwqbg5,
|
||||
img2: b1,
|
||||
x:33,
|
||||
y:0,
|
||||
x: 33,
|
||||
y: 0,
|
||||
},
|
||||
{
|
||||
name: "老年活动中心",
|
||||
|
|
@ -918,8 +1131,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#f4c243",
|
||||
img: fwqbg5,
|
||||
img2: b1,
|
||||
x:38,
|
||||
y:0,
|
||||
x: 38,
|
||||
y: 0,
|
||||
},
|
||||
{
|
||||
name: "残疾人之家",
|
||||
|
|
@ -927,8 +1140,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#f4c243",
|
||||
img: fwqbg5,
|
||||
img2: b1,
|
||||
x:35,
|
||||
y:0,
|
||||
x: 35,
|
||||
y: 0,
|
||||
},
|
||||
{
|
||||
name: "智慧篮球场",
|
||||
|
|
@ -936,8 +1149,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#00b0f0",
|
||||
img: fwqbg2,
|
||||
img2: b3,
|
||||
x:34,
|
||||
y:50,
|
||||
x: 34,
|
||||
y: 50,
|
||||
},
|
||||
{
|
||||
name: "慢行步道",
|
||||
|
|
@ -945,8 +1158,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#00b0f0",
|
||||
img: fwqbg2,
|
||||
img2: b3,
|
||||
x:26,
|
||||
y:50,
|
||||
x: 26,
|
||||
y: 50,
|
||||
},
|
||||
{
|
||||
name: "文化礼堂",
|
||||
|
|
@ -954,8 +1167,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#a1ce63",
|
||||
img: fwqbg6,
|
||||
img2: b4,
|
||||
x:33,
|
||||
y:0,
|
||||
x: 33,
|
||||
y: 0,
|
||||
},
|
||||
{
|
||||
name: "综合文化站",
|
||||
|
|
@ -963,8 +1176,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#a1ce63",
|
||||
img: fwqbg6,
|
||||
img2: b4,
|
||||
x:35,
|
||||
y:0,
|
||||
x: 35,
|
||||
y: 0,
|
||||
},
|
||||
{
|
||||
name: "共享菜园",
|
||||
|
|
@ -972,8 +1185,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#a1ce63",
|
||||
img: fwqbg6,
|
||||
img2: b4,
|
||||
x:33,
|
||||
y:0,
|
||||
x: 33,
|
||||
y: 0,
|
||||
},
|
||||
{
|
||||
name: "零工市场",
|
||||
|
|
@ -981,8 +1194,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#a1ce63",
|
||||
img: fwqbg6,
|
||||
img2: b4,
|
||||
x:33,
|
||||
y:0,
|
||||
x: 33,
|
||||
y: 0,
|
||||
},
|
||||
{
|
||||
name: "溪口中心医院",
|
||||
|
|
@ -990,8 +1203,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#0070c0",
|
||||
img: fwqbg3,
|
||||
img2: b5,
|
||||
x:10,
|
||||
y:50,
|
||||
x: 10,
|
||||
y: 50,
|
||||
},
|
||||
{
|
||||
name: "溪口菜市场",
|
||||
|
|
@ -999,8 +1212,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#184e32",
|
||||
img: fwqbg4,
|
||||
img2: b6,
|
||||
x:-24,
|
||||
y:50,
|
||||
x: -24,
|
||||
y: 50,
|
||||
},
|
||||
{
|
||||
name: "大型超市",
|
||||
|
|
@ -1008,8 +1221,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#184e32",
|
||||
img: fwqbg4,
|
||||
img2: b6,
|
||||
x:-24,
|
||||
y:50,
|
||||
x: -24,
|
||||
y: 50,
|
||||
},
|
||||
{
|
||||
name: "智慧停车场",
|
||||
|
|
@ -1017,8 +1230,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#184e32",
|
||||
img: fwqbg4,
|
||||
img2: b6,
|
||||
x:-28,
|
||||
y:50,
|
||||
x: -28,
|
||||
y: 50,
|
||||
},
|
||||
{
|
||||
name: "溪口镇便民服务中心",
|
||||
|
|
@ -1026,8 +1239,8 @@ const jbfwqTotal = ref([
|
|||
bgColor: "#184e32",
|
||||
img: fwqbg4,
|
||||
img2: b6,
|
||||
x:-40,
|
||||
y:50,
|
||||
x: -40,
|
||||
y: 50,
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -1221,7 +1434,7 @@ const jbfwqTotal = ref([
|
|||
},
|
||||
],
|
||||
},
|
||||
]);//存放地图上服务圈数据
|
||||
]); //存放地图上服务圈数据
|
||||
const fwqList = ref([]);
|
||||
//资源要素
|
||||
const yaosuTotal = ref([
|
||||
|
|
|
|||
Loading…
Reference in New Issue