diff --git a/src/assets/images/map/qlan.png b/src/assets/images/map/qlan.png new file mode 100644 index 0000000..e446af2 Binary files /dev/null and b/src/assets/images/map/qlan.png differ diff --git a/src/assets/images/map/qlv.png b/src/assets/images/map/qlv.png new file mode 100644 index 0000000..c2060fa Binary files /dev/null and b/src/assets/images/map/qlv.png differ diff --git a/src/assets/images/map/shuang.png b/src/assets/images/map/shuang.png new file mode 100644 index 0000000..230a743 Binary files /dev/null and b/src/assets/images/map/shuang.png differ diff --git a/src/assets/images/map/slan.png b/src/assets/images/map/slan.png new file mode 100644 index 0000000..229def7 Binary files /dev/null and b/src/assets/images/map/slan.png differ diff --git a/src/assets/images/map/slv.png b/src/assets/images/map/slv.png new file mode 100644 index 0000000..3874bde Binary files /dev/null and b/src/assets/images/map/slv.png differ diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index c281e82..f3edafd 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -4,7 +4,7 @@
-
龙游县
+
{{ title_choose }}
@@ -12,7 +12,7 @@ class="content_item" v-for="(item, index) in personTotal" :class="{ choose: item.id == choose.person }" - @click="change(item.id, 'person')" + @click="changeRs(item.id)" :key="index" >
{{ item.name }}
@@ -30,7 +30,7 @@ class="content_item" v-for="(item, index) in tsbqTotal" :class="{ choose: item.id == choose.bq }" - @click="change(item.id, 'bq')" + @click="changebq(item.id)" :key="index" >
{{ item.name }}
@@ -75,7 +75,7 @@ class="zyys_content_item" v-for="(item, index) in yaosuTotal" :class="{ choose: item.id == choose.yaosu, wz: item.wz == true }" - @click="change(item.id, 'yaosu')" + @click="changeys(item.id)" :key="index" > @@ -113,72 +113,125 @@ import j10 from "@/assets/images/map/j10.png"; import m1 from "@/assets/images/map/m1.png"; import m2 from "@/assets/images/map/m2.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([ { name: "龙洲街道", - center: [119.1573083, 29.0267445], + center: [119.1573083, 28.9799445], + number: "1000", }, { name: "东华街道", - center: [119.209592, 29.11824], + center: [119.209592, 28.9799445], + number: "1000", }, { name: "小南海镇", - center: [119.169616, 29.05309], + center: [119.119616, 29.07309], + number: "1000", }, { name: "湖镇镇", - center: [119.2956892, 29.0686151], + center: [119.2906892, 29.0386151], + number: "1000", }, { name: "溪口镇", - center: [119.1859408, 28.8479474], + center: [119.1859408, 28.8879474], + number: "1000", }, { name: "詹家镇", - center: [119.1401732, 29.015175], + center: [119.1201732, 29.005175], + number: "1000", }, { name: "塔石镇", - center: [119.1656669, 29.1373072], + center: [119.1256669, 29.1373072], + number: "1000", }, { name: "横山镇", - center: [119.2176111, 29.1803275], + center: [119.1876111, 29.1903275], + number: "1000", }, { name: "模环乡", - center: [119.237015, 29.240862], + center: [119.237015, 29.120862], + number: "1000", }, { name: "石佛乡", - center: [119.1192998, 29.1718674], + center: [119.1002998, 29.2018674], + number: "1000", }, { name: "沐尘畲族乡", - center: [119.1837169, 28.8314116], + center: [119.1837169, 28.8014116], + number: "1000", }, { name: "罗家乡", - center: [119.2453273, 28.9430851], + center: [119.2453273, 28.9130851], + number: "1000", }, { name: "庙下乡", - center: [119.1637175, 28.8389885], + center: [119.1037175, 28.8089885], + number: "1000", }, { name: "大街乡", center: [119.2664362, 28.8432149], + number: "1000", }, { name: "社阳乡", - center: [119.2957367, 28.9674754], + center: [119.3109367, 28.9074754], + number: "1000", }, ]); //默认龙游县灰色地块 const mapTownDataDK = reactive([]); +//社区地块 +const xkzDk = reactive([]); var map = null; const initMap = () => { map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 }); @@ -189,6 +242,8 @@ const initMap = () => { loadTown(); //渲染地块 addPolygonCounty(); + //添加街道名 + addJd(); }; const loadTown = () => { for (let v of mapTown.features) { @@ -233,12 +288,64 @@ const addPolygonCounty = () => { map.addOverlay(polygon); } }); + // mapTownCount.map((item) => { + // createCustomOverlayJd(item); + // }); +}; +//添加街道名 +const addJd = () => { mapTownCount.map((item) => { - //相同乡镇名称，图标和名称只创建1次 createCustomOverlayJd(item); }); }; -// 添加地图上的街道名 +//添加街道名2含数量 +const addJd2 = () => { + mapTownCount.map((item) => { + createCustomOverlayJd2(item); + }); +}; +//加载村社信息 +const loadCs = () => { + for (let v of xkz.features) { + if (v.geometry.coordinates.length > 1) { + for (let w in v.geometry.coordinates) { + if (v.geometry.coordinates[w][0].length < 60) continue; + xkzDk.push({ + name: v.properties.name, + point: v.geometry.coordinates[w][0], + }); + } + } else { + xkzDk.push({ + name: v.properties.name, + point: v.geometry.coordinates[0], + }); + } + } +}; +//添加村社区块 +const addPolygonCountyCs = () => { + xkzDk.map((item, index) => { + let num = index % 9; + let fillColor = colorList[num].bg; + //地区的坐标范围 + let points = []; + item.point[0].map((p) => points.push(new BMapGL.Point(...p))); + if (points.length) { + //创建面 + let polygonCs = new BMapGL.Polygon(points, { + strokeColor: fillColor, + strokeWeight: 2, + strokeOpacity: 0.8, + fillColor: fillColor, + fillOpacity: 0.7, + name: item.name, + }); + map.addOverlay(polygonCs); + } + }); +}; +// 创建地图上的街道名 const createCustomOverlayJd = (polygon) => { function createLabelDOM() { var content = document.createElement("div"); @@ -258,13 +365,27 @@ const createCustomOverlayJd = (polygon) => { div.setAttribute("name", this.properties.title); var title = document.createElement("div"); - title.style.fontSize = "20px"; - title.style.fontWeight = "700"; + 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); - + 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, { @@ -278,7 +399,70 @@ const createCustomOverlayJd = (polygon) => { }); 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) => { function createLabelDOM() { var content = document.createElement("div"); @@ -297,14 +481,15 @@ const createCustomOverlay = (polygon) => { div.style.display = "flex"; div.style.justifyContent = "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.transform = "translateX(30px)"; div.setAttribute("name", this.properties.title); var title = document.createElement("div"); title.style.fontSize = "14px"; title.style.fontWeight = "700"; - title.style.marginLeft = "4px"; + title.style.marginLeft = "0px"; title.style.color = "#ddd"; div.appendChild(title); title.appendChild(document.createTextNode(this.properties.title)); @@ -329,41 +514,68 @@ const createCustomOverlay = (polygon) => { var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, { point: new BMapGL.Point(...polygon.point), opacity: 0.5, - offsetY: -10, + offsetY: 0, properties: { title: polygon.name, imgSrc2: dwd, 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); }; //地图中点 const goMapCenter = (point, zoom) => { map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom); }; -const removeAllPolygon = () => { +const removeAllPolygon = (e) => { let allOverlay = map.getOverlays(); console.log("allOverlay", allOverlay); for (let i = 0; i < allOverlay.length; i++) { - map.removeOverlay(allOverlay[i]); + map.removeOverlay(allOverlay[i]); + } + if (e == "fwq") { + addPolygonCounty(); + addJd(); + } else { + addPolygonCounty(); + addJd2(); } - addPolygonCounty(); }; //选项设置 //选中 const choose = ref({ - person: 0, - bq: 0, - fwq: 100, - yaosu: 0, + person: 9999, + bq: 9999, + fwq: 9999, + yaosu: 9999, }); -const change = (id, name) => { - choose.value[name] = id; +const changeRs = (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) => { choose.value.fwq = id; - removeAllPolygon(); + removeAllPolygon("fwq"); fwqList.value = list; goMapCenter(center, 17); fwqList.value.map((item) => { @@ -371,6 +583,9 @@ const changeFwq = (id, list, center) => { }); console.log(fwqList.value); }; +const changeys = (id) => { + choose.value.yaosu = id; +}; //人口数 const personTotal = ref([ { @@ -447,6 +662,26 @@ const personTotal = 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, name: "低边", @@ -558,6 +793,7 @@ const jbfwqTotal = ref([ name: "溪口幼儿园", point: [119.1856806, 28.8509359], bgColor: "#00b050", + }, { name: "衢州学院附属幼儿园", @@ -1031,6 +1267,7 @@ onMounted(() => { color: #ffffff; height: 220px; overflow: auto; + .content_item { cursor: pointer; box-sizing: border-box; @@ -1128,7 +1365,7 @@ onMounted(() => { line-height: 48px; } .jbggfwq_content_item_right { - width: 400px; + width: 370px; display: flex; flex-flow: row wrap; .jbggfwq_content_item_right_item {