This commit is contained in:
parent
5fb88a2d2f
commit
8f92fe77cf
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue