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);