服务圈
This commit is contained in:
parent
9e627aaf48
commit
57fc614931
|
@ -477,6 +477,8 @@ const message = ref({});
|
||||||
const jdm_arr = ref([]); //街道名
|
const jdm_arr = ref([]); //街道名
|
||||||
const jdm_number_arr = ref([]); //街道名(+数量)
|
const jdm_number_arr = ref([]); //街道名(+数量)
|
||||||
const fwq_list_arr = ref([]); //基本公共服务圈
|
const fwq_list_arr = ref([]); //基本公共服务圈
|
||||||
|
const fwq_dk = ref([]); //基本公共服务圈村社地块
|
||||||
|
const fwq_center = ref([]); //基本公共服务圈中心点
|
||||||
const cs_qk_arr = ref([]); //社区彩色区块
|
const cs_qk_arr = ref([]); //社区彩色区块
|
||||||
const cs_name_arr = ref([]); //社区名
|
const cs_name_arr = ref([]); //社区名
|
||||||
const cs_number_name_arr = ref([]); //社区名(+数量)
|
const cs_number_name_arr = ref([]); //社区名(+数量)
|
||||||
|
@ -1246,7 +1248,9 @@ const moveDK = async () => {
|
||||||
id: changeCsqkId.value,
|
id: changeCsqkId.value,
|
||||||
data: JSON.stringify(arrJWD),
|
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) {
|
if (res.code == 200) {
|
||||||
ElMessage.success({
|
ElMessage.success({
|
||||||
message: "保存成功",
|
message: "保存成功",
|
||||||
|
@ -2323,10 +2327,7 @@ const getDatas2 = async (e, i, cs) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if (
|
if (tsbq_pp.value.includes(i1)) {
|
||||||
|
|
||||||
tsbq_pp.value.includes(i1)
|
|
||||||
) {
|
|
||||||
} else {
|
} else {
|
||||||
if (choose.value.person == "") {
|
if (choose.value.person == "") {
|
||||||
cs_dd_arr.value.map((item, index) => {
|
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) => {
|
const changeFwq = async (id, name, names) => {
|
||||||
if (choose.value.fwq == id) {
|
if (choose.value.fwq == id) {
|
||||||
choose.value.fwq = null;
|
choose.value.fwq = null;
|
||||||
csh(); //地图初始化
|
csh(); //地图初始化
|
||||||
addPolygonCounty(); //添加地区
|
addPolygonCounty(); //添加地区
|
||||||
fwq_list_arr.value.forEach((item, index) => {
|
clearfwq();
|
||||||
map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标
|
|
||||||
});
|
|
||||||
fwq_list_arr.value = [];
|
fwq_list_arr.value = [];
|
||||||
map.removeOverlay(circle); // 清空服务圈 圆
|
// map.removeOverlay(circle); // 清空服务圈 圆
|
||||||
circle = null;
|
// circle = null;
|
||||||
} else {
|
} else {
|
||||||
csh();
|
csh();
|
||||||
|
await loadCs(name);
|
||||||
await getServiceCircle(names, name);
|
await getServiceCircle(names, name);
|
||||||
if (fwqList.value.length !== 0) {
|
if (fwqList.value.length !== 0) {
|
||||||
fwq_list_arr.value.forEach((item, index) => {
|
clearfwq();
|
||||||
map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标
|
// map.removeOverlay(circle); // 清空服务圈 圆
|
||||||
});
|
// circle = null;
|
||||||
map.removeOverlay(circle); // 清空服务圈 圆
|
|
||||||
circle = null;
|
|
||||||
fwq_list_arr.value = [];
|
fwq_list_arr.value = [];
|
||||||
choose.value.fwq = id;
|
choose.value.fwq = id;
|
||||||
map.clearOverlays(); //清空地图上所有的覆盖物
|
map.clearOverlays(); //清空地图上所有的覆盖物
|
||||||
|
@ -3126,32 +3138,24 @@ const calculateZoomLevel = (maxDistance) => {
|
||||||
const addggfwq = () => {
|
const addggfwq = () => {
|
||||||
if (fwqList.value.length !== 0) {
|
if (fwqList.value.length !== 0) {
|
||||||
data.fwqCoordinates = [];
|
data.fwqCoordinates = [];
|
||||||
// data.fwqCoordinates1 = [];
|
//创建图标
|
||||||
// data.fwqCoordinates2 = [];
|
|
||||||
fwqList.value.map((item, index) => {
|
fwqList.value.map((item, index) => {
|
||||||
data.fwqCoordinates.push(item.point);
|
data.fwqCoordinates.push(item.point);
|
||||||
// data.fwqCoordinates1.push(item.point[0]);
|
|
||||||
// data.fwqCoordinates2.push(item.point[1]);
|
|
||||||
createCustomOverlay(item, index);
|
createCustomOverlay(item, index);
|
||||||
});
|
});
|
||||||
|
//创建地块+中心点
|
||||||
|
addFwqCs();
|
||||||
|
fwq_centerList.value.map((item, index) => {
|
||||||
|
addFwqCsCenter(item, index);
|
||||||
|
});
|
||||||
const centerPoint = calculateCenterPoint(data.fwqCoordinates);
|
const centerPoint = calculateCenterPoint(data.fwqCoordinates);
|
||||||
data.fwqCoordinates1 = centerPoint[0];
|
data.fwqCoordinates1 = centerPoint[0];
|
||||||
data.fwqCoordinates2 = centerPoint[1];
|
data.fwqCoordinates2 = centerPoint[1];
|
||||||
|
|
||||||
// data.fwqCoordinates1 = calculateAverage(data.fwqCoordinates1);
|
|
||||||
// data.fwqCoordinates2 = calculateAverage(data.fwqCoordinates2);
|
|
||||||
console.log(centerPoint); // 输出中心点的经纬度
|
console.log(centerPoint); // 输出中心点的经纬度
|
||||||
// console.log("经纬度", data.fwqCoordinates1, data.fwqCoordinates2 );
|
|
||||||
|
|
||||||
let distances = []; // 初始化距离数组
|
let distances = []; // 初始化距离数组
|
||||||
fwqList.value.forEach((item) => {
|
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(
|
let distance = algorithm(
|
||||||
Number(item.point[0].replace(/[^0-9.-]/g, "")),
|
Number(item.point[0].replace(/[^0-9.-]/g, "")),
|
||||||
Number(item.point[1].replace(/[^0-9.-]/g, "")),
|
Number(item.point[1].replace(/[^0-9.-]/g, "")),
|
||||||
|
@ -3167,7 +3171,7 @@ const addggfwq = () => {
|
||||||
}
|
}
|
||||||
data.zoomLevel = calculateZoomLevel(maxDistance);
|
data.zoomLevel = calculateZoomLevel(maxDistance);
|
||||||
console.log("最大距离:", maxDistance, data.zoomLevel);
|
console.log("最大距离:", maxDistance, data.zoomLevel);
|
||||||
drawACircle(maxDistance);
|
// drawACircle(maxDistance);
|
||||||
} else {
|
} else {
|
||||||
ElMessage.warning({
|
ElMessage.warning({
|
||||||
message: "无数据",
|
message: "无数据",
|
||||||
|
@ -3274,7 +3278,9 @@ const createCustomOverlay = (polygon, indexx) => {
|
||||||
fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
|
fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
|
||||||
point: new BMapGL.Point(...polygon.point),
|
point: new BMapGL.Point(...polygon.point),
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
offsetY: 0,
|
// offsetY: 0,
|
||||||
|
offsetX: 10,
|
||||||
|
offsetY: -15,
|
||||||
properties: {
|
properties: {
|
||||||
title: polygon.name,
|
title: polygon.name,
|
||||||
imgSrc2: polygon.img2,
|
imgSrc2: polygon.img2,
|
||||||
|
@ -3298,18 +3304,113 @@ const createCustomOverlay = (polygon, indexx) => {
|
||||||
// });
|
// });
|
||||||
map.addOverlay(fwq_list_arr.value[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) => {
|
const updateFwqList = (data, townName, communityName) => {
|
||||||
// console.log(data, townName, communityName,'服务器数据');
|
// console.log(data, townName, communityName,'服务器数据');
|
||||||
let updatedFwqList = [];
|
let updatedFwqList = [];
|
||||||
jbfwqTotal.value.forEach((town) => {
|
// jbfwqTotal.value.forEach((town) => {
|
||||||
if (town.name === townName) {
|
// if (town.name === townName) {
|
||||||
town.child.forEach((community, index) => {
|
// town.child.forEach((community, index) => {
|
||||||
if (community.name === communityName) {
|
// if (community.name === communityName) {
|
||||||
updatedFwqList = data
|
fwq_cslist.value.length = 0;
|
||||||
.filter(
|
fwq_jzdk.value.length = 0;
|
||||||
(item) => item.xzjd === townName && item.jc === communityName
|
fwq_centerList.value.length = 0;
|
||||||
)
|
data.forEach((itemN) => {
|
||||||
.map((item) => ({
|
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,
|
x: 53,
|
||||||
y: 0,
|
y: 0,
|
||||||
img: fwqbg1,
|
img: fwqbg1,
|
||||||
|
@ -3320,13 +3421,12 @@ const updateFwqList = (data, townName, communityName) => {
|
||||||
textColor: "#fff",
|
textColor: "#fff",
|
||||||
bgColor: "#00b050",
|
bgColor: "#00b050",
|
||||||
}));
|
}));
|
||||||
community.fwqList = updatedFwqList;
|
// community.fwqList = updatedFwqList;
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
});
|
// });
|
||||||
fwqList.value = updatedFwqList;
|
fwqList.value = updatedFwqList;
|
||||||
// console.log(jbfwqTotal.value[4].child[0], "乡镇");
|
|
||||||
};
|
};
|
||||||
//------------------------------
|
//------------------------------
|
||||||
//-------乡镇街道级别---------
|
//-------乡镇街道级别---------
|
||||||
|
@ -3368,7 +3468,7 @@ let offsetX = 0.01095; // 街道横向偏移量
|
||||||
let offsetY = 0.00314; // 纵向偏移量
|
let offsetY = 0.00314; // 纵向偏移量
|
||||||
let offsetX2 = 0.01; // 村社横向偏移量
|
let offsetX2 = 0.01; // 村社横向偏移量
|
||||||
let offsetY2 = 0.00328; // 纵向偏移量
|
let offsetY2 = 0.00328; // 纵向偏移量
|
||||||
const isclick = ref('');
|
const isclick = ref("");
|
||||||
const addPolygonCounty = () => {
|
const addPolygonCounty = () => {
|
||||||
map.clearOverlays();
|
map.clearOverlays();
|
||||||
let fillColor = "#ffffff";
|
let fillColor = "#ffffff";
|
||||||
|
|
Loading…
Reference in New Issue