This commit is contained in:
parent
9f59900219
commit
600347f5d9
|
@ -155,13 +155,31 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="btns" v-if="showEdit">
|
<div class="btns" v-if="showEdit">
|
||||||
<div class="btnsave" @click="nameEdit">修改村名</div>
|
<div class="btnsave" @click="nameEdit" v-if="!add_mode && !edit_mode">
|
||||||
<div class="btnsave" @click="draw">添加地块</div>
|
修改村名
|
||||||
<div class="btnopen" @click="openEdit">编辑地块</div>
|
</div>
|
||||||
<div class="btnsave" @click="saveEdit">保存地块</div>
|
<div class="btnsave" @click="addmode" v-if="!edit_mode && !add_mode">
|
||||||
<div class="btnsave">删除地块</div>
|
添加
|
||||||
<div class="btnclose" @click="closeEdit">取消编辑</div>
|
</div>
|
||||||
<div class="btnclose" @click="backEdit">退出编辑</div>
|
<div style="display: flex" v-if="add_mode">
|
||||||
|
<div class="btnsave" @click="draw">添加地块</div>
|
||||||
|
<div class="btnsave" @click="cancel">取消地块</div>
|
||||||
|
<div class="btnsave" @click="addcenter">添加中心点</div>
|
||||||
|
<div class="btnsave" @click="look">查看添加列表</div>
|
||||||
|
<div class="btnsave" @click="addBack">退出添加</div>
|
||||||
|
</div>
|
||||||
|
<div class="btnopen" @click="editmode" v-if="!edit_mode && !add_mode">
|
||||||
|
编辑
|
||||||
|
</div>
|
||||||
|
<div style="display: flex" v-if="edit_mode">
|
||||||
|
<div class="btnopen" @click="openEdit">编辑地块</div>
|
||||||
|
<div class="btnsave" @click="saveEdit">保存地块</div>
|
||||||
|
<div class="btnclose" @click="closeEdit">退出编辑</div>
|
||||||
|
</div>
|
||||||
|
<div class="btnsave" v-if="!add_mode && !edit_mode" @click="deleteCs">
|
||||||
|
删除地块
|
||||||
|
</div>
|
||||||
|
<div class="btnclose" @click="backEdit">退出</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Dialog
|
<Dialog
|
||||||
|
@ -224,6 +242,28 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
<el-dialog v-model="dialogVisible2" title="新村社列表" width="500">
|
||||||
|
<el-form
|
||||||
|
:model="add_new_cs"
|
||||||
|
label-width="auto"
|
||||||
|
style="max-width: 500px"
|
||||||
|
>
|
||||||
|
<el-form-item label="村社名">
|
||||||
|
<el-input v-model="add_new_cs.name" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="村社中心点">
|
||||||
|
<el-input v-model="add_new_cs.center" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="村社范围">
|
||||||
|
<el-input v-model="add_new_cs.area" disabled />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<div class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="addNew()"> 确认添加 </el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
</teleport>
|
</teleport>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -239,7 +279,7 @@ import {
|
||||||
watch,
|
watch,
|
||||||
nextTick,
|
nextTick,
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
||||||
import tools from "@/utils/tools";
|
import tools from "@/utils/tools";
|
||||||
import initializeMap from "@/utils/mapInitializer.js";
|
import initializeMap from "@/utils/mapInitializer.js";
|
||||||
import http from "@/utils/request.js";
|
import http from "@/utils/request.js";
|
||||||
|
@ -278,14 +318,22 @@ import AED from "@/assets/images/map/AED.png";
|
||||||
import Dialog from "./dialog/dialogMapDp.vue";
|
import Dialog from "./dialog/dialogMapDp.vue";
|
||||||
import personDetail from "./person/index.vue";
|
import personDetail from "./person/index.vue";
|
||||||
// import gcj02towgs84 from "@/utils/gcj02towgs84.js";
|
// import gcj02towgs84 from "@/utils/gcj02towgs84.js";
|
||||||
import { DrawScene, AreaMeasure, MarkerDraw } from "bmap-draw";
|
// import { DrawScene, AreaMeasure, MarkerDraw } from "bmap-draw";
|
||||||
// import { DrawScene, PolygonDraw } from "bmap-draw";
|
import { DrawScene, PolygonDraw } from "bmap-draw";
|
||||||
//--------定义参数-------
|
//--------定义参数-------
|
||||||
//测绘模式
|
//测绘模式等
|
||||||
const drawing = ref(false);
|
const drawing = ref(false);
|
||||||
|
const add_mode = ref(false);
|
||||||
|
const edit_mode = ref(false);
|
||||||
|
const add_new_cs = reactive({
|
||||||
|
name: "",
|
||||||
|
center: [],
|
||||||
|
area: [[[]]],
|
||||||
|
});
|
||||||
//编辑村名
|
//编辑村名
|
||||||
const input1 = ref("");
|
const input1 = ref("");
|
||||||
const dialogVisible = ref(false);
|
const dialogVisible = ref(false);
|
||||||
|
const dialogVisible2 = ref(false);
|
||||||
//加载
|
//加载
|
||||||
const loadingss = ref(false);
|
const loadingss = ref(false);
|
||||||
const loadTable = ref(false);
|
const loadTable = ref(false);
|
||||||
|
@ -832,13 +880,15 @@ const initMap = () => {
|
||||||
addJd();
|
addJd();
|
||||||
};
|
};
|
||||||
const getCssj = async () => {
|
const getCssj = async () => {
|
||||||
await http
|
await http.get("/api/ggfwyth/regionalDivision/getDetails").then((res) => {
|
||||||
.get("/api/ggfwyth/regionalDivision/getCsRegionalDivision")
|
if (res.code == 200) {
|
||||||
.then((res) => {
|
cssj = JSON.parse(res.data);
|
||||||
if (res.code == 200) {
|
}
|
||||||
cssj = JSON.parse(res.data);
|
});
|
||||||
}
|
};
|
||||||
});
|
//编辑模式
|
||||||
|
const editmode = () => {
|
||||||
|
edit_mode.value = true;
|
||||||
};
|
};
|
||||||
//存放编辑的地块数据
|
//存放编辑的地块数据
|
||||||
var arrJWD = [[[]]];
|
var arrJWD = [[[]]];
|
||||||
|
@ -890,12 +940,14 @@ const closeEdit = async () => {
|
||||||
map.removeOverlay(cs_choose_arr.value[index]);
|
map.removeOverlay(cs_choose_arr.value[index]);
|
||||||
});
|
});
|
||||||
addCsChoose();
|
addCsChoose();
|
||||||
|
edit_mode.value = false;
|
||||||
drawing.value = false;
|
drawing.value = false;
|
||||||
// let a = document.documentElement.getElementsByClassName("left")[0];
|
// let a = document.documentElement.getElementsByClassName("left")[0];
|
||||||
// a.style.opacity = "1";
|
// a.style.opacity = "1";
|
||||||
// let b = document.documentElement.getElementsByClassName("right")[0];
|
// let b = document.documentElement.getElementsByClassName("right")[0];
|
||||||
// b.style.opacity = "1";
|
// b.style.opacity = "1";
|
||||||
};
|
};
|
||||||
|
//退出
|
||||||
const backEdit = () => {
|
const backEdit = () => {
|
||||||
cs_choose_arr.value[0].disableEditing();
|
cs_choose_arr.value[0].disableEditing();
|
||||||
cs_choose_arr.value.forEach((item, index) => {
|
cs_choose_arr.value.forEach((item, index) => {
|
||||||
|
@ -903,12 +955,13 @@ const backEdit = () => {
|
||||||
});
|
});
|
||||||
addCsChoose();
|
addCsChoose();
|
||||||
showEdit.value = false;
|
showEdit.value = false;
|
||||||
|
drawing.value = false;
|
||||||
};
|
};
|
||||||
//上传编辑的地块
|
//上传编辑的地块
|
||||||
const saveDK = async () => {
|
const saveDK = async () => {
|
||||||
await http
|
await http
|
||||||
.post(
|
.post(
|
||||||
`/api/ggfwyth/regionalDivision/updateCsManagerRegionalDivision?id=${
|
`/api/ggfwyth/regionalDivision/edit?id=${
|
||||||
changeCsqkId.value
|
changeCsqkId.value
|
||||||
}&data=${JSON.stringify(arrJWD)}`
|
}&data=${JSON.stringify(arrJWD)}`
|
||||||
)
|
)
|
||||||
|
@ -971,28 +1024,153 @@ const csName = async () => {
|
||||||
});
|
});
|
||||||
}, 500);
|
}, 500);
|
||||||
};
|
};
|
||||||
|
//添加模式
|
||||||
|
const addmode = () => {
|
||||||
|
add_mode.value = true;
|
||||||
|
};
|
||||||
//添加地块
|
//添加地块
|
||||||
|
const sceneDrawStatus = ref(null);
|
||||||
|
const scene = ref(null);
|
||||||
const draw = () => {
|
const draw = () => {
|
||||||
drawing.value = true;
|
drawing.value = true;
|
||||||
map.removeEventListener("click", markera);
|
map.removeEventListener("click", markera);
|
||||||
if (currentMarker !== null) {
|
if (currentMarker !== null) {
|
||||||
map.removeOverlay(currentMarker);
|
map.removeOverlay(currentMarker);
|
||||||
}
|
}
|
||||||
const scene = new DrawScene(map);
|
let drawScene = new DrawScene(map, {
|
||||||
const areaMeasure = new AreaMeasure(scene, {
|
noLimit: true,
|
||||||
|
|
||||||
});
|
});
|
||||||
areaMeasure.open();
|
let polygon = new PolygonDraw(drawScene, {
|
||||||
areaMeasure.addEventListener("measure-area-end", (e) => {
|
hideTip: true, // 隐藏绘制提示
|
||||||
const points = e.target.points;
|
isSeries: false, // 是否开启批量绘制
|
||||||
let res = [];
|
isOpen: true,
|
||||||
points.map((item) => {
|
labelOptions: {
|
||||||
res.push(`${item.lng},${item.lat}`);
|
borderRadius: "2px",
|
||||||
|
background: "#b5d3fb",
|
||||||
|
border: "1px solid #b5d3fb",
|
||||||
|
color: "#333",
|
||||||
|
fontSize: "5px",
|
||||||
|
letterSpacing: "0",
|
||||||
|
padding: "2px",
|
||||||
|
},
|
||||||
|
baseOpts: {
|
||||||
|
fillColor: "#fff",
|
||||||
|
strokeWeight: 2,
|
||||||
|
strokeOpacity: 1,
|
||||||
|
fillOpacity: 0.2,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
sceneDrawStatus.value = polygon;
|
||||||
|
scene.value = drawScene;
|
||||||
|
sceneDrawStatus.value.open();
|
||||||
|
};
|
||||||
|
//取消地块
|
||||||
|
const cancel = () => {
|
||||||
|
scene.value.clearData();
|
||||||
|
sceneDrawStatus.value.closeAll();
|
||||||
|
sceneDrawStatus.value = null;
|
||||||
|
scene.value = null;
|
||||||
|
};
|
||||||
|
//添加中心点
|
||||||
|
const addcenter = () => {
|
||||||
|
BMAP();
|
||||||
|
};
|
||||||
|
//查看添加列表
|
||||||
|
const look = () => {
|
||||||
|
add_new_cs.area[0][0] = [];
|
||||||
|
console.log(111111111, sceneDrawStatus.value);
|
||||||
|
sceneDrawStatus.value?.points.forEach((item, index) => {
|
||||||
|
let arr1 = [];
|
||||||
|
arr1.push(item.lng);
|
||||||
|
arr1.push(item.lat);
|
||||||
|
add_new_cs.area[0][0].push(arr1);
|
||||||
|
});
|
||||||
|
dialogVisible2.value = true;
|
||||||
|
};
|
||||||
|
//添加请求
|
||||||
|
const addNew = async () => {
|
||||||
|
let data1 = {
|
||||||
|
type: "Feature",
|
||||||
|
id: "",
|
||||||
|
geometry: {
|
||||||
|
type: "MultiPolygon",
|
||||||
|
coordinates: [],
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
name: "",
|
||||||
|
center: [],
|
||||||
|
layer: "乡镇",
|
||||||
|
},
|
||||||
|
};
|
||||||
|
let sj = {
|
||||||
|
name: cfJd.value,
|
||||||
|
data: {},
|
||||||
|
};
|
||||||
|
data1.id = `${cfJd.value}_${add_new_cs.name}`;
|
||||||
|
data1.geometry.coordinates = [...add_new_cs.area];
|
||||||
|
data1.properties.name = add_new_cs.name;
|
||||||
|
data1.properties.center = add_new_cs.center;
|
||||||
|
sj.data = JSON.stringify(data1);
|
||||||
|
await http.post(`/api/ggfwyth/regionalDivision/add`, sj).then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
ElMessage.success({
|
||||||
|
message: "添加成功",
|
||||||
|
offset: 100, // 距离窗口顶部的偏移量
|
||||||
|
});
|
||||||
|
dialogVisible2.value = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
cancel();
|
||||||
|
await getCssj();
|
||||||
|
await loadCs(cfJd.value);
|
||||||
|
unChooseList.value.length = 0;
|
||||||
|
xkzDk.forEach((itemm, indexx) => {
|
||||||
|
if (itemm.name != cfCs.value) {
|
||||||
|
unChooseList.value.push(itemm);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
addCsUnChoose();
|
||||||
|
};
|
||||||
|
//删除
|
||||||
|
const deleteCs = async () => {
|
||||||
|
ElMessageBox.confirm("确定要删除当前村社?")
|
||||||
|
.then(() => {
|
||||||
|
http
|
||||||
|
.post(`/api/ggfwyth/regionalDivision/del?id=${changeCsqkId.value}`)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
ElMessage.success({
|
||||||
|
message: "删除成功",
|
||||||
|
offset: 100, // 距离窗口顶部的偏移量
|
||||||
|
});
|
||||||
|
cs_choose_arr.value.forEach((item, index) => {
|
||||||
|
map.removeOverlay(cs_choose_arr.value[index]);
|
||||||
|
});
|
||||||
|
cs_dd_arr.value.forEach((item, index) => {
|
||||||
|
map.removeOverlay(cs_dd_arr.value[index]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
getCssj();
|
||||||
|
}, 300);
|
||||||
|
setTimeout(() => {
|
||||||
|
loadCs(cfJd.value);
|
||||||
|
}, 500);
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
// catch error
|
||||||
});
|
});
|
||||||
// mapData.points = res;
|
};
|
||||||
ElMessage.success("选取范围成功");
|
|
||||||
// areaMeasure.close();
|
//退出添加模式
|
||||||
});
|
const addBack = () => {
|
||||||
|
add_mode.value = false;
|
||||||
|
drawing.value = false;
|
||||||
|
map.removeEventListener("click", markera);
|
||||||
|
if (currentMarker !== null) {
|
||||||
|
map.removeOverlay(currentMarker);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
//点击龙游县初始化
|
//点击龙游县初始化
|
||||||
const csh = () => {
|
const csh = () => {
|
||||||
|
@ -1076,6 +1254,9 @@ const markera = (e) => {
|
||||||
// 将新标记添加到地图中并更新当前标记引用
|
// 将新标记添加到地图中并更新当前标记引用
|
||||||
map.addOverlay(marker);
|
map.addOverlay(marker);
|
||||||
currentMarker = marker;
|
currentMarker = marker;
|
||||||
|
if (add_mode.value) {
|
||||||
|
add_new_cs.center = [e.latlng.lng, e.latlng.lat];
|
||||||
|
}
|
||||||
};
|
};
|
||||||
//点击人口数(关键字存age)
|
//点击人口数(关键字存age)
|
||||||
const buten = async (item) => {
|
const buten = async (item) => {
|
||||||
|
|
Loading…
Reference in New Issue