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;
|
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 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([
|
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 {
|
||||||
.jbggfwq_content {
|
.jbggfwq_content {
|
||||||
height: 550px;
|
height: 500px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
margin-top: 15px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-bottom: 34px;
|
||||||
|
|
||||||
.jbggfwq_content_item {
|
.jbggfwq_content_item {
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
@ -2610,8 +2614,8 @@ onMounted(() => {
|
||||||
width: 370px;
|
width: 370px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
border-radius: 6px;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
// border-radius: 6px;
|
||||||
|
|
||||||
.jbggfwq_content_item_right_item {
|
.jbggfwq_content_item_right_item {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -2666,7 +2670,6 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
.zyys {
|
.zyys {
|
||||||
margin-top: 25px;
|
|
||||||
.zyys_content {
|
.zyys_content {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -2675,14 +2678,14 @@ onMounted(() => {
|
||||||
flex-flow: row wrap;
|
flex-flow: row wrap;
|
||||||
|
|
||||||
.zyys_content_item {
|
.zyys_content_item {
|
||||||
|
width: 110px;
|
||||||
|
height: 54px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 20px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 110px;
|
|
||||||
height: 42px;
|
|
||||||
background: rgba(124, 151, 180, 0.8);
|
background: rgba(124, 151, 180, 0.8);
|
||||||
|
|
||||||
.zyys_content_item_left {
|
.zyys_content_item_left {
|
||||||
|
|
@ -2710,6 +2713,7 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
.title_name {
|
.title_name {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue