运营区修改
This commit is contained in:
parent
24c0a1a060
commit
28f5307624
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user