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

gx

This commit is contained in:
姚宇浩 2024-07-24 11:44:17 +08:00
parent d9fdca24b3
commit 79101c745b
1 changed files with 259 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

305
src/view/sy_map.vue
View File

@ -240,6 +240,84 @@ const mapTownCount = reactive([
const mapTownDataDK = reactive([]); const mapTownDataDK = reactive([]);
//社区地块 //社区地块
const xkzDk = 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; 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 });
@ -299,11 +377,9 @@ const addPolygonCounty = () => {
}; };
//添加街道名 //添加街道名
const addJd = () => { const addJd = () => {
mapTownCount.map((item) => { mapTownCount.map((item) => {
createCustomOverlayJd(item); createCustomOverlayJd(item);
}); });
}; };
//添加街道名2含数量 //添加街道名2含数量
const addJd2 = () => { const addJd2 = () => {
@ -354,7 +430,7 @@ const addPolygonCountyCs = () => {
} }
}); });
}; };
// 创建地图上的街道名 // 添加地图上的街道名
const createCustomOverlayJd = (polygon) => { const createCustomOverlayJd = (polygon) => {
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
@ -392,6 +468,7 @@ const createCustomOverlayJd = (polygon) => {
jdCenter = item.center; jdCenter = item.center;
} }
}); });
addCs();
goMapCenter(jdCenter, 14); goMapCenter(jdCenter, 14);
} }
}; };
@ -408,7 +485,7 @@ const createCustomOverlayJd = (polygon) => {
}); });
map.addOverlay(customOverlay); map.addOverlay(customOverlay);
}; };
// 创建地图上的街道名+(人数,标签) // 添加地图上的街道名+(人数,标签)
const createCustomOverlayJd2 = (polygon) => { const createCustomOverlayJd2 = (polygon) => {
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
@ -454,6 +531,7 @@ const createCustomOverlayJd2 = (polygon) => {
jdCenter = item.center; jdCenter = item.center;
} }
}); });
addCs2();
goMapCenter(jdCenter, 14); goMapCenter(jdCenter, 14);
} }
}; };
@ -471,6 +549,140 @@ const createCustomOverlayJd2 = (polygon) => {
}); });
map.addOverlay(customOverlay); 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 = () => { const addggfwq = () => {
fwqList.value.map((item) => { fwqList.value.map((item) => {
@ -553,6 +765,7 @@ const createCustomOverlay = (polygon) => {
// }); // });
map.addOverlay(customOverlay); map.addOverlay(customOverlay);
}; };
//地图中点 //地图中点
const goMapCenter = (point, zoom) => { const goMapCenter = (point, zoom) => {
map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom); map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom);
@ -583,7 +796,7 @@ const xuanran = () => {
if (chooseArr.value.includes("person")) { if (chooseArr.value.includes("person")) {
console.log(3434); console.log(3434);
addJd2(); addJd2();
}else{ } else {
addJd(); addJd();
} }
if (chooseArr.value.includes("fwq")) { if (chooseArr.value.includes("fwq")) {
@ -635,11 +848,11 @@ const changeFwq = (id, list, center) => {
fwqList.value = list; fwqList.value = list;
removeAllPolygon("fwq"); removeAllPolygon("fwq");
xuanran(); xuanran();
console.log(1111111111,center); console.log(1111111111, center);
setTimeout(() => { setTimeout(() => {
goMapCenter(center, 17); goMapCenter(center, 17);
}, 500); }, 500);
// addggfwq() // addggfwq()
} }
@ -864,8 +1077,8 @@ const jbfwqTotal = ref([
bgColor: "#00b050", bgColor: "#00b050",
img: fwqbg1, img: fwqbg1,
img2: b2, img2: b2,
x:33, x: 33,
y:0, y: 0,
}, },
{ {
name: "衢州学院附属幼儿园", name: "衢州学院附属幼儿园",
@ -873,8 +1086,8 @@ const jbfwqTotal = ref([
bgColor: "#00b050", bgColor: "#00b050",
img: fwqbg1, img: fwqbg1,
img2: b2, img2: b2,
x:55, x: 55,
y:0, y: 0,
}, },
{ {
name: "溪口中银小学", name: "溪口中银小学",
@ -882,8 +1095,8 @@ const jbfwqTotal = ref([
bgColor: "#00b050", bgColor: "#00b050",
img: fwqbg1, img: fwqbg1,
img2: b2, img2: b2,
x:38, x: 38,
y:0, y: 0,
}, },
{ {
name: "溪口初中", name: "溪口初中",
@ -891,8 +1104,8 @@ const jbfwqTotal = ref([
bgColor: "#00b050", bgColor: "#00b050",
img: fwqbg1, img: fwqbg1,
img2: b2, img2: b2,
x:33, x: 33,
y:0, y: 0,
}, },
{ {
name: "居家养老中心", name: "居家养老中心",
@ -900,8 +1113,8 @@ const jbfwqTotal = ref([
bgColor: "#f4c243", bgColor: "#f4c243",
img: fwqbg5, img: fwqbg5,
img2: b1, img2: b1,
x:38, x: 38,
y:0, y: 0,
}, },
{ {
name: "共享食堂", name: "共享食堂",
@ -909,8 +1122,8 @@ const jbfwqTotal = ref([
bgColor: "#f4c243", bgColor: "#f4c243",
img: fwqbg5, img: fwqbg5,
img2: b1, img2: b1,
x:33, x: 33,
y:0, y: 0,
}, },
{ {
name: "老年活动中心", name: "老年活动中心",
@ -918,8 +1131,8 @@ const jbfwqTotal = ref([
bgColor: "#f4c243", bgColor: "#f4c243",
img: fwqbg5, img: fwqbg5,
img2: b1, img2: b1,
x:38, x: 38,
y:0, y: 0,
}, },
{ {
name: "残疾人之家", name: "残疾人之家",
@ -927,8 +1140,8 @@ const jbfwqTotal = ref([
bgColor: "#f4c243", bgColor: "#f4c243",
img: fwqbg5, img: fwqbg5,
img2: b1, img2: b1,
x:35, x: 35,
y:0, y: 0,
}, },
{ {
name: "智慧篮球场", name: "智慧篮球场",
@ -936,8 +1149,8 @@ const jbfwqTotal = ref([
bgColor: "#00b0f0", bgColor: "#00b0f0",
img: fwqbg2, img: fwqbg2,
img2: b3, img2: b3,
x:34, x: 34,
y:50, y: 50,
}, },
{ {
name: "慢行步道", name: "慢行步道",
@ -945,8 +1158,8 @@ const jbfwqTotal = ref([
bgColor: "#00b0f0", bgColor: "#00b0f0",
img: fwqbg2, img: fwqbg2,
img2: b3, img2: b3,
x:26, x: 26,
y:50, y: 50,
}, },
{ {
name: "文化礼堂", name: "文化礼堂",
@ -954,8 +1167,8 @@ const jbfwqTotal = ref([
bgColor: "#a1ce63", bgColor: "#a1ce63",
img: fwqbg6, img: fwqbg6,
img2: b4, img2: b4,
x:33, x: 33,
y:0, y: 0,
}, },
{ {
name: "综合文化站", name: "综合文化站",
@ -963,8 +1176,8 @@ const jbfwqTotal = ref([
bgColor: "#a1ce63", bgColor: "#a1ce63",
img: fwqbg6, img: fwqbg6,
img2: b4, img2: b4,
x:35, x: 35,
y:0, y: 0,
}, },
{ {
name: "共享菜园", name: "共享菜园",
@ -972,8 +1185,8 @@ const jbfwqTotal = ref([
bgColor: "#a1ce63", bgColor: "#a1ce63",
img: fwqbg6, img: fwqbg6,
img2: b4, img2: b4,
x:33, x: 33,
y:0, y: 0,
}, },
{ {
name: "零工市场", name: "零工市场",
@ -981,8 +1194,8 @@ const jbfwqTotal = ref([
bgColor: "#a1ce63", bgColor: "#a1ce63",
img: fwqbg6, img: fwqbg6,
img2: b4, img2: b4,
x:33, x: 33,
y:0, y: 0,
}, },
{ {
name: "溪口中心医院", name: "溪口中心医院",
@ -990,8 +1203,8 @@ const jbfwqTotal = ref([
bgColor: "#0070c0", bgColor: "#0070c0",
img: fwqbg3, img: fwqbg3,
img2: b5, img2: b5,
x:10, x: 10,
y:50, y: 50,
}, },
{ {
name: "溪口菜市场", name: "溪口菜市场",
@ -999,8 +1212,8 @@ const jbfwqTotal = ref([
bgColor: "#184e32", bgColor: "#184e32",
img: fwqbg4, img: fwqbg4,
img2: b6, img2: b6,
x:-24, x: -24,
y:50, y: 50,
}, },
{ {
name: "大型超市", name: "大型超市",
@ -1008,8 +1221,8 @@ const jbfwqTotal = ref([
bgColor: "#184e32", bgColor: "#184e32",
img: fwqbg4, img: fwqbg4,
img2: b6, img2: b6,
x:-24, x: -24,
y:50, y: 50,
}, },
{ {
name: "智慧停车场", name: "智慧停车场",
@ -1017,8 +1230,8 @@ const jbfwqTotal = ref([
bgColor: "#184e32", bgColor: "#184e32",
img: fwqbg4, img: fwqbg4,
img2: b6, img2: b6,
x:-28, x: -28,
y:50, y: 50,
}, },
{ {
name: "溪口镇便民服务中心", name: "溪口镇便民服务中心",
@ -1026,8 +1239,8 @@ const jbfwqTotal = ref([
bgColor: "#184e32", bgColor: "#184e32",
img: fwqbg4, img: fwqbg4,
img2: b6, img2: b6,
x:-40, x: -40,
y:50, y: 50,
}, },
], ],
}, },
@ -1221,7 +1434,7 @@ const jbfwqTotal = ref([
}, },
], ],
}, },
]);//存放地图上服务圈数据 ]); //存放地图上服务圈数据
const fwqList = ref([]); const fwqList = ref([]);
//资源要素 //资源要素
const yaosuTotal = ref([ const yaosuTotal = ref([