服务圈
This commit is contained in:
parent
9e627aaf48
commit
57fc614931
|
|
@ -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,13 +1248,15 @@ const moveDK = async () => {
|
|||
id: changeCsqkId.value,
|
||||
data: JSON.stringify(arrJWD),
|
||||
};
|
||||
await http.post(`/api/ggfwyth/regionalDivision/editVillage`, sj).then((res) => {
|
||||
if (res.code == 200) {
|
||||
ElMessage.success({
|
||||
message: "保存成功",
|
||||
});
|
||||
}
|
||||
});
|
||||
await http
|
||||
.post(`/api/ggfwyth/regionalDivision/editVillage`, sj)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
ElMessage.success({
|
||||
message: "保存成功",
|
||||
});
|
||||
}
|
||||
});
|
||||
await getCssj();
|
||||
await loadCs(cfJd.value);
|
||||
cs_choose_arr.value.forEach((item, index) => {
|
||||
|
|
@ -2023,12 +2027,12 @@ const getDatasL = async (e, i) => {
|
|||
if (title_jd.value == "") {
|
||||
} else {
|
||||
if (cfCs.value) {
|
||||
cs_dd_arr.value = [...xuanzhongCs.value];
|
||||
cs_dd_arr.value.map((item, index) => {
|
||||
DGcreateCs2(item, index);
|
||||
});
|
||||
cs_dd_arr.value = [...xuanzhongCs.value];
|
||||
cs_dd_arr.value.map((item, index) => {
|
||||
DGcreateCs2(item, index);
|
||||
});
|
||||
} else {
|
||||
addCs2();
|
||||
addCs2();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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) => {
|
||||
|
|
@ -2468,19 +2469,19 @@ const getDataBqs2 = async (jd, cs, bq) => {
|
|||
// DGcreateCs(item, index);
|
||||
// });
|
||||
// } else {
|
||||
cs_dd_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(cs_dd_arr.value[index]);
|
||||
});
|
||||
cs_dd_arr.value = [...xuanzhongCs.value];
|
||||
cs_dd_arr.value.map((item, index) => {
|
||||
DGcreateCs2(item, index);
|
||||
});
|
||||
cs_dd_arr.value.forEach((item, index) => {
|
||||
map.removeOverlay(cs_dd_arr.value[index]);
|
||||
});
|
||||
cs_dd_arr.value = [...xuanzhongCs.value];
|
||||
cs_dd_arr.value.map((item, index) => {
|
||||
DGcreateCs2(item, index);
|
||||
});
|
||||
// }
|
||||
} else {
|
||||
// if (choose.value.person == "") {
|
||||
// addCs();
|
||||
// } else {
|
||||
addCs2();
|
||||
addCs2();
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
|
@ -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,35 +3304,129 @@ 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) => ({
|
||||
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;
|
||||
}
|
||||
});
|
||||
// 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,
|
||||
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], "乡镇");
|
||||
};
|
||||
//------------------------------
|
||||
//-------乡镇街道级别---------
|
||||
|
|
@ -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";
|
||||
|
|
@ -3402,7 +3502,7 @@ const addPolygonCounty = () => {
|
|||
// if (isclick.value=='') {
|
||||
// return;
|
||||
// } else {
|
||||
|
||||
|
||||
// }
|
||||
// }
|
||||
if (showEdit.value) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue