地图街道编辑

This commit is contained in:
姚宇浩 2024-09-10 14:09:23 +08:00
parent 66cf4682a4
commit 3fdfc72bdc
2 changed files with 186 additions and 48 deletions

View File

@ -80,7 +80,7 @@
</div> </div>
<div <div
class="btnBj" class="btnBj"
v-if="!showEdit && !dialogShow && !openD" v-if="!showEdit && !dialogShow && !openD && !showEdit2"
@click="openqx()" @click="openqx()"
> >
地图权限 地图权限
@ -90,6 +90,16 @@
选择编辑 选择编辑
<p>{{ is_type }}</p> <p>{{ is_type }}</p>
</div> </div>
<div class="btnsopen" @click="openBjl" v-if="!showEdit && !showEdit2">
<div class="btnsave">打开编辑栏</div>
</div>
<div class="btns" v-if="showEdit2">
<div style="display: flex">
<div class="btnsave" @click="openEdit2">编辑地块</div>
<div class="btnsave" @click="saveEdit2">保存地块</div>
<div class="btnsave" @click="closeEdit2">退出编辑</div>
</div>
</div>
<!-- 加载动画 --> <!-- 加载动画 -->
<div class="loadBody" v-show="loadingss"> <div class="loadBody" v-show="loadingss">
<div class="load"> <div class="load">
@ -240,6 +250,35 @@ const addPd = computed(() => {
return false; return false;
} }
}); });
//
const openBjl = () => {
if (!jsqx.value) {
ElMessage({
message: "您没有编辑的权限",
type: "warning",
});
return;
}
if (is_type.value == "街道") {
if (changeJdqkId.value) {
showEdit2.value = true;
} else {
ElMessage({
message: "请先选择街道",
type: "warning",
});
}
} else {
if (changeCsqkId.value) {
showEdit.value = true;
} else {
ElMessage({
message: "请先选择村社",
type: "warning",
});
}
}
};
// //
const input1 = ref(""); const input1 = ref("");
const input2 = ref([]); const input2 = ref([]);
@ -268,8 +307,11 @@ const csqk = ref({});
var cssj; var cssj;
//id //id
const changeCsqkId = ref(""); const changeCsqkId = ref("");
//id
const changeJdqkId = ref("");
// //
const showEdit = ref(false); const showEdit = ref(false);
const showEdit2 = ref(false);
const xuanzhongCs = ref([]); const xuanzhongCs = ref([]);
// //
const cfJd = ref(""); const cfJd = ref("");
@ -434,10 +476,12 @@ const lx = () => {
if (is_type.value == "街道") { if (is_type.value == "街道") {
ElMessageBox.confirm("是否切换至村社?") ElMessageBox.confirm("是否切换至村社?")
.then(() => { .then(() => {
console.log(is_type.value); if (showEdit2.value) {
is_type.value = "村社"; ElMessage.warning("请先退出街道编辑模式");
csh(); } else {
console.log(is_type.value); is_type.value = "村社";
csh();
}
}) })
.catch(() => {}); .catch(() => {});
} else { } else {
@ -600,6 +644,7 @@ const moveBack = () => {
addCsChoose(); addCsChoose();
move_mode.value = false; move_mode.value = false;
drawing.value = false; drawing.value = false;
BMAP();
}; };
// //
const moveDK = async () => { const moveDK = async () => {
@ -664,7 +709,6 @@ const openEdit = () => {
drawing.value = true; drawing.value = true;
console.log(cs_choose_arr.value[0]); console.log(cs_choose_arr.value[0]);
}; };
// //
const saveEdit = async () => { const saveEdit = async () => {
cs_choose_arr.value[0].disableEditing(); cs_choose_arr.value[0].disableEditing();
@ -684,6 +728,35 @@ const saveEdit = async () => {
console.log("arrJWD", arrJWD); console.log("arrJWD", arrJWD);
saveDK(); saveDK();
}; };
const saveDK = async () => {
loadingss.value = true;
let sj = {
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 getCssj();
await loadCs(cfJd.value);
cs_choose_arr.value.forEach((item, index) => {
map.removeOverlay(cs_choose_arr.value[index]);
});
chooseCsList.value.length = 0;
xkzDk.forEach((itemm, indexx) => {
if (itemm.name == cfCs.value) {
chooseCsList.value.push(itemm);
addCsChoose();
}
});
loadingss.value = false;
};
// //
const closeEdit = async () => { const closeEdit = async () => {
cs_choose_arr.value[0].disableEditing(); cs_choose_arr.value[0].disableEditing();
@ -693,6 +766,7 @@ const closeEdit = async () => {
addCsChoose(); addCsChoose();
edit_mode.value = false; edit_mode.value = false;
drawing.value = false; drawing.value = false;
BMAP();
}; };
//退 //退
const backEdit = () => { const backEdit = () => {
@ -700,6 +774,71 @@ const backEdit = () => {
showEdit.value = false; showEdit.value = false;
drawing.value = false; drawing.value = false;
}; };
//----------
const openEdit2 = () => {
map.removeEventListener("click", markera);
if (currentMarker !== null) {
map.removeOverlay(currentMarker);
}
arrJWD = [[[]]];
jd_choose_arr.value[0].enableEditing();
drawing.value = true;
console.log(jd_choose_arr.value[0]);
};
const saveEdit2 = async () => {
jd_choose_arr.value[0].disableEditing();
console.log(jd_choose_arr.value[0]);
for (const item of jd_choose_arr.value[0].points) {
if (item?.latLng) {
let arr1 = [];
arr1.push(item?.latLng.lng);
arr1.push(item?.latLng.lat);
arrJWD[0][0].push(arr1);
} else {
bd09(item.lng, item.lat);
//0.1convertor.translate
await new Promise((resolve) => setTimeout(resolve, 300));
}
}
console.log("arrJWD", arrJWD);
saveDK2();
};
const saveDK2 = async () => {
loadingss.value = true;
let sj = {
id: changeJdqkId.value,
data: JSON.stringify(arrJWD),
};
console.log(sj);
await http
.post(`/api/ggfwyth/regionalDivision/updateTown`, sj)
.then((res) => {
if (res.code == 200) {
ElMessage.success({
message: "保存成功",
});
}
});
await getXzsj();
await loadTown();
map.clearOverlays();
addPolygonCounty();
//
addJd();
xrJd(cfJd.value);
loadingss.value = false;
};
const closeEdit2 = async () => {
jd_choose_arr.value[0].disableEditing();
jd_choose_arr.value.forEach((item, index) => {
map.removeOverlay(jd_choose_arr.value[index]);
});
addJdChoose();
showEdit2.value = false;
drawing.value = false;
};
//-----------------------------
// //
// const shangchuan = async () => { // const shangchuan = async () => {
// //0.00328 // //0.00328
@ -740,35 +879,7 @@ const backEdit = () => {
// } // }
// }; // };
// //
const saveDK = async () => {
loadingss.value = true;
let sj = {
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 getCssj();
await loadCs(cfJd.value);
cs_choose_arr.value.forEach((item, index) => {
map.removeOverlay(cs_choose_arr.value[index]);
});
chooseCsList.value.length = 0;
xkzDk.forEach((itemm, indexx) => {
if (itemm.name == cfCs.value) {
chooseCsList.value.push(itemm);
addCsChoose();
}
});
loadingss.value = false;
};
// //
const nameEdit = () => { const nameEdit = () => {
dialogVisible.value = true; dialogVisible.value = true;
@ -1088,8 +1199,6 @@ const csh = () => {
map.removeOverlay(currentMarker); map.removeOverlay(currentMarker);
} }
goMapCenter([119.178783, 29.034583], 11); goMapCenter([119.178783, 29.034583], 11);
getData();
getDataBq();
}; };
// //
const clear = () => { const clear = () => {
@ -1125,6 +1234,7 @@ const clear = () => {
xkzCenter.length = 0; xkzCenter.length = 0;
xkzDk.length = 0; xkzDk.length = 0;
changeCsqkId.value = ""; changeCsqkId.value = "";
changeJdqkId.value = "";
}; };
// //
const goMapCenter = (point, zoom) => { const goMapCenter = (point, zoom) => {
@ -1159,7 +1269,11 @@ const markera = (e) => {
//---------------- //----------------
// //
const loadTown = () => { const loadTown = async () => {
mapTownDataDK.length = 0;
mapTownCount.forEach((item) => {
item.center = [];
});
for (let v of mapTown[0].features) { for (let v of mapTown[0].features) {
if (v.geometry.coordinates.length > 1) { if (v.geometry.coordinates.length > 1) {
for (let w in v.geometry.coordinates) { for (let w in v.geometry.coordinates) {
@ -1247,11 +1361,15 @@ const addPolygonCounty = () => {
map.addOverlay(polygon); map.addOverlay(polygon);
polygon.addEventListener("click", async () => { polygon.addEventListener("click", async () => {
if (is_type.value == "街道") { if (is_type.value == "街道") {
// if (showEdit2.value) {
// return;
// }
if (item.name == cfJd.value) { if (item.name == cfJd.value) {
} else { } else {
console.log(item.id); console.log(item.id);
cfJd.value = item.name; cfJd.value = item.name;
changeJdqkId.value = item.id;
// cs_qk_arr.value.forEach((item, index) => { // cs_qk_arr.value.forEach((item, index) => {
// map.removeOverlay(cs_qk_arr.value[index]); // map.removeOverlay(cs_qk_arr.value[index]);
// }); // });
@ -1419,6 +1537,11 @@ const addPolygonCountyCs = () => {
if (drawing.value) { if (drawing.value) {
return; return;
} }
//
// if (showEdit.value) {
changeCsqkId.value = item.id;
// }
loadingss.value = true; loadingss.value = true;
cs_dd_arr.value = []; cs_dd_arr.value = [];
xuanzhongCs.value = []; xuanzhongCs.value = [];
@ -1503,9 +1626,10 @@ const addCsUnChoose = () => {
return; return;
} }
// //
if (showEdit.value) { // if (showEdit.value) {
changeCsqkId.value = item.id;
} changeCsqkId.value = item.id;
// }
// //
loadingss.value = true; loadingss.value = true;
cfCs.value = item.name; cfCs.value = item.name;
@ -1659,11 +1783,11 @@ const DGcreateCs = (polygon, indexx) => {
}); });
map.addOverlay(cs_dd_arr.value[indexx]); map.addOverlay(cs_dd_arr.value[indexx]);
cs_dd_arr.value[indexx].addEventListener("click", () => { cs_dd_arr.value[indexx].addEventListener("click", () => {
if (jsqx.value) { // if (jsqx.value) {
showEdit.value=true; // showEdit.value = true;
changeCsqkId.value = polygon.id; changeCsqkId.value = polygon.id;
} else { // } else {
} // }
}); });
}; };
// //
@ -1894,4 +2018,18 @@ onMounted(async () => {
align-items: center; align-items: center;
opacity: 0.8; opacity: 0.8;
} }
.btnsopen {
cursor: pointer;
z-index: 100;
position: absolute;
color: #ffffff;
top: 20%;
left: 5%;
background: #7aceff;
padding: 5px;
border-radius: 5px;
display: flex;
align-items: center;
opacity: 0.8;
}
</style> </style>

View File

@ -15,8 +15,8 @@ export default defineConfig({
// 第一个代理 // 第一个代理
"/api": { "/api": {
// 匹配到啥来进行方向代理 // 匹配到啥来进行方向代理
// target: "http://10.0.0.65:8095/", //刘进 target: "http://10.0.0.65:8095/", //刘进
target: "http://220.191.238.50:996/", //线上 // target: "http://220.191.238.50:996/", //线上
changeOrigin: true, //是否支持跨域 changeOrigin: true, //是否支持跨域
//rewrite: (path) => path.replace(/^\/api/, '') // 如果不需要api 直接把路径上的api 替换成空,这个 //rewrite: (path) => path.replace(/^\/api/, '') // 如果不需要api 直接把路径上的api 替换成空,这个
}, },