SunTao/xjsaas-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：修改地图图层重叠错乱，

Browse Source
This commit is contained in:
SunTao 2024-12-31 11:43:18 +08:00
parent edb6ab57e7
commit 58d8233875
1 changed files with 38 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/views/big-screen/index.vue
View File

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