This commit is contained in:
parent
9f59900219
commit
600347f5d9
|
@ -155,13 +155,31 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="btns" v-if="showEdit">
|
||||
<div class="btnsave" @click="nameEdit">修改村名</div>
|
||||
<div class="btnsave" @click="nameEdit" v-if="!add_mode && !edit_mode">
|
||||
修改村名
|
||||
</div>
|
||||
<div class="btnsave" @click="addmode" v-if="!edit_mode && !add_mode">
|
||||
添加
|
||||
</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="btnsave">删除地块</div>
|
||||
<div class="btnclose" @click="closeEdit">取消编辑</div>
|
||||
<div class="btnclose" @click="backEdit">退出编辑</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>
|
||||
|
||||
<Dialog
|
||||
|
@ -224,6 +242,28 @@
|
|||
</div>
|
||||
</template>
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -239,7 +279,7 @@ import {
|
|||
watch,
|
||||
nextTick,
|
||||
} from "vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import tools from "@/utils/tools";
|
||||
import initializeMap from "@/utils/mapInitializer.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 personDetail from "./person/index.vue";
|
||||
// import gcj02towgs84 from "@/utils/gcj02towgs84.js";
|
||||
import { DrawScene, AreaMeasure, MarkerDraw } from "bmap-draw";
|
||||
// import { DrawScene, PolygonDraw } from "bmap-draw";
|
||||
// import { DrawScene, AreaMeasure, MarkerDraw } from "bmap-draw";
|
||||
import { DrawScene, PolygonDraw } from "bmap-draw";
|
||||
//--------定义参数-------
|
||||
//测绘模式
|
||||
//测绘模式等
|
||||
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 dialogVisible = ref(false);
|
||||
const dialogVisible2 = ref(false);
|
||||
//加载
|
||||
const loadingss = ref(false);
|
||||
const loadTable = ref(false);
|
||||
|
@ -832,14 +880,16 @@ const initMap = () => {
|
|||
addJd();
|
||||
};
|
||||
const getCssj = async () => {
|
||||
await http
|
||||
.get("/api/ggfwyth/regionalDivision/getCsRegionalDivision")
|
||||
.then((res) => {
|
||||
await http.get("/api/ggfwyth/regionalDivision/getDetails").then((res) => {
|
||||
if (res.code == 200) {
|
||||
cssj = JSON.parse(res.data);
|
||||
}
|
||||
});
|
||||
};
|
||||
//编辑模式
|
||||
const editmode = () => {
|
||||
edit_mode.value = true;
|
||||
};
|
||||
//存放编辑的地块数据
|
||||
var arrJWD = [[[]]];
|
||||
//百度bd09墨卡托坐标转换百度bd09经纬度坐标
|
||||
|
@ -890,12 +940,14 @@ const closeEdit = async () => {
|
|||
map.removeOverlay(cs_choose_arr.value[index]);
|
||||
});
|
||||
addCsChoose();
|
||||
edit_mode.value = false;
|
||||
drawing.value = false;
|
||||
// let a = document.documentElement.getElementsByClassName("left")[0];
|
||||
// a.style.opacity = "1";
|
||||
// let b = document.documentElement.getElementsByClassName("right")[0];
|
||||
// b.style.opacity = "1";
|
||||
};
|
||||
//退出
|
||||
const backEdit = () => {
|
||||
cs_choose_arr.value[0].disableEditing();
|
||||
cs_choose_arr.value.forEach((item, index) => {
|
||||
|
@ -903,12 +955,13 @@ const backEdit = () => {
|
|||
});
|
||||
addCsChoose();
|
||||
showEdit.value = false;
|
||||
drawing.value = false;
|
||||
};
|
||||
//上传编辑的地块
|
||||
const saveDK = async () => {
|
||||
await http
|
||||
.post(
|
||||
`/api/ggfwyth/regionalDivision/updateCsManagerRegionalDivision?id=${
|
||||
`/api/ggfwyth/regionalDivision/edit?id=${
|
||||
changeCsqkId.value
|
||||
}&data=${JSON.stringify(arrJWD)}`
|
||||
)
|
||||
|
@ -971,28 +1024,153 @@ const csName = async () => {
|
|||
});
|
||||
}, 500);
|
||||
};
|
||||
//添加模式
|
||||
const addmode = () => {
|
||||
add_mode.value = true;
|
||||
};
|
||||
//添加地块
|
||||
const sceneDrawStatus = ref(null);
|
||||
const scene = ref(null);
|
||||
const draw = () => {
|
||||
drawing.value = true;
|
||||
map.removeEventListener("click", markera);
|
||||
if (currentMarker !== null) {
|
||||
map.removeOverlay(currentMarker);
|
||||
}
|
||||
const scene = new DrawScene(map);
|
||||
const areaMeasure = new AreaMeasure(scene, {
|
||||
let drawScene = new DrawScene(map, {
|
||||
noLimit: true,
|
||||
});
|
||||
let polygon = new PolygonDraw(drawScene, {
|
||||
hideTip: true, // 隐藏绘制提示
|
||||
isSeries: false, // 是否开启批量绘制
|
||||
isOpen: true,
|
||||
labelOptions: {
|
||||
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
|
||||
});
|
||||
};
|
||||
|
||||
});
|
||||
areaMeasure.open();
|
||||
areaMeasure.addEventListener("measure-area-end", (e) => {
|
||||
const points = e.target.points;
|
||||
let res = [];
|
||||
points.map((item) => {
|
||||
res.push(`${item.lng},${item.lat}`);
|
||||
});
|
||||
// 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 = () => {
|
||||
|
@ -1076,6 +1254,9 @@ const markera = (e) => {
|
|||
// 将新标记添加到地图中并更新当前标记引用
|
||||
map.addOverlay(marker);
|
||||
currentMarker = marker;
|
||||
if (add_mode.value) {
|
||||
add_new_cs.center = [e.latlng.lng, e.latlng.lat];
|
||||
}
|
||||
};
|
||||
//点击人口数(关键字存age)
|
||||
const buten = async (item) => {
|
||||
|
|
Loading…
Reference in New Issue