diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index cad8917..d8041d2 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -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,11 +848,11 @@ const changeFwq = (id, list, center) => { fwqList.value = list; removeAllPolygon("fwq"); xuanran(); - console.log(1111111111,center); + console.log(1111111111, center); setTimeout(() => { goMapCenter(center, 17); }, 500); - + // addggfwq() } @@ -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([