From 28f53076246698f936980368cccee2fdafd588fd Mon Sep 17 00:00:00 2001
From: tx <2622874537@qq.com>
Date: Mon, 2 Sep 2024 15:07:52 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=90=E8=90=A5=E5=8C=BA=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/system/area/areaRange.vue | 237 +++++++++++++++++++---------
1 file changed, 161 insertions(+), 76 deletions(-)
diff --git a/src/views/system/area/areaRange.vue b/src/views/system/area/areaRange.vue
index eb82b74..b799d64 100644
--- a/src/views/system/area/areaRange.vue
+++ b/src/views/system/area/areaRange.vue
@@ -408,6 +408,7 @@ export default {
showtable: true,
currentRow: null,
ischange: false,
+ currentPolygon: null,
// 表单校验
rules: {
parkingName: [
@@ -572,32 +573,114 @@ export default {
// this.initEditor();
},
initEditor(pathList) {
- this.ischange = true;
- var path1 = [];
- path1 = JSON.parse(pathList) || [];
+ console.log('创建了');
+ this.ischange = true;
+ if(pathList==''){
+ pathList=null
+ }
+ // 检查 pathList 是否为空或无效
+ var path1;
+ try {
+ path1 = JSON.parse(pathList) || [];
+ } catch (e) {
+ console.error("Invalid JSON format in pathList:", e);
+ path1 = []; // 如果 JSON 解析失败，则将 path1 设为一个空数组
+ }
- var polygon1 = new AMap.Polygon({
- path: path1,
- });
- this.map.add([polygon1]);
- polyEditor = new AMap.PolygonEditor(this.map);
- // console.log(polyEditor);
- // console.dir(polyEditor);
- polyEditor.on("add", (data) => {
- // console.log(data);
- this.coordList = data.lnglat;
- var polygon = data.target;
- polygon.on("dblclick", () => {
- polyEditor.setTarget(polygon);
- polyEditor.open();
+ // 创建并保存当前编辑的多边形引用
+ this.currentPolygon = new AMap.Polygon({
+ path: path1,
+ fillColor: "#f0e68c", // 设置颜色
+ fillOpacity: 0.3, // 设置透明度
+ strokeColor: "#ffcc00",
+ strokeWeight: 2,
+ strokeStyle: "solid",
+ });
+ this.map.add([this.currentPolygon]);
+
+ polyEditor = new AMap.PolygonEditor(this.map);
+ polyEditor.setTarget(this.currentPolygon); // 设置当前多边形为编辑目标
+
+ // 为多边形和多边形编辑器添加事件监听
+ polyEditor.on("add", (data) => {
+ this.coordList = data.lnglat;
+ var polygon = data.target;
+
+ polygon.on("dblclick", () => {
+ polyEditor.setTarget(polygon);
+ polyEditor.open();
+ });
+
+ // 保存当前编辑的多边形引用
+ this.currentPolygon = polygon;
+ });
+
+ this.currentPolygon.on("dblclick", () => {
+ polyEditor.setTarget(this.currentPolygon);
+ polyEditor.open();
+ });
+
+ return polyEditor;
+},
+clearPolygon() {
+ this.status = false;
+
+ if (this.currentPolygon) {
+ this.map.remove(this.currentPolygon); // 只移除当前编辑的多边形
+ this.currentPolygon = null; // 清除引用
+ }
+
+ if (polyEditor) {
+ polyEditor.close(); // 关闭多边形编辑器
+ polyEditor.setTarget(null); // 清除编辑器中的多边形引用
+ polyEditor.off("add"); // 移除所有事件监听器
+ polyEditor.off("end"); // 确保不再触发旧事件
+ }
+
+ // 清空与多边形相关的状态或数据
+ this.coordList = [];
+ this.form.boundaryStr = "";
+ // this.form.longitude = '';
+ // this.form.latitude = '';
+},
+createPolygon() {
+ this.status = true;
+
+ if (!polyEditor) {
+ polyEditor = new AMap.PolygonEditor(this.map); // 确保 polyEditor 被正确实例化
+ }
+
+ polyEditor.close(); // 关闭当前的编辑器
+ polyEditor.setTarget(); // 清除当前目标
+ polyEditor.open(); // 打开新的多边形编辑器
+},
+ editClose: function () {
+ // console.log("this", this);
+ this.ischange = false;
+ let that = this;
+ polyEditor.on("end", function (event) {
+ // event.target 即为编辑后的多边形对象
+ //多边形的坐标
+ this.coordList = event.target.getPath();
+ // console.log("coordList", this.coordList);
+ let mapList = [];
+ this.coordList.forEach((v) => {
+ // console.log("v", v.lng, "--", v.lat);
+ mapList.push([v.lng, v.lat]);
});
+ let center = calculateCenter(mapList);
+ console.log(mapList, "mapListmapList");
+ // this.newmapList=mapList
+ let mapListJson = JSON.stringify(mapList);
+ console.log("mapListJson:" + mapListJson);
+ // console.log(this.form.boundaryStr,'this.form.boundaryStrthis.form.boundaryStr');
+ that.form.boundaryStr = mapListJson;
+ let centerArr = center.toString().split(",");
+ that.form.longitude = centerArr[0];
+ that.form.latitude = centerArr[1];
});
- polygon1.on("dblclick", () => {
- polyEditor.setTarget(polygon1);
- polyEditor.open();
- });
-
- return polyEditor;
+ polyEditor.close();
+ this.sub();
},
scrollToRow(rowIndex) {
// 获取表格的DOM元素
@@ -636,6 +719,9 @@ export default {
getArea(areaId) {
this.markers = [];
this.labels = [];
+ this.parkingList=[]
+ this.noParkingList=[]
+ this.noridingList=[]
getArea(areaId).then((response) => {
this.queryParams.areaId = response.data.areaId;
this.areaId = response.data.areaId;
@@ -798,18 +884,7 @@ export default {
element.style.visibility = this.show ? "hidden" : "visible";
});
},
- clearPolygon() {
- this.status = false;
- const polygons = polyEditor.getPolygons(); // 获取当前编辑的多边形
- console.log(polygons, "polygonspolygons");
- polygons.forEach((polygon) => {
- this.map.remove(polygon); // 只移除当前编辑的多边形
- });
- polyEditor.close(); // 关闭多边形编辑器
- // 清空与多边形相关的状态或数据
- this.coordList = "";
- },
changeMapStyle() {
// 创建一个默认的图层组件
let defaultLayer = new AMap.TileLayer();
@@ -832,9 +907,9 @@ export default {
this.type = "default";
}
},
- start() {
- this.timer = setInterval(this.echart, 1000); // 注意: 第一个参数为方法名的时候不要加括号;
- },
+ // start() {
+ // this.timer = setInterval(this.echart, 1000); // 注意: 第一个参数为方法名的时候不要加括号;
+ // },
initAMap() {
AMapLoader.load({
key: globalConfig.aMap.key,
@@ -864,13 +939,29 @@ export default {
// });
this.addArea(JSON.parse(this.areaList) || []);
this.parkingList.forEach((parking) => {
+ let boundary = [];
+
+ // 检查 boundaryStr 是否为有效的 JSON 字符串
+ if (parking.boundaryStr) {
+ try {
+ boundary = JSON.parse(parking.boundaryStr);
+ } catch (e) {
+ console.error(
+ "Invalid JSON in boundaryStr:",
+ parking.boundaryStr
+ );
+ boundary = []; // 如果解析失败，使用空数组
+ }
+ }
+
this.addParking(
- JSON.parse(parking.boundaryStr) || [],
+ boundary,
parking.parkingName,
parking.longitude,
parking.latitude,
parking.parkingId
);
+
this.addMarker2(
parking,
"https://lxnapi.ccttiot.com/FqcYf6ecsnbC0OT6YYAF5npgu-kh",
@@ -878,12 +969,20 @@ export default {
"#1890ff"
);
});
-
this.noParkingList.forEach((noparking) => {
- this.addNoParking(
- JSON.parse(noparking.boundaryStr) || [],
- noparking.parkingId
- );
+ let boundaryStr = noparking.boundaryStr;
+ let parsedBoundary = [];
+
+ // 如果 boundaryStr 不是空字符串且是有效的 JSON 字符串，则解析
+ if (boundaryStr && boundaryStr.trim() !== "") {
+ try {
+ parsedBoundary = JSON.parse(boundaryStr);
+ } catch (error) {
+ console.error("Error parsing noParking boundaryStr:", error);
+ }
+ }
+
+ this.addNoParking(parsedBoundary || [], noparking.parkingId);
this.addMarker2(
noparking,
"https://lxnapi.ccttiot.com/FjKE5PWbnEnZUq3k-wVIvV4lv8Ab",
@@ -893,8 +992,21 @@ export default {
});
this.noridingList.forEach((noriding) => {
+ console.log(noriding, "noridingnoriding");
+ let boundaryStr = noriding.boundaryStr;
+ let parsedBoundary = [];
+
+ // 同样地，对 boundaryStr 进行有效性检查
+ if (boundaryStr && boundaryStr.trim() !== "") {
+ try {
+ parsedBoundary = JSON.parse(boundaryStr);
+ } catch (error) {
+ console.error("Error parsing noriding boundaryStr:", error);
+ }
+ }
+
this.addNoriding(
- JSON.parse(noriding.boundaryStr) || [],
+ parsedBoundary || [],
noriding.parkingName,
noriding.longitude,
noriding.latitude,
@@ -1062,6 +1174,7 @@ export default {
this.labels.push(text);
},
addNoriding(data, title, lon, lat, parkingId) {
+ console.log("禁行区");
let polygon = new AMap.Polygon({
path: data,
fillColor: "#fff9e6", // 更淡的黄色
@@ -1074,13 +1187,13 @@ export default {
});
polygon.on("mouseover", () => {
polygon.setOptions({
- fillOpacity: 0.7,
- fillColor: "#FFEBA4FF",
+ fillOpacity: 0.1,
+ fillColor: "#fff",
});
});
polygon.on("mouseout", () => {
polygon.setOptions({
- fillOpacity: 0.5,
+ fillOpacity: 0.1,
fillColor: "#ffeba4",
});
});
@@ -1093,38 +1206,10 @@ export default {
createPolygon() {
this.status = true;
- polyEditor.close();
+ // polyEditor.close();
polyEditor.setTarget();
polyEditor.open();
},
- editClose: function () {
- // console.log("this", this);
- this.ischange = false;
- let that = this;
- polyEditor.on("end", function (event) {
- // event.target 即为编辑后的多边形对象
- //多边形的坐标
- this.coordList = event.target.getPath();
- // console.log("coordList", this.coordList);
- let mapList = [];
- this.coordList.forEach((v) => {
- // console.log("v", v.lng, "--", v.lat);
- mapList.push([v.lng, v.lat]);
- });
- let center = calculateCenter(mapList);
- console.log(mapList, "mapListmapList");
- // this.newmapList=mapList
- let mapListJson = JSON.stringify(mapList);
- console.log("mapListJson:" + mapListJson);
- // console.log(this.form.boundaryStr,'this.form.boundaryStrthis.form.boundaryStr');
- that.form.boundaryStr = mapListJson;
- let centerArr = center.toString().split(",");
- that.form.longitude = centerArr[0];
- that.form.latitude = centerArr[1];
- });
- polyEditor.close();
- this.sub();
- },
},
beforeDestroy() {
clearInterval(this.timer);