|
@@ -2,7 +2,7 @@
|
2
|
2
|
* @Author: ysh
|
3
|
3
|
* @Date: 2024-06-21 18:51:49
|
4
|
4
|
* @LastEditors: wrh
|
5
|
|
- * @LastEditTime: 2024-08-23 17:20:57
|
|
5
|
+ * @LastEditTime: 2024-09-03 16:08:10
|
6
|
6
|
-->
|
7
|
7
|
<template>
|
8
|
8
|
<div class="warpper-container">
|
|
@@ -11,7 +11,7 @@
|
11
|
11
|
<!-- 鼠标移动坐标 -->
|
12
|
12
|
<div id="mouse-position"></div>
|
13
|
13
|
<!-- 项目信息弹出框 -->
|
14
|
|
- <info-box :datas="datas" :maps="map" @closePopup="closePopup" @open="openAchiList"></info-box>
|
|
14
|
+ <info-box :datas="clickFeature" :maps="map" @closePopup="closePopup" @open="openProject"></info-box>
|
15
|
15
|
<!-- 工具栏列表 -->
|
16
|
16
|
<div class="tool-box">
|
17
|
17
|
<div class="item">
|
|
@@ -35,36 +35,53 @@
|
35
|
35
|
</el-tooltip>
|
36
|
36
|
</div>
|
37
|
37
|
</div>
|
|
38
|
+ <transition-group appear name="animate__animated animate__bounce" enter-active-class="animate__fadeInLeft"
|
|
39
|
+ leave-active-class="animate__fadeOutLeft">
|
|
40
|
+ <div class="layer-type dialog_wrap" v-if="layersOpen" @mousedown.stop="move">
|
|
41
|
+ <div class="layer-content">
|
|
42
|
+ <div>
|
|
43
|
+ <el-icon class="close" @click="layersOpen = false">
|
|
44
|
+ <CloseBold />
|
|
45
|
+ </el-icon>
|
|
46
|
+ </div>
|
|
47
|
+ <el-tabs v-model="activeName" class="demo-tabs">
|
|
48
|
+ <el-tab-pane label="项目图层" name="first">
|
|
49
|
+ <project-layer :proTree="projectList" :maps="map"></project-layer>
|
|
50
|
+ </el-tab-pane>
|
|
51
|
+ </el-tabs>
|
|
52
|
+ </div>
|
|
53
|
+ </div>
|
|
54
|
+ </transition-group>
|
38
|
55
|
<!-- 项目信息弹出框 -->
|
39
|
|
- <div id="popup" class="ol-popup">
|
|
56
|
+ <div id="popup" class="ol-popup" v-if="clickFeature != null">
|
40
|
57
|
<span id="popup-closer" class="ol-popup-closer" @click="closePopup"></span>
|
41
|
58
|
<div id="popup-content">
|
42
|
|
- <el-descriptions :column="1" border v-if="clickFeacture.type == 'projectPoint'">
|
|
59
|
+ <el-descriptions :column="1" border v-if="clickFeature.type == 'projectPoint'">
|
43
|
60
|
<el-descriptions-item label="项目编号" width="130px">
|
44
|
|
- {{ clickFeacture.projectNumber }}
|
|
61
|
+ {{ clickFeature.projectNumber }}
|
45
|
62
|
</el-descriptions-item>
|
46
|
63
|
<el-descriptions-item label="项目名称" width="130px">
|
47
|
|
- {{ clickFeacture.projectName }}
|
|
64
|
+ {{ clickFeature.projectName }}
|
48
|
65
|
</el-descriptions-item>
|
49
|
66
|
<el-descriptions-item label="项目负责人" width="130px">
|
50
|
|
- {{ getUserName(clickFeacture.projectLeader) }}
|
|
67
|
+ {{ getUserName(clickFeature.projectLeader) }}
|
51
|
68
|
</el-descriptions-item>
|
52
|
69
|
<el-descriptions-item label="存放地址" width="130px">
|
53
|
|
- {{ clickFeacture.storageAddress == '' || clickFeacture.storageAddress == null ? '暂无' :
|
54
|
|
- clickFeacture.storageAddress }}
|
|
70
|
+ {{ clickFeature.storageAddress == '' || clickFeature.storageAddress == null ? '暂无' :
|
|
71
|
+ clickFeature.storageAddress }}
|
55
|
72
|
</el-descriptions-item>
|
56
|
73
|
</el-descriptions>
|
57
|
74
|
|
58
|
|
- <div v-if="clickFeacture.type == 'featurePoint'">
|
59
|
|
- <div class="title">项目编号:{{ clickFeacture.projectNumber }}</div>
|
|
75
|
+ <div v-if="clickFeature.type == 'featurePoint'">
|
|
76
|
+ <div class="title">项目编号:{{ clickFeature.projectNumber }}</div>
|
60
|
77
|
<el-descriptions :column="1" border>
|
61
|
78
|
<el-descriptions-item label="名称" width="130px">
|
62
|
|
- <!-- {{ clickFeacture.selectFeatures.values_.name }} -->
|
|
79
|
+ <!-- {{ clickFeature.selectFeatures.values_.name }} -->
|
63
|
80
|
</el-descriptions-item>
|
64
|
81
|
</el-descriptions>
|
65
|
82
|
</div>
|
66
|
83
|
</div>
|
67
|
|
- <div class="look-achi" @click="" v-if="clickFeacture.type == 'projectPoint'">成果目录>></div>
|
|
84
|
+ <div class="look-achi" @click="" v-if="clickFeature.type == 'projectPoint'">成果目录>></div>
|
68
|
85
|
</div>
|
69
|
86
|
<!-- 项目目录 -->
|
70
|
87
|
<div class="right-project" :class="{ closeProBox: isOpenPro }">
|
|
@@ -243,6 +260,7 @@
|
243
|
260
|
import { Tianditu, ZhongKe, ArcGISBlue, Autonavi, google, terrain, vect } from '@/utils/maps'
|
244
|
261
|
import { listProject, getProject } from '@/api/oa/project/project'
|
245
|
262
|
import infoBox from './index/infoBox.vue';
|
|
263
|
+import ProjectLayer from './index/projectLayer.vue';
|
246
|
264
|
import sjxActive from '@/assets/images/gis/sjd.png';
|
247
|
265
|
// ---------------------------------ol引用------------------------------------------------
|
248
|
266
|
import 'ol/ol.css'
|
|
@@ -267,7 +285,7 @@ import { Circle, Fill, Stroke, Style, RegularShape, Icon, Text } from 'ol/style'
|
267
|
285
|
import { MousePosition, ScaleLine, defaults as defaultControls } from 'ol/control';
|
268
|
286
|
import { getAchievementByProject, listAchievement } from "@/api/file/achievement";
|
269
|
287
|
export default {
|
270
|
|
- components: { infoBox },
|
|
288
|
+ components: { infoBox, ProjectLayer },
|
271
|
289
|
dicts: ['cmc_achi_type', 'cmc_scale_grade'],
|
272
|
290
|
data() {
|
273
|
291
|
return {
|
|
@@ -282,7 +300,7 @@ export default {
|
282
|
300
|
popup: null,
|
283
|
301
|
clusters: null,
|
284
|
302
|
drawBox: null,
|
285
|
|
-
|
|
303
|
+ activeName: 'first',
|
286
|
304
|
isDrawing: false,
|
287
|
305
|
viewCenter: [105.55, 34.18],
|
288
|
306
|
layersOpen: false,
|
|
@@ -291,10 +309,11 @@ export default {
|
291
|
309
|
searchType: '',
|
292
|
310
|
projectList: [],
|
293
|
311
|
allproTableData: [],
|
|
312
|
+ clusters: null,
|
294
|
313
|
total: 0,
|
295
|
314
|
loading: true,
|
296
|
315
|
tableHeight: 0,
|
297
|
|
- clickFeacture: {},
|
|
316
|
+ clickFeature: {},
|
298
|
317
|
clickDatas: {
|
299
|
318
|
selectFeatures: null,
|
300
|
319
|
selectProjectNumber: "",
|
|
@@ -303,20 +322,18 @@ export default {
|
303
|
322
|
seletctedCluters: [],
|
304
|
323
|
dialogTitle: '',
|
305
|
324
|
dialogTableVisible: false,
|
306
|
|
- datas: {
|
307
|
|
- clickFeacture: {},
|
308
|
|
- selectFeatures: null,
|
309
|
|
- selectProjectNumber: "",
|
310
|
|
- type: '',
|
311
|
|
- infoData: {}
|
312
|
|
- }
|
313
|
325
|
}
|
314
|
326
|
},
|
315
|
327
|
mounted() {
|
316
|
328
|
this.setTableDomHeight();
|
317
|
329
|
this.initMap();
|
318
|
330
|
this.observer();
|
319
|
|
- this.getProjectList();
|
|
331
|
+ let param = {
|
|
332
|
+ pageNum: 1,
|
|
333
|
+ pageSize: 10000,
|
|
334
|
+ }
|
|
335
|
+ this.getProjectCluster(param); //地图数据集cluster对应allproTableData,此值不变
|
|
336
|
+ this.getProjectList(this.queryParams); //项目列表对应projectList,此值随搜索变化
|
320
|
337
|
},
|
321
|
338
|
methods: {
|
322
|
339
|
// 设置侧边项目目录的高度
|
|
@@ -375,7 +392,7 @@ export default {
|
375
|
392
|
})
|
376
|
393
|
this.map.addOverlay(this.popup);
|
377
|
394
|
this.mapClick(this.map);
|
378
|
|
- // this.clickFeacturePopInfo();
|
|
395
|
+ // this.clickFeaturePopInfo();
|
379
|
396
|
this.addKeyDownFun()
|
380
|
397
|
},
|
381
|
398
|
observer() {
|
|
@@ -420,32 +437,29 @@ export default {
|
420
|
437
|
let features = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
|
421
|
438
|
// 如果只需要知道有特征,而不关心具体是哪个,这里可以返回 true
|
422
|
439
|
// OpenLayers 会继续查找更多特征,但我们不需要
|
423
|
|
- return true;
|
|
440
|
+ return feature.get('features');
|
424
|
441
|
});
|
425
|
|
-
|
426
|
442
|
// features 现在是一个数组,包含了在点击像素位置找到的所有特征
|
427
|
443
|
if (features && features.length > 0) {
|
428
|
444
|
// 如果只有一个特征
|
429
|
445
|
if (features.length === 1) {
|
430
|
|
- let feature = features[0]; // 直接从数组中取第一个特征
|
431
|
|
- let num = feature.get('name'); // 使用 get 方法来获取属性
|
432
|
|
- let projectId = feature.get('projectId');
|
433
|
|
-
|
|
446
|
+ let feature = features[0]; // 直接从数组中取第一个特征
|
|
447
|
+ let projectId = feature.projectId;
|
434
|
448
|
// 假设 getProject 是一个返回 Promise 的函数
|
435
|
449
|
getProject(projectId).then(res => {
|
436
|
450
|
if (res.data) {
|
437
|
451
|
// 假设 this 在这里指向 Vue 组件实例或其他上下文
|
438
|
452
|
that.clickFeature = res.data;
|
439
|
453
|
that.clickFeature.type = 'projectPoint';
|
440
|
|
- this.popup.setPosition(coordinate);
|
|
454
|
+ that.popup.setPosition(coordinate);
|
441
|
455
|
}
|
442
|
456
|
})
|
443
|
457
|
} else {
|
444
|
458
|
// 如果有多个特征,这里可以根据需要处理
|
445
|
|
- this.popup.setPosition(undefined);
|
|
459
|
+ that.popup.setPosition(undefined);
|
446
|
460
|
}
|
447
|
461
|
} else {
|
448
|
|
- this.popup.setPosition(undefined);
|
|
462
|
+ that.popup.setPosition(undefined);
|
449
|
463
|
}
|
450
|
464
|
|
451
|
465
|
|
|
@@ -464,7 +478,7 @@ export default {
|
464
|
478
|
}
|
465
|
479
|
})
|
466
|
480
|
},
|
467
|
|
- clickFeacturePopInfo() {
|
|
481
|
+ clickFeaturePopInfo() {
|
468
|
482
|
let that = this;
|
469
|
483
|
if (that.select !== null) {
|
470
|
484
|
that.map.removeInteraction(that.select);
|
|
@@ -476,8 +490,8 @@ export default {
|
476
|
490
|
that.map.addInteraction(that.select);
|
477
|
491
|
that.select.on('select', function (e) {
|
478
|
492
|
if (e.target.getFeatures().getArray().length == 1) {
|
479
|
|
- that.clickFeacture = e.target.getFeatures().getArray()[0];
|
480
|
|
- let properties = that.clickFeacture.getProperties();
|
|
493
|
+ that.clickFeature = e.target.getFeatures().getArray()[0];
|
|
494
|
+ let properties = that.clickFeature.getProperties();
|
481
|
495
|
if (!properties.features) {
|
482
|
496
|
let fatherLayers = e.target.featureLayerAssociation_;
|
483
|
497
|
// for (let layers in fatherLayers) {
|
|
@@ -485,7 +499,7 @@ export default {
|
485
|
499
|
// }
|
486
|
500
|
let coordinate = e.mapBrowserEvent.coordinate;
|
487
|
501
|
that.popup.setPosition(coordinate);
|
488
|
|
- that.clickFeacture.type = 'featurePoint';
|
|
502
|
+ that.clickFeature.type = 'featurePoint';
|
489
|
503
|
}
|
490
|
504
|
}
|
491
|
505
|
})
|
|
@@ -495,10 +509,10 @@ export default {
|
495
|
509
|
closePopup() {
|
496
|
510
|
this.popup.setPosition(undefined);
|
497
|
511
|
},
|
498
|
|
- openAchiList() {
|
|
512
|
+ openProject() {
|
499
|
513
|
this.dialogTableVisible = true;
|
500
|
|
- // let projectId = datas.clickFeacture.id;
|
501
|
|
- // this.dialogTitle = datas.clickFeacture.projectNumber
|
|
514
|
+ // let projectId = datas.clickFeature.id;
|
|
515
|
+ // this.dialogTitle = datas.clickFeature.projectNumber
|
502
|
516
|
listAchievement({ projectId }).then(res => {
|
503
|
517
|
if (res.total == 0) {
|
504
|
518
|
this.$message.error('暂无成果,请添加');
|
|
@@ -596,17 +610,25 @@ export default {
|
596
|
610
|
}
|
597
|
611
|
return layer;
|
598
|
612
|
},
|
599
|
|
- getProjectList() {
|
|
613
|
+ getProjectCluster(queryParams) {
|
600
|
614
|
this.loading = true
|
601
|
|
- listProject(this.queryParams).then(res => {
|
|
615
|
+ listProject(queryParams).then(res => {
|
602
|
616
|
let data = res.rows;
|
603
|
617
|
this.total = res.total;
|
604
|
|
- this.projectList = data;
|
605
|
618
|
this.allproTableData = data;
|
606
|
|
- this.loading = false
|
|
619
|
+ this.loading = false;
|
607
|
620
|
this.addProjectCluster(data);
|
608
|
621
|
})
|
609
|
622
|
},
|
|
623
|
+ getProjectList(queryParams) {
|
|
624
|
+ this.loading = true
|
|
625
|
+ listProject(queryParams).then(res => {
|
|
626
|
+ let data = res.rows;
|
|
627
|
+ this.total = res.total;
|
|
628
|
+ this.projectList = data;
|
|
629
|
+ this.loading = false
|
|
630
|
+ })
|
|
631
|
+ },
|
610
|
632
|
/* 格式化表格显示 */
|
611
|
633
|
formatterKmlurl(row, cloumn) {
|
612
|
634
|
if (row.projectKml == "" || row.projectKml == null) {
|
|
@@ -617,14 +639,13 @@ export default {
|
617
|
639
|
},
|
618
|
640
|
// 添加项目点在地图上
|
619
|
641
|
addProjectCluster(data) {
|
620
|
|
- let features = [], projectPoints = []
|
|
642
|
+ let features = []
|
621
|
643
|
for (let d of data) {
|
622
|
644
|
if (d.kmlLat && d.kmlLng) {
|
623
|
645
|
let f = new Feature(new Point([Number(d.kmlLng), Number(d.kmlLat)]));
|
624
|
646
|
f.name = d.projectNumber;
|
625
|
647
|
f.projectId = d.projectId;
|
626
|
648
|
features.push(f);
|
627
|
|
- projectPoints.push(d);
|
628
|
649
|
}
|
629
|
650
|
}
|
630
|
651
|
let source = new VectorSource({
|
|
@@ -641,10 +662,24 @@ export default {
|
641
|
662
|
zIndex: 99
|
642
|
663
|
})
|
643
|
664
|
this.map.addLayer(this.clusters);
|
|
665
|
+ this.map.on('click', (e) => {
|
|
666
|
+ this.clusters.getFeatures(e.pixel).then((clickedFeatures) => {
|
|
667
|
+ if (clickedFeatures.length) {
|
|
668
|
+ // Get clustered Coordinates
|
|
669
|
+ const features = clickedFeatures[0].get('features');
|
|
670
|
+ if (features.length > 1) {
|
|
671
|
+ const extent = boundingExtent(
|
|
672
|
+ features.map((r) => r.getGeometry().getCoordinates())
|
|
673
|
+ );
|
|
674
|
+ this.map.getView().fit(extent, { duration: 1000, padding: [100, 100, 100, 100] });
|
|
675
|
+ }
|
|
676
|
+ }
|
|
677
|
+ });
|
|
678
|
+ });
|
644
|
679
|
},
|
645
|
680
|
handleCurrentChange(val) {
|
646
|
681
|
this.queryParams.pageNum = val
|
647
|
|
- this.getProjectList()
|
|
682
|
+ this.getProjectList(this.queryParams)
|
648
|
683
|
},
|
649
|
684
|
/* 得到项目的点位绘制到地图上 */
|
650
|
685
|
clusterStyle(feature, resolution) {
|
|
@@ -811,12 +846,6 @@ export default {
|
811
|
846
|
}
|
812
|
847
|
listProject(param).then(res => {
|
813
|
848
|
let data = res.rows;
|
814
|
|
- let datas = [];
|
815
|
|
- for (let d of data) {
|
816
|
|
- if (d.kmlLat && d.kmlLng) {
|
817
|
|
- datas.push(d);
|
818
|
|
- }
|
819
|
|
- }
|
820
|
849
|
this.projectList = data;
|
821
|
850
|
})
|
822
|
851
|
},
|
|
@@ -877,7 +906,6 @@ export default {
|
877
|
906
|
document.onmouseup = null;
|
878
|
907
|
document.body.onselectstart = document.body.ondrag = () => { return true }
|
879
|
908
|
}
|
880
|
|
-
|
881
|
909
|
},
|
882
|
910
|
}
|
883
|
911
|
}
|