xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

服务圈

This commit is contained in:
姚宇浩 2024-09-23 13:09:45 +08:00
parent 9e627aaf48
commit 57fc614931
1 changed files with 179 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
src/view/sy_map.vue
View File

@ -111,7 +111,7 @@
<div class="right" style="width: 517px" v-show="!showEdit">
<div class="jbggfwq">
<div class="title">
<div class="title_name" >
<div class="title_name">
<span> 基本公共服务圈</span>
</div>
</div>
@ -477,6 +477,8 @@ const message = ref({});
const jdm_arr = ref([]); //街道名
const jdm_number_arr = ref([]); //街道名(+数量)
const fwq_list_arr = ref([]); //基本公共服务圈
const fwq_dk = ref([]); //基本公共服务圈村社地块
const fwq_center = ref([]); //基本公共服务圈中心点
const cs_qk_arr = ref([]); //社区彩色区块
const cs_name_arr = ref([]); //社区名
const cs_number_name_arr = ref([]); //社区名(+数量)
@ -1246,7 +1248,9 @@ const moveDK = async () => {
id: changeCsqkId.value,
data: JSON.stringify(arrJWD),
};
await http.post(`/api/ggfwyth/regionalDivision/editVillage`, sj).then((res) => {
await http
.post(`/api/ggfwyth/regionalDivision/editVillage`, sj)
.then((res) => {
if (res.code == 200) {
ElMessage.success({
message: "保存成功",
@ -2103,7 +2107,7 @@ const getDatas = async (e, i, y = true) => {
ages: item.age + "岁",
percent: item.percent,
});
before_age = item.age+1;
before_age = item.age + 1;
}
}
});
@ -2272,7 +2276,7 @@ const getDatas2 = async (e, i, cs) => {
before_age = before_age + 1;
// before_age = item.age;
} else {
for (let k = before_age; k < item.age ; k++) {
for (let k = before_age; k < item.age; k++) {
personTotal.value.push({
rksl: 0,
age: before_age + "",
@ -2287,7 +2291,7 @@ const getDatas2 = async (e, i, cs) => {
ages: item.age + "岁",
percent: item.percent,
});
before_age = item.age+1;
before_age = item.age + 1;
}
}
});
@ -2323,10 +2327,7 @@ const getDatas2 = async (e, i, cs) => {
}
}
});
if (
tsbq_pp.value.includes(i1)
) {
if (tsbq_pp.value.includes(i1)) {
} else {
if (choose.value.person == "") {
cs_dd_arr.value.map((item, index) => {
@ -3015,26 +3016,37 @@ const getFwq = () => {
});
};
//点击服务圈村
const fwq_cslist = ref([]); //对应村社
const fwq_jzdk = ref([]); //对应地块
const fwq_centerList = ref([]); //对应中心点
const clearfwq = () => {
fwq_list_arr.value.forEach((item, index) => {
map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标
});
fwq_dk.value.forEach((item, index) => {
map.removeOverlay(fwq_dk.value[index]); // 清空服务圈 地块
});
fwq_center.value.forEach((item, index) => {
map.removeOverlay(fwq_center.value[index]); // 清空服务圈 地块中心点
});
};
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]); // 清空服务圈 图标
});
clearfwq();
fwq_list_arr.value = [];
map.removeOverlay(circle); // 清空服务圈 圆
circle = null;
// map.removeOverlay(circle); // 清空服务圈 圆
// circle = null;
} else {
csh();
await loadCs(name);
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;
clearfwq();
// map.removeOverlay(circle); // 清空服务圈 圆
// circle = null;
fwq_list_arr.value = [];
choose.value.fwq = id;
map.clearOverlays(); //清空地图上所有的覆盖物
@ -3126,32 +3138,24 @@ const calculateZoomLevel = (maxDistance) => {
const addggfwq = () => {
if (fwqList.value.length !== 0) {
data.fwqCoordinates = [];
// data.fwqCoordinates1 = [];
// data.fwqCoordinates2 = [];
//创建图标
fwqList.value.map((item, index) => {
data.fwqCoordinates.push(item.point);
// data.fwqCoordinates1.push(item.point[0]);
// data.fwqCoordinates2.push(item.point[1]);
createCustomOverlay(item, index);
});
//创建地块+中心点
addFwqCs();
fwq_centerList.value.map((item, index) => {
addFwqCsCenter(item, index);
});
const centerPoint = calculateCenterPoint(data.fwqCoordinates);
data.fwqCoordinates1 = centerPoint[0];
data.fwqCoordinates2 = centerPoint[1];
// data.fwqCoordinates1 = calculateAverage(data.fwqCoordinates1);
// data.fwqCoordinates2 = calculateAverage(data.fwqCoordinates2);
console.log(centerPoint); // 输出中心点的经纬度
// console.log("经纬度", data.fwqCoordinates1, data.fwqCoordinates2 );
let distances = []; // 初始化距离数组
fwqList.value.forEach((item) => {
// let distance = algorithm(
// (item.point[0] = Number(item.point[0].replace(/[^0-9.-]/g, ""))),
// (item.point[1] = Number(item.point[1].replace(/[^0-9.-]/g, ""))),
// data.fwqCoordinates1,
// data.fwqCoordinates2
// );
let distance = algorithm(
Number(item.point[0].replace(/[^0-9.-]/g, "")),
Number(item.point[1].replace(/[^0-9.-]/g, "")),
@ -3167,7 +3171,7 @@ const addggfwq = () => {
}
data.zoomLevel = calculateZoomLevel(maxDistance);
console.log("最大距离:", maxDistance, data.zoomLevel);
drawACircle(maxDistance);
// drawACircle(maxDistance);
} else {
ElMessage.warning({
message: "无数据",
@ -3274,7 +3278,9 @@ const createCustomOverlay = (polygon, indexx) => {
fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.point),
opacity: 0.5,
offsetY: 0,
// offsetY: 0,
offsetX: 10,
offsetY: -15,
properties: {
title: polygon.name,
imgSrc2: polygon.img2,
@ -3298,18 +3304,113 @@ const createCustomOverlay = (polygon, indexx) => {
// });
map.addOverlay(fwq_list_arr.value[indexx]);
};
//添加公共服务圈地块+中心点
const addFwqCs = () => {
fwq_dk.value.length = 0;
fwq_jzdk.value.map((item, index) => {
let num = index % 9;
let fillColor = "#ffffff";
let points = [];
item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
if (points.length) {
//创建面
fwq_dk.value[index] = new BMapGL.Polygon(points, {
strokeColor: "#5E9AD2",
strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: fillColor,
fillOpacity: 0.7,
name: item.name,
zIndex: 2,
});
map.addOverlay(fwq_dk.value[index]);
}
});
};
const addFwqCsCenter = (polygon, indexx) => {
function createLabelDOM() {
var content = document.createElement("div");
content.style.display = "flex";
content.style.flexDirection = "column";
content.style.alignItems = "center";
content.style.height = "60px";
content.style.width = "60px";
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 = "5px";
div.style.minWidth = "60px";
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
div.style.transform = "translateY(50px)";
div.setAttribute("name", this.properties.title);
var title = document.createElement("div");
title.style.fontSize = "10px";
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 = "26px";
img2.src = this.properties.imgSrc2;
content.appendChild(div);
content.appendChild(img2);
return content;
}
fwq_center.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
point: new BMapGL.Point(...polygon.center),
opacity: 0.5,
offsetX: 10,
offsetY: -15,
properties: {
title: polygon.name,
imgSrc2: dwd,
type: "customOverlay",
},
});
map.addOverlay(fwq_center.value[indexx]);
};
//
//服务点数据处理
const updateFwqList = (data, townName, communityName) => {
// console.log(data, townName, communityName,'服务器数据');
let updatedFwqList = [];
jbfwqTotal.value.forEach((town) => {
if (town.name === townName) {
town.child.forEach((community, index) => {
if (community.name === communityName) {
updatedFwqList = data
.filter(
(item) => item.xzjd === townName && item.jc === communityName
)
.map((item) => ({
// jbfwqTotal.value.forEach((town) => {
// if (town.name === townName) {
// town.child.forEach((community, index) => {
// if (community.name === communityName) {
fwq_cslist.value.length = 0;
fwq_jzdk.value.length = 0;
fwq_centerList.value.length = 0;
data.forEach((itemN) => {
if (!fwq_cslist.value.includes(itemN.csq)) {
fwq_cslist.value.push(itemN.csq);
}
});
fwq_cslist.value.forEach((fwq) => {
xkzDk.forEach((dk) => {
if (fwq == dk.name) {
fwq_jzdk.value.push(dk);
}
});
xkzCenter.forEach((center) => {
if (fwq == center.name) {
fwq_centerList.value.push(center);
}
});
});
console.log(77, fwq_centerList.value);
updatedFwqList = data.map((item) => ({
x: 53,
y: 0,
img: fwqbg1,
@ -3320,13 +3421,12 @@ const updateFwqList = (data, townName, communityName) => {
textColor: "#fff",
bgColor: "#00b050",
}));
community.fwqList = updatedFwqList;
}
});
}
});
// community.fwqList = updatedFwqList;
// }
// });
// }
// });
fwqList.value = updatedFwqList;
// console.log(jbfwqTotal.value[4].child[0], "乡镇");
};
//------------------------------
//-------乡镇街道级别---------
@ -3368,7 +3468,7 @@ let offsetX = 0.01095; // 街道横向偏移量
let offsetY = 0.00314; // 纵向偏移量
let offsetX2 = 0.01; // 村社横向偏移量
let offsetY2 = 0.00328; // 纵向偏移量
const isclick = ref('');
const isclick = ref("");
const addPolygonCounty = () => {
map.clearOverlays();
let fillColor = "#ffffff";