diff --git a/src/views/big-screen/index.vue b/src/views/big-screen/index.vue index 9f46141..f68e692 100644 --- a/src/views/big-screen/index.vue +++ b/src/views/big-screen/index.vue @@ -2,7 +2,7 @@ * @Author: SunTao 328867980@qq.com * @Date: 2024-10-17 11:34:00 * @LastEditors: SunTao 328867980@qq.com - * @LastEditTime: 2024-12-27 11:39:58 + * @LastEditTime: 2024-12-31 11:35:20 * @FilePath: \znxjxt-ui\src\views\big-screen\index.vue * @Description: 大屏首页 --> @@ -634,6 +634,8 @@ export default { isCenterCalculated: false, // 线段点击保存得参数 defectMapPiont: {}, + // 图层标识 + shouldLoadClusters: false, // 图片弹窗标题 imgTitle: "查看", @@ -846,7 +848,6 @@ export default { showMapByCompany(val) { this.companyId = val.id; this.showMap = true; - // this.overViewMapPoint = [val.lon * 1, val.lat * 1]; this.getLinePoint(); this.changeOrder(this.workOrderType); }, @@ -885,7 +886,7 @@ export default { map.getView().setCenter(item.tablePoint); map.getView().setZoom(16); }); - // this.roadSelect = item.segmentId; + this.shouldLoadClusters = false; this.getCenterPiont(); }, @@ -961,6 +962,9 @@ export default { } return []; }); + // 如果不是病害巡检,则绘制点位 + // 如果图片弹窗打开,则绘制点位 + // if (!this.shouldLoadClusters) { // 修改地图中心点位 const pointArray = data.map((item) => { if (item.geometry) { @@ -968,11 +972,9 @@ export default { } return []; }); - // console.log(pointArray); this.fitMapToPoints(pointArray); - // 如果不是病害巡检,则绘制点位 - // 如果图片弹窗打开,则绘制点位 this.drawPoint(); + // } } }); }, @@ -1088,10 +1090,12 @@ export default { } }, }); - this.$nextTick(() => { - const map = this.$refs.roadMap.instance.get("map"); - map.addLayer(this.clusters); - }); + if (!this.shouldLoadClusters) { + this.$nextTick(() => { + const map = this.$refs.roadMap.instance.get("map"); + map.addLayer(this.clusters); + }); + } }, /** @@ -1099,14 +1103,14 @@ export default { * @return {void} */ getLinePoint() { - if (this.markLayerLines) { - // 清除线段图层 - this.$nextTick(() => { - const map = this.$refs.roadMap.instance.get("map"); - map.removeLayer(this.markLayerLines); - this.markLayerLines = null; - }); - } + // if (this.markLayerLines) { + // // 清除线段图层 + // this.$nextTick(() => { + // const map = this.$refs.roadMap.instance.get("map"); + // map.removeLayer(this.markLayerLines); + // this.markLayerLines = null; + // }); + // } let data = {}; if (this.elementDiv === "OverviewScreen") { data = { @@ -1165,6 +1169,7 @@ export default { * @return {void} */ drawLine() { + this.shouldLoadClusters = true; const features = []; this.lineString.forEach((element) => { const lines = JSON.parse(element.line).map((it) => { @@ -1206,17 +1211,20 @@ export default { const lineSource = new VectorSource({ features, }); - this.markLayerLines = new VectorLayer({ - source: lineSource, - properties: { - type: "line", - }, - }); - - this.$nextTick(() => { - const map = this.$refs.roadMap.instance.get("map"); - map.addLayer(this.markLayerLines); - }); + if (!this.markLayerLines) { + this.markLayerLines = new VectorLayer({ + source: lineSource, + properties: { + type: "line", + }, + }); + this.$nextTick(() => { + const map = this.$refs.roadMap.instance.get("map"); + map.addLayer(this.markLayerLines); + }); + } else { + this.markLayerLines.setSource(lineSource); + } }, /** @@ -1496,7 +1504,6 @@ export default { this.$nextTick(() => { const map = this.$refs.roadMap.instance.get("map"); map.getView().setZoom(10); - map.getView().setCenter([123.30297096718999, 41.87942945541742]); }); // 地图右上角多选按钮显示 this.getIconType(); @@ -1507,6 +1514,7 @@ export default { map.removeLayer(this.markLayerLines); this.markLayerLines = null; }); + this.shouldLoadClusters = false; // 进行地图打点 this.getCenterPiont(); } else if (item.component === "DiseaseScreen") {