diff --git a/src/view/sy_mapcopy.vue b/src/view/sy_mapcopy.vue index 4efe88a..82e8ffc 100644 --- a/src/view/sy_mapcopy.vue +++ b/src/view/sy_mapcopy.vue @@ -739,204 +739,10 @@ const jbfwqTotal = ref([ ], }, ]); //存放地图上服务圈数据 -//点击服务圈村 -const changeFwq = async (id, name, names) => { - if (choose.value.fwq == id) { - choose.value.fwq = null; - csh(); //地图初始化 - addPolygonCounty(); //添加地区 - fwq_list_arr.value.forEach((item, index) => { - map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标 - }); - fwq_list_arr.value = []; - map.removeOverlay(circle); // 清空服务圈 圆 - circle = null; - // drawACircle("hide"); //隐藏服务圈 圆 - } else { - clear() - await getServiceCircle(names, name); - if (fwqList.value.length !== 0) { - fwq_list_arr.value.forEach((item, index) => { - map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标 - }); - map.removeOverlay(circle); // 清空服务圈 圆 - circle = null; - fwq_list_arr.value = []; - choose.value.fwq = id; - map.clearOverlays(); //清空地图上所有的覆盖物 - choose.value.person = ""; - addggfwq(); //创建公共服务圈 - setTimeout(() => { - goMapCenter([data.fwqCoordinates1, data.fwqCoordinates2], 16); //中心点缩放 - }, 500); - } else { - ElMessage.warning("无数据"); - } - } -}; -// 服务圈数据 -const getServiceCircle = async (communityName, townName) => { - try { - const response = await http.get( - `/api/ggfwyth/ysyzt/zyysxx?csq=${communityName}&xzjd=${townName}` - ); - if (response.code === 200) { - updateFwqList(response.data, townName, communityName); - } - } catch (error) { - console.error("Error fetching data:", error); - } -}; -//创建公共服务圈 -const addggfwq = () => { - if (fwqList.value.length !== 0) { - data.fwqCoordinates1 = []; - data.fwqCoordinates2 = []; - fwqList.value.map((item, index) => { - data.fwqCoordinates1.push(item.point[0]); - data.fwqCoordinates2.push(item.point[1]); - createCustomOverlay(item, index); - }); - function calculateAverage(coordinates) { - const numericCoordinates = coordinates.map(Number); // 将字符串转换为数字 - const sum = numericCoordinates.reduce((acc, val) => acc + val, 0); // 计算总和 - const average = sum / numericCoordinates.length; // 计算平均值 - return parseFloat(average.toFixed(5)); // 保留5位小数并转换为数字 - } - data.fwqCoordinates1 = calculateAverage(data.fwqCoordinates1); - data.fwqCoordinates2 = calculateAverage(data.fwqCoordinates2); - drawACircle(); - } else { - ElMessage.warning("无数据"); - } -}; -// 添加服务圈 + var circle; -const drawACircle = (v) => { - console.log("经纬度", data.fwqCoordinates1, data.fwqCoordinates2); - if (!circle) { - var point = new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2); - circle = new BMapGL.Circle(point, 1000, { - strokeColor: "yellow", - strokeWeight: 2, - strokeOpacity: 0.8, - fillOpacity: 0.1, - strokeStyle: "dashed", - zIndex: 99, - // fillColor: "yellow", - }); - map.addOverlay(circle); - } -}; const fwqList = ref([]); -// 添加公共服务圈的图标 -const createCustomOverlay = (polygon, indexx) => { - // data.fwqCoordinates = polygon.point; - function createLabelDOM() { - var content = document.createElement("div"); - content.style.display = "flex"; - content.style.flexDirection = "column"; - content.style.alignItems = "center"; - content.style.height = "40px"; - content.style.width = "40px"; - content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); - var div = document.createElement("div"); - div.style.color = "#ddd"; - div.style.padding = `${polygon.padding}`; - div.style.whiteSpace = "nowrap"; - div.style.MozUserSelect = "none"; - div.style.fontSize = "12px"; - div.style.borderRadius = "10px"; - div.style.display = "flex"; - div.style.justifyContent = "center"; - div.style.alignItems = "center"; - div.style.background = `url(${polygon.img}) no-repeat 0/100% 100%`; - div.style.cursor = "pointer"; - div.style.transform = `translate(${polygon.x}px,${polygon.y}px)`; - div.setAttribute("name", this.properties.title); - - var title = document.createElement("div"); - title.style.fontSize = "14px"; - title.style.fontWeight = "700"; - title.style.marginLeft = "0px"; - title.style.color = `${polygon.textColor}`; - div.appendChild(title); - title.appendChild(document.createTextNode(this.properties.title)); - - 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 () { - // addPolygonTown(this.getAttribute('name')) - // removeCustomOverlay() - // addStage(this.getAttribute('name')) - // state.mapStatus = 1 - // } - - return content; - } - fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { - point: new BMapGL.Point(...polygon.point), - opacity: 0.5, - offsetY: 0, - properties: { - title: polygon.name, - imgSrc2: polygon.img2, - 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(fwq_list_arr.value[indexx]); -}; -const updateFwqList = (data, townName, communityName) => { - let updatedFwqList = []; - jbfwqTotal.value.forEach((town) => { - if (town.name === townName) { - town.child.forEach((community) => { - if (community.name === communityName) { - updatedFwqList = data - .filter( - (item) => item.xzjd === townName && item.csq === communityName - ) - .map((item) => ({ - x: 53, - y: 0, - img: fwqbg1, - img2: b2, - name: item.zyysmc, - point: [item.jd, item.wd], - padding: "4px 8px 10px", - textColor: "#fff", - bgColor: "#00b050", - })); - community.fwqList = updatedFwqList; - } - }); - } - }); - fwqList.value = updatedFwqList; - // console.log(jbfwqTotal.value[4].child[0], "乡镇"); -}; //资源要素 const yaosuTotal = ref([ { @@ -1569,6 +1375,203 @@ const to_jd = (item_name) => { } // } }; +//--------公共服务圈----------- +//点击服务圈村 +const changeFwq = async (id, name, names) => { + if (choose.value.fwq == id) { + choose.value.fwq = null; + csh(); //地图初始化 + addPolygonCounty(); //添加地区 + fwq_list_arr.value.forEach((item, index) => { + map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标 + }); + fwq_list_arr.value = []; + map.removeOverlay(circle); // 清空服务圈 圆 + circle = null; + // drawACircle("hide"); //隐藏服务圈 圆 + } else { + csh() + await getServiceCircle(names, name); + if (fwqList.value.length !== 0) { + fwq_list_arr.value.forEach((item, index) => { + map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标 + }); + map.removeOverlay(circle); // 清空服务圈 圆 + circle = null; + fwq_list_arr.value = []; + choose.value.fwq = id; + map.clearOverlays(); //清空地图上所有的覆盖物 + // choose.value.person = ""; + addggfwq(); //创建公共服务圈 + setTimeout(() => { + goMapCenter([data.fwqCoordinates1, data.fwqCoordinates2], 16); //中心点缩放 + }, 500); + } else { + ElMessage.warning("无数据"); + } + } +}; +// 服务圈数据 +const getServiceCircle = async (communityName, townName) => { + try { + const response = await http.get( + `/api/ggfwyth/ysyzt/zyysxx?csq=${communityName}&xzjd=${townName}` + ); + if (response.code === 200) { + updateFwqList(response.data, townName, communityName); + } + } catch (error) { + console.error("Error fetching data:", error); + } +}; +//创建公共服务圈 +const addggfwq = () => { + if (fwqList.value.length !== 0) { + data.fwqCoordinates1 = []; + data.fwqCoordinates2 = []; + fwqList.value.map((item, index) => { + data.fwqCoordinates1.push(item.point[0]); + data.fwqCoordinates2.push(item.point[1]); + createCustomOverlay(item, index); + }); + function calculateAverage(coordinates) { + const numericCoordinates = coordinates.map(Number); // 将字符串转换为数字 + const sum = numericCoordinates.reduce((acc, val) => acc + val, 0); // 计算总和 + const average = sum / numericCoordinates.length; // 计算平均值 + return parseFloat(average.toFixed(5)); // 保留5位小数并转换为数字 + } + data.fwqCoordinates1 = calculateAverage(data.fwqCoordinates1); + data.fwqCoordinates2 = calculateAverage(data.fwqCoordinates2); + drawACircle(); + } else { + ElMessage.warning("无数据"); + } +}; +// 添加服务圈 +const drawACircle = (v) => { + console.log("经纬度", data.fwqCoordinates1, data.fwqCoordinates2); + if (!circle) { + var point = new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2); + circle = new BMapGL.Circle(point, 1000, { + strokeColor: "yellow", + strokeWeight: 2, + strokeOpacity: 0.8, + fillOpacity: 0.1, + strokeStyle: "dashed", + zIndex: 99, + // fillColor: "yellow", + }); + map.addOverlay(circle); + } +}; +// 添加公共服务圈的图标 +const createCustomOverlay = (polygon, indexx) => { + // data.fwqCoordinates = polygon.point; + function createLabelDOM() { + var content = document.createElement("div"); + content.style.display = "flex"; + content.style.flexDirection = "column"; + content.style.alignItems = "center"; + content.style.height = "40px"; + content.style.width = "40px"; + content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat); + + var div = document.createElement("div"); + div.style.color = "#ddd"; + div.style.padding = `${polygon.padding}`; + div.style.whiteSpace = "nowrap"; + div.style.MozUserSelect = "none"; + div.style.fontSize = "12px"; + div.style.borderRadius = "10px"; + div.style.display = "flex"; + div.style.justifyContent = "center"; + div.style.alignItems = "center"; + div.style.background = `url(${polygon.img}) no-repeat 0/100% 100%`; + div.style.cursor = "pointer"; + div.style.transform = `translate(${polygon.x}px,${polygon.y}px)`; + div.setAttribute("name", this.properties.title); + + var title = document.createElement("div"); + title.style.fontSize = "14px"; + title.style.fontWeight = "700"; + title.style.marginLeft = "0px"; + title.style.color = `${polygon.textColor}`; + div.appendChild(title); + title.appendChild(document.createTextNode(this.properties.title)); + + 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 () { + // addPolygonTown(this.getAttribute('name')) + // removeCustomOverlay() + // addStage(this.getAttribute('name')) + // state.mapStatus = 1 + // } + + return content; + } + fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, { + point: new BMapGL.Point(...polygon.point), + opacity: 0.5, + offsetY: 0, + properties: { + title: polygon.name, + imgSrc2: polygon.img2, + 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(fwq_list_arr.value[indexx]); +}; +const updateFwqList = (data, townName, communityName) => { + let updatedFwqList = []; + jbfwqTotal.value.forEach((town) => { + if (town.name === townName) { + town.child.forEach((community) => { + if (community.name === communityName) { + updatedFwqList = data + .filter( + (item) => item.xzjd === townName && item.csq === communityName + ) + .map((item) => ({ + x: 53, + y: 0, + img: fwqbg1, + img2: b2, + name: item.zyysmc, + point: [item.jd, item.wd], + padding: "4px 8px 10px", + textColor: "#fff", + bgColor: "#00b050", + })); + community.fwqList = updatedFwqList; + } + }); + } + }); + fwqList.value = updatedFwqList; + // console.log(jbfwqTotal.value[4].child[0], "乡镇"); +}; //------------------------------ //-------乡镇街道级别--------- //加载乡镇信息 @@ -2587,11 +2590,12 @@ onMounted(() => { .jbggfwq { .jbggfwq_content { - height: 550px; + height: 500px; overflow: auto; - margin-top: 15px; display: flex; flex-direction: column; + margin-top: 15px; + margin-bottom: 34px; .jbggfwq_content_item { margin-bottom: 5px; @@ -2610,8 +2614,8 @@ onMounted(() => { width: 370px; display: flex; flex-flow: row wrap; - border-radius: 6px; overflow: hidden; + // border-radius: 6px; .jbggfwq_content_item_right_item { cursor: pointer; @@ -2666,7 +2670,6 @@ onMounted(() => { } .zyys { - margin-top: 25px; .zyys_content { margin-top: 20px; box-sizing: border-box; @@ -2675,14 +2678,14 @@ onMounted(() => { flex-flow: row wrap; .zyys_content_item { + width: 110px; + height: 54px; cursor: pointer; - margin-bottom: 15px; + margin-bottom: 20px; color: #ffffff; display: flex; align-items: center; justify-content: center; - width: 110px; - height: 42px; background: rgba(124, 151, 180, 0.8); .zyys_content_item_left { @@ -2710,6 +2713,7 @@ onMounted(() => { } } + .title { .title_name { cursor: pointer;