From e34071d948aa8ff0aa7af12b769f386f73c1f7a3 Mon Sep 17 00:00:00 2001 From: yaoyuhao Date: Tue, 20 Aug 2024 15:54:19 +0800 Subject: [PATCH] gx --- src/view/sy_map.vue | 98 +++++++++++++++++++++++++++++++-------------- 1 file changed, 68 insertions(+), 30 deletions(-) diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index cd0a5b6..8b73933 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -154,9 +154,9 @@ -
+
编辑
-
保存
+
保存
取消
@@ -230,7 +230,7 @@ import http from "@/utils/request.js"; import mapTown from "@/assets/json/ly.json"; import { VideoCamera } from "@element-plus/icons-vue"; // import xkz from "@/assets/json/xkz.json"; -import cssj from "@/assets/json/cssj.json"; +// import cssj from "@/assets/json/cssj.json"; import j0 from "@/assets/images/map/j0.png"; import j1 from "@/assets/images/map/j1.png"; import j2 from "@/assets/images/map/j2.png"; @@ -281,7 +281,11 @@ const cs_un_choose_arr = ref([]); //单点社区其他区块(灰色) const cs_dd_arr = ref([]); //单点社区名 //存放村社区块 const csqk = ref({}); -// var cssj +var cssj; +//存放村社id用于编辑 +const changeCsqkId = ref(""); +//用于显示编辑栏 +const showEdit = ref(false); //头部标题 const title_choose = ref(""); const title_jd = ref(""); @@ -804,8 +808,8 @@ const initMap = () => { //添加街道名 addJd(); }; -const getCssj = () => { - http +const getCssj = async () => { + await http .get("/api/ggfwyth/regionalDivision/getCsRegionalDivision") .then((res) => { if (res.code == 200) { @@ -813,17 +817,16 @@ const getCssj = () => { } }); }; - +//存放编辑的地块数据 var arrJWD = [[[]]]; -var arr1; //百度bd09墨卡托坐标转换百度bd09经纬度坐标 -const bd09 = (x, y) => { +const bd09 = (x, y) => { var ggPoint = new BMapGL.Point(x, y); var pointArr = []; pointArr.push(ggPoint); var convertor = new BMapGL.Convertor(); convertor.translate(pointArr, COORDINATES_BD09_MC, COORDINATES_BD09, (e) => { - arr1 = []; + let arr1 = []; arr1.push(e.points[0].lng); arr1.push(e.points[0].lat); console.log("arr1", arr1); @@ -832,28 +835,66 @@ const bd09 = (x, y) => { }; //开启编辑 const openEdit = () => { + arrJWD = [[[]]]; cs_choose_arr.value[0].enableEditing(); console.log(cs_choose_arr.value[0]); }; -//关闭编辑 -const closeEdit = async () => { +//保存编辑 +const saveEdit = async () => { cs_choose_arr.value[0].disableEditing(); console.log(cs_choose_arr.value[0]); for (const item of cs_choose_arr.value[0].points) { if (item?.latLng) { - arr1 = []; + let arr1 = []; arr1.push(item?.latLng.lng); arr1.push(item?.latLng.lat); arrJWD[0][0].push(arr1); } else { bd09(item.lng, item.lat); //延迟0.1秒，保证convertor.translate执行完 - await new Promise(resolve => setTimeout(resolve, 100)); + await new Promise((resolve) => setTimeout(resolve, 100)); } } console.log("arrJWD", arrJWD); + saveDK(); }; +//取消编辑 +const closeEdit = async () => { + cs_choose_arr.value[0].disableEditing(); + cs_choose_arr.value.forEach((item, index) => { + map.removeOverlay(cs_choose_arr.value[index]); + }); + addCsChoose(); + showEdit.value = false; +}; +//上传编辑的地块 +const saveDK = async () => { + await http + .post( + `/api/ggfwyth/regionalDivision/addCsManagerRegionalDivision?id=${ + changeCsqkId.value + }&data=${JSON.stringify(arrJWD)}` + ) + .then((res) => { + if (res.code == 200) { + ElMessage.success("编辑成功"); + } + }); + 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(); + } + }); +}; + //点击龙游县初始化 const csh = () => { clear(); @@ -2526,7 +2567,7 @@ const createCustomOverlayJd2 = (polygon, indexx) => { //------------------------------ //---------村社级别------------ //加载村社信息 -const loadCs = (name) => { +const loadCs = async (name) => { xkzCenter.length = 0; xkzDk.length = 0; cssj.forEach((item, index) => { @@ -2539,20 +2580,24 @@ const loadCs = (name) => { for (let w in v.geometry.coordinates) { if (v.geometry.coordinates[w][0].length < 60) continue; xkzDk.push({ + id: v.id, name: v.properties.name, point: v.geometry.coordinates[w], }); } xkzCenter.push({ + id: v.id, name: v.properties.name, center: v.properties.center, }); } else { xkzDk.push({ + id: v.id, name: v.properties.name, point: v.geometry.coordinates[0], }); xkzCenter.push({ + id: v.id, name: v.properties.name, center: v.properties.center, }); @@ -2654,18 +2699,6 @@ const addCsChoose = () => { zIndex: 99, }); map.addOverlay(cs_choose_arr.value[index]); - cs_choose_arr.value[index].addEventListener("click", (e) => { - console.log(4444444444, e); - - // e.overlay 可能包含了你点击的面 - if (e.overlay && e.overlay.type === "Polygon") { - var vertices = e.overlay.getPath(); // 获取面的所有顶点 - var coordinates = vertices.map(function (point) { - return { lng: point.lng, lat: point.lat }; - }); - console.log(coordinates); // 打印所有坐标 - } - }); } }); }; @@ -2941,6 +2974,11 @@ const DGcreateCs = (polygon, indexx) => { }, }); map.addOverlay(cs_dd_arr.value[indexx]); + cs_dd_arr.value[indexx].addEventListener("click", () => { + console.log(polygon.id); + changeCsqkId.value = polygon.id; + showEdit.value = !showEdit.value; + }); }; //添加单个村社(+数量) const DGcreateCs2 = (polygon, indexx) => { @@ -3061,7 +3099,7 @@ onMounted(async () => { getData(); BMAP(); getFwq(); - // getCssj(); + getCssj(); await getDataBq(); loadingss.value = false; }); @@ -3633,8 +3671,8 @@ onMounted(async () => { z-index: 999; position: absolute; color: #ffffff; - top: 120px; - left: 600px; + top: 15%; + right: 30%; display: flex; cursor: pointer; .btnopen {