This commit is contained in:
姚宇浩 2024-07-24 09:04:38 +08:00
parent d608a31f57
commit 17f5e16772
6 changed files with 230 additions and 43 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.1 KiB

View File

@ -4,7 +4,7 @@
<div class="left"> <div class="left">
<div class="lyx"> <div class="lyx">
<div class="title"> <div class="title">
<div class="title_name">龙游县</div> <div class="title_name">{{ title_choose }}</div>
<div class="title_line"></div> <div class="title_line"></div>
</div> </div>
<div class="content"> <div class="content">
@ -12,7 +12,7 @@
class="content_item" class="content_item"
v-for="(item, index) in personTotal" v-for="(item, index) in personTotal"
:class="{ choose: item.id == choose.person }" :class="{ choose: item.id == choose.person }"
@click="change(item.id, 'person')" @click="changeRs(item.id)"
:key="index" :key="index"
> >
<div class="content_item_name">{{ item.name }}</div> <div class="content_item_name">{{ item.name }}</div>
@ -30,7 +30,7 @@
class="content_item" class="content_item"
v-for="(item, index) in tsbqTotal" v-for="(item, index) in tsbqTotal"
:class="{ choose: item.id == choose.bq }" :class="{ choose: item.id == choose.bq }"
@click="change(item.id, 'bq')" @click="changebq(item.id)"
:key="index" :key="index"
> >
<div class="content_item_name">{{ item.name }}</div> <div class="content_item_name">{{ item.name }}</div>
@ -75,7 +75,7 @@
class="zyys_content_item" class="zyys_content_item"
v-for="(item, index) in yaosuTotal" v-for="(item, index) in yaosuTotal"
:class="{ choose: item.id == choose.yaosu, wz: item.wz == true }" :class="{ choose: item.id == choose.yaosu, wz: item.wz == true }"
@click="change(item.id, 'yaosu')" @click="changeys(item.id)"
:key="index" :key="index"
> >
<img :src="item.img" class="zyys_content_item_left" /> <img :src="item.img" class="zyys_content_item_left" />
@ -113,67 +113,118 @@ import j10 from "@/assets/images/map/j10.png";
import m1 from "@/assets/images/map/m1.png"; import m1 from "@/assets/images/map/m1.png";
import m2 from "@/assets/images/map/m2.png"; import m2 from "@/assets/images/map/m2.png";
import dwd from "@/assets/images/map/dwd.png"; import dwd from "@/assets/images/map/dwd.png";
import fwqbg1 from "@/assets/images/map/qlv.png";
import fwqbg2 from "@/assets/images/map/qlan.png";
import fwqbg3 from "@/assets/images/map/slan.png";
import fwqbg4 from "@/assets/images/map/slv.png";
import fwqbg5 from "@/assets/images/map/shuang.png";
const title_choose = ref("龙游县");
//
const colorList = [
{
bg: "RGBA(52, 231, 134, 1)",
},
{
bg: "RGBA(255, 206, 0, 1)",
},
{
bg: "RGBA(186, 232, 128, 1)",
},
{
bg: "RGBA(35, 146, 223, 1)",
},
{
bg: "RGBA(60, 144, 252, 1)",
},
{
bg: "RGBA(255, 142, 0, 1)",
},
{
bg: "RGBA(137, 128, 0, 1)",
},
{
bg: "RGBA(0, 207, 249, 1)",
},
{
bg: "RGBA(27, 91, 55, 1)",
},
];
// //
const mapTownCount = reactive([ const mapTownCount = reactive([
{ {
name: "龙洲街道", name: "龙洲街道",
center: [119.1573083, 29.0267445], center: [119.1573083, 28.9799445],
number: "1000",
}, },
{ {
name: "东华街道", name: "东华街道",
center: [119.209592, 29.11824], center: [119.209592, 28.9799445],
number: "1000",
}, },
{ {
name: "小南海镇", name: "小南海镇",
center: [119.169616, 29.05309], center: [119.119616, 29.07309],
number: "1000",
}, },
{ {
name: "湖镇镇", name: "湖镇镇",
center: [119.2956892, 29.0686151], center: [119.2906892, 29.0386151],
number: "1000",
}, },
{ {
name: "溪口镇", name: "溪口镇",
center: [119.1859408, 28.8479474], center: [119.1859408, 28.8879474],
number: "1000",
}, },
{ {
name: "詹家镇", name: "詹家镇",
center: [119.1401732, 29.015175], center: [119.1201732, 29.005175],
number: "1000",
}, },
{ {
name: "塔石镇", name: "塔石镇",
center: [119.1656669, 29.1373072], center: [119.1256669, 29.1373072],
number: "1000",
}, },
{ {
name: "横山镇", name: "横山镇",
center: [119.2176111, 29.1803275], center: [119.1876111, 29.1903275],
number: "1000",
}, },
{ {
name: "模环乡", name: "模环乡",
center: [119.237015, 29.240862], center: [119.237015, 29.120862],
number: "1000",
}, },
{ {
name: "石佛乡", name: "石佛乡",
center: [119.1192998, 29.1718674], center: [119.1002998, 29.2018674],
number: "1000",
}, },
{ {
name: "沐尘畲族乡", name: "沐尘畲族乡",
center: [119.1837169, 28.8314116], center: [119.1837169, 28.8014116],
number: "1000",
}, },
{ {
name: "罗家乡", name: "罗家乡",
center: [119.2453273, 28.9430851], center: [119.2453273, 28.9130851],
number: "1000",
}, },
{ {
name: "庙下乡", name: "庙下乡",
center: [119.1637175, 28.8389885], center: [119.1037175, 28.8089885],
number: "1000",
}, },
{ {
name: "大街乡", name: "大街乡",
center: [119.2664362, 28.8432149], center: [119.2664362, 28.8432149],
number: "1000",
}, },
{ {
name: "社阳乡", name: "社阳乡",
center: [119.2957367, 28.9674754], center: [119.3109367, 28.9074754],
number: "1000",
}, },
]); ]);
@ -191,6 +242,8 @@ const initMap = () => {
loadTown(); loadTown();
// //
addPolygonCounty(); addPolygonCounty();
//
addJd();
}; };
const loadTown = () => { const loadTown = () => {
for (let v of mapTown.features) { for (let v of mapTown.features) {
@ -235,11 +288,22 @@ const addPolygonCounty = () => {
map.addOverlay(polygon); map.addOverlay(polygon);
} }
}); });
// mapTownCount.map((item) => {
// createCustomOverlayJd(item);
// });
};
//
const addJd = () => {
mapTownCount.map((item) => { mapTownCount.map((item) => {
//1
createCustomOverlayJd(item); createCustomOverlayJd(item);
}); });
}; };
//2
const addJd2 = () => {
mapTownCount.map((item) => {
createCustomOverlayJd2(item);
});
};
// //
const loadCs = () => { const loadCs = () => {
for (let v of xkz.features) { for (let v of xkz.features) {
@ -261,16 +325,16 @@ const loadCs = () => {
}; };
// //
const addPolygonCountyCs = () => { const addPolygonCountyCs = () => {
console.log(888888,xkzDk); xkzDk.map((item, index) => {
let fillColor = "#red"; let num = index % 9;
xkzDk.map((item) => { let fillColor = colorList[num].bg;
// //
let points = []; let points = [];
item.point.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, { let polygonCs = new BMapGL.Polygon(points, {
strokeColor: "blue", strokeColor: fillColor,
strokeWeight: 2, strokeWeight: 2,
strokeOpacity: 0.8, strokeOpacity: 0.8,
fillColor: fillColor, fillColor: fillColor,
@ -281,7 +345,7 @@ const addPolygonCountyCs = () => {
} }
}); });
}; };
// //
const createCustomOverlayJd = (polygon) => { const createCustomOverlayJd = (polygon) => {
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
@ -301,18 +365,25 @@ const createCustomOverlayJd = (polygon) => {
div.setAttribute("name", this.properties.title); div.setAttribute("name", this.properties.title);
var title = document.createElement("div"); var title = document.createElement("div");
title.style.fontSize = "20px"; title.style.fontSize = "16px";
title.style.fontWeight = "700"; title.style.fontWeight = "600";
title.style.color = "#000000"; title.style.color = "#000000";
div.appendChild(title); div.appendChild(title);
title.appendChild(document.createTextNode(this.properties.title)); title.appendChild(document.createTextNode(this.properties.title));
content.appendChild(div); content.appendChild(div);
div.onclick = function () { div.onclick = function () {
console.log(11111111, polygon); let jdCenter = [];
if (polygon.name == "溪口镇") { if (polygon.name == "溪口镇") {
title_choose.value = title_choose.value + `>${polygon.name}`;
console.log(title_choose.value);
loadCs(); loadCs();
addPolygonCountyCs(); addPolygonCountyCs();
console.log(2222); mapTownCount.map((item) => {
if (item.name == "溪口镇") {
jdCenter = item.center;
}
});
goMapCenter(jdCenter, 14);
} }
}; };
return content; return content;
@ -328,7 +399,70 @@ const createCustomOverlayJd = (polygon) => {
}); });
map.addOverlay(customOverlay); map.addOverlay(customOverlay);
}; };
// // +(,)
const createCustomOverlayJd2 = (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.flexDirection = "column";
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);
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);
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,
type: "customOverlay",
},
});
map.addOverlay(customOverlay);
};
//
const createCustomOverlay = (polygon) => { const createCustomOverlay = (polygon) => {
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
@ -347,14 +481,15 @@ const createCustomOverlay = (polygon) => {
div.style.display = "flex"; div.style.display = "flex";
div.style.justifyContent = "center"; div.style.justifyContent = "center";
div.style.alignItems = "center"; div.style.alignItems = "center";
div.style.background = polygon.bgColor; div.style.background = `url(${fwqbg1}) no-repeat 0/100% 100%`;
div.style.cursor = "pointer"; div.style.cursor = "pointer";
div.style.transform = "translateX(30px)";
div.setAttribute("name", this.properties.title); div.setAttribute("name", this.properties.title);
var title = document.createElement("div"); var title = document.createElement("div");
title.style.fontSize = "14px"; title.style.fontSize = "14px";
title.style.fontWeight = "700"; title.style.fontWeight = "700";
title.style.marginLeft = "4px"; title.style.marginLeft = "0px";
title.style.color = "#ddd"; title.style.color = "#ddd";
div.appendChild(title); div.appendChild(title);
title.appendChild(document.createTextNode(this.properties.title)); title.appendChild(document.createTextNode(this.properties.title));
@ -379,41 +514,68 @@ const createCustomOverlay = (polygon) => {
var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, { var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.point), point: new BMapGL.Point(...polygon.point),
opacity: 0.5, opacity: 0.5,
offsetY: -10, offsetY: 0,
properties: { properties: {
title: polygon.name, title: polygon.name,
imgSrc2: dwd, imgSrc2: dwd,
type: "customOverlay", type: "customOverlay",
}, },
}); });
// var labelopts = {
// position: new BMapGL.Point(polygon.point[0], polygon.point[1]), //
// offset: new BMapGL.Size(0, -97), //
// };
// var label = new BMapGL.Label(polygon.name, labelopts);
// label.setStyle({
// color: "#fff",
// borderRadius: "1px",
// padding: "5px 13px",
// // background: `url(${b1s}) no-repeat 0/100% 100%`,
// fontSize: "15px",
// lineHeight: "20px",
// border: "0",
// transform: "translateX(-50%)",
// });
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);
}; };
const removeAllPolygon = () => { const removeAllPolygon = (e) => {
let allOverlay = map.getOverlays(); let allOverlay = map.getOverlays();
console.log("allOverlay", allOverlay); 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]);
} }
if (e == "fwq") {
addPolygonCounty(); addPolygonCounty();
addJd();
} else {
addPolygonCounty();
addJd2();
}
}; };
// //
// //
const choose = ref({ const choose = ref({
person: 0, person: 9999,
bq: 0, bq: 9999,
fwq: 100, fwq: 9999,
yaosu: 0, yaosu: 9999,
}); });
const change = (id, name) => { const changeRs = (id) => {
choose.value[name] = id; choose.value.person = id;
choose.value.bq = 9999;
removeAllPolygon("person");
};
const changebq = (id) => {
choose.value.bq = id;
choose.value.person = 9999;
}; };
const changeFwq = (id, list, center) => { const changeFwq = (id, list, center) => {
choose.value.fwq = id; choose.value.fwq = id;
removeAllPolygon(); removeAllPolygon("fwq");
fwqList.value = list; fwqList.value = list;
goMapCenter(center, 17); goMapCenter(center, 17);
fwqList.value.map((item) => { fwqList.value.map((item) => {
@ -421,6 +583,9 @@ const changeFwq = (id, list, center) => {
}); });
console.log(fwqList.value); console.log(fwqList.value);
}; };
const changeys = (id) => {
choose.value.yaosu = id;
};
// //
const personTotal = ref([ const personTotal = ref([
{ {
@ -497,6 +662,26 @@ const personTotal = ref([
// //
const tsbqTotal = ref([ const tsbqTotal = ref([
{
id: 10,
name: "退役军人",
value: "26737",
},
{
id: 20,
name: "留守",
value: "26737",
},
{
id: 30,
name: "困境儿童",
value: "26737",
},
{
id: 40,
name: "特困",
value: "26737",
},
{ {
id: 0, id: 0,
name: "低边", name: "低边",
@ -608,6 +793,7 @@ const jbfwqTotal = ref([
name: "溪口幼儿园", name: "溪口幼儿园",
point: [119.1856806, 28.8509359], point: [119.1856806, 28.8509359],
bgColor: "#00b050", bgColor: "#00b050",
}, },
{ {
name: "衢州学院附属幼儿园", name: "衢州学院附属幼儿园",
@ -1081,6 +1267,7 @@ onMounted(() => {
color: #ffffff; color: #ffffff;
height: 220px; height: 220px;
overflow: auto; overflow: auto;
.content_item { .content_item {
cursor: pointer; cursor: pointer;
box-sizing: border-box; box-sizing: border-box;
@ -1178,7 +1365,7 @@ onMounted(() => {
line-height: 48px; line-height: 48px;
} }
.jbggfwq_content_item_right { .jbggfwq_content_item_right {
width: 400px; width: 370px;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
.jbggfwq_content_item_right_item { .jbggfwq_content_item_right_item {