|
@@ -2,7 +2,7 @@
|
2
|
2
|
* @Author: ysh
|
3
|
3
|
* @Date: 2024-06-21 18:51:49
|
4
|
4
|
* @LastEditors: wrh
|
5
|
|
- * @LastEditTime: 2024-09-03 16:08:10
|
|
5
|
+ * @LastEditTime: 2024-09-05 10:46:23
|
6
|
6
|
-->
|
7
|
7
|
<template>
|
8
|
8
|
<div class="warpper-container">
|
|
@@ -10,15 +10,12 @@
|
10
|
10
|
<div class="map-container" id="maps" tabindex="0"></div>
|
11
|
11
|
<!-- 鼠标移动坐标 -->
|
12
|
12
|
<div id="mouse-position"></div>
|
13
|
|
- <!-- 项目信息弹出框 -->
|
14
|
|
- <info-box :datas="clickFeature" :maps="map" @closePopup="closePopup" @open="openProject"></info-box>
|
|
13
|
+ <!-- 项目点位是否显示 -->
|
|
14
|
+ <div class="projectpoint-switch">
|
|
15
|
+ <el-checkbox fill="#fff" v-model="checkedCluster" label="项目点位" border size="large" @change="switchCluster" />
|
|
16
|
+ </div>
|
15
|
17
|
<!-- 工具栏列表 -->
|
16
|
18
|
<div class="tool-box">
|
17
|
|
- <div class="item">
|
18
|
|
- <el-tooltip effect="dark" content="视角复位" placement="right">
|
19
|
|
- <div class="view" @click="resetView()"></div>
|
20
|
|
- </el-tooltip>
|
21
|
|
- </div>
|
22
|
19
|
<div class="item">
|
23
|
20
|
<el-tooltip effect="dark" content="图层" placement="right">
|
24
|
21
|
<div class="layers" @click="layersOpen = !layersOpen"></div>
|
|
@@ -34,27 +31,38 @@
|
34
|
31
|
<div class="selectM" @click="polygonSelect()"></div>
|
35
|
32
|
</el-tooltip>
|
36
|
33
|
</div>
|
|
34
|
+ <div class="item">
|
|
35
|
+ <el-tooltip effect="dark" content="视角复位" placement="right">
|
|
36
|
+ <div class="view" @click="resetView()"></div>
|
|
37
|
+ </el-tooltip>
|
|
38
|
+ </div>
|
37
|
39
|
</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>
|
|
40
|
+ <!-- 信息提示框 -->
|
|
41
|
+ <el-alert class="alter-position" title="开始矩形框选,按下ESC取消框选,按下Enter搜索框选范围内的项目" type="warning" show-icon
|
|
42
|
+ v-if="selectedInfo" @close="selectedInfo = false" />
|
|
43
|
+ <!-- 地图样式 -->
|
|
44
|
+ <div class="switch-map">
|
|
45
|
+ <switch-map></switch-map>
|
|
46
|
+ </div>
|
|
47
|
+ <!-- <transition-group appear name="animate__animated animate__bounce" enter-active-class="animate__fadeInLeft"
|
|
48
|
+ leave-active-class="animate__fadeOutLeft"> -->
|
|
49
|
+ <div class="layer-type dialog_wrap" v-if="layersOpen" @mousedown.stop="move">
|
|
50
|
+ <div class="layer-content">
|
|
51
|
+ <div class="layer-header">
|
|
52
|
+ 图层管理
|
|
53
|
+ <span class="layer-closer" @click="closeLayer"></span>
|
52
|
54
|
</div>
|
|
55
|
+ <el-tabs v-model="activeName" class="demo-tabs">
|
|
56
|
+ <el-tab-pane label="项目图层" name="first">
|
|
57
|
+ <project-layer :proTree="projectList" :maps="map"></project-layer>
|
|
58
|
+ </el-tab-pane>
|
|
59
|
+ </el-tabs>
|
53
|
60
|
</div>
|
54
|
|
- </transition-group>
|
|
61
|
+ </div>
|
|
62
|
+ <!-- </transition-group> -->
|
55
|
63
|
<!-- 项目信息弹出框 -->
|
56
|
64
|
<div id="popup" class="ol-popup" v-if="clickFeature != null">
|
57
|
|
- <span id="popup-closer" class="ol-popup-closer" @click="closePopup"></span>
|
|
65
|
+ <span class="ol-popup-closer" @click="closePopup"></span>
|
58
|
66
|
<div id="popup-content">
|
59
|
67
|
<el-descriptions :column="1" border v-if="clickFeature.type == 'projectPoint'">
|
60
|
68
|
<el-descriptions-item label="项目编号" width="130px">
|
|
@@ -81,7 +89,7 @@
|
81
|
89
|
</el-descriptions>
|
82
|
90
|
</div>
|
83
|
91
|
</div>
|
84
|
|
- <div class="look-achi" @click="" v-if="clickFeature.type == 'projectPoint'">成果目录>></div>
|
|
92
|
+ <div class="look-achi" @click="openProject" v-if="clickFeature.type == 'projectPoint'">成果目录>></div>
|
85
|
93
|
</div>
|
86
|
94
|
<!-- 项目目录 -->
|
87
|
95
|
<div class="right-project" :class="{ closeProBox: isOpenPro }">
|
|
@@ -194,9 +202,7 @@
|
194
|
202
|
<div class="achi-content">
|
195
|
203
|
<div class="achi-header">
|
196
|
204
|
成果目录
|
197
|
|
- <el-icon class="close" @click="dialogTableVisible = false">
|
198
|
|
- <CloseBold />
|
199
|
|
- </el-icon>
|
|
205
|
+ <span class="achi-closer" @click="closeAchi"></span>
|
200
|
206
|
</div>
|
201
|
207
|
<div class="achi-projectNumber">项目编号:{{ dialogTitle }}</div>
|
202
|
208
|
<el-table :data="achiDialogData" height="400px">
|
|
@@ -259,8 +265,9 @@
|
259
|
265
|
<script>
|
260
|
266
|
import { Tianditu, ZhongKe, ArcGISBlue, Autonavi, google, terrain, vect } from '@/utils/maps'
|
261
|
267
|
import { listProject, getProject } from '@/api/oa/project/project'
|
262
|
|
-import infoBox from './index/infoBox.vue';
|
|
268
|
+import { getInfoByProjectNumbers } from '@/api/file/project'
|
263
|
269
|
import ProjectLayer from './index/projectLayer.vue';
|
|
270
|
+import SwitchMap from './index/switchMap.vue';
|
264
|
271
|
import sjxActive from '@/assets/images/gis/sjd.png';
|
265
|
272
|
// ---------------------------------ol引用------------------------------------------------
|
266
|
273
|
import 'ol/ol.css'
|
|
@@ -285,7 +292,7 @@ import { Circle, Fill, Stroke, Style, RegularShape, Icon, Text } from 'ol/style'
|
285
|
292
|
import { MousePosition, ScaleLine, defaults as defaultControls } from 'ol/control';
|
286
|
293
|
import { getAchievementByProject, listAchievement } from "@/api/file/achievement";
|
287
|
294
|
export default {
|
288
|
|
- components: { infoBox, ProjectLayer },
|
|
295
|
+ components: { SwitchMap, ProjectLayer },
|
289
|
296
|
dicts: ['cmc_achi_type', 'cmc_scale_grade'],
|
290
|
297
|
data() {
|
291
|
298
|
return {
|
|
@@ -299,6 +306,7 @@ export default {
|
299
|
306
|
select: null,
|
300
|
307
|
popup: null,
|
301
|
308
|
clusters: null,
|
|
309
|
+ checkedCluster: true,
|
302
|
310
|
drawBox: null,
|
303
|
311
|
activeName: 'first',
|
304
|
312
|
isDrawing: false,
|
|
@@ -309,10 +317,12 @@ export default {
|
309
|
317
|
searchType: '',
|
310
|
318
|
projectList: [],
|
311
|
319
|
allproTableData: [],
|
|
320
|
+ achiDialogData: [],
|
312
|
321
|
clusters: null,
|
313
|
322
|
total: 0,
|
314
|
323
|
loading: true,
|
315
|
324
|
tableHeight: 0,
|
|
325
|
+ selectedInfo: false,
|
316
|
326
|
clickFeature: {},
|
317
|
327
|
clickDatas: {
|
318
|
328
|
selectFeatures: null,
|
|
@@ -390,6 +400,7 @@ export default {
|
390
|
400
|
],
|
391
|
401
|
view: this.view,
|
392
|
402
|
})
|
|
403
|
+ this.$store.commit('SET_MAP', this.map)
|
393
|
404
|
this.map.addOverlay(this.popup);
|
394
|
405
|
this.mapClick(this.map);
|
395
|
406
|
// this.clickFeaturePopInfo();
|
|
@@ -477,7 +488,32 @@ export default {
|
477
|
488
|
});
|
478
|
489
|
}
|
479
|
490
|
})
|
|
491
|
+
|
|
492
|
+ /* 键盘事件 */
|
|
493
|
+ document.onkeydown = function (event) {
|
|
494
|
+ let e = event || window.event || arguments.callee.caller.arguments[0];
|
|
495
|
+ if (e && e.keyCode == 27) {
|
|
496
|
+ if (that.drawBox.getActive()) {
|
|
497
|
+ that.drawBox.finishDrawing();
|
|
498
|
+ that.selectedInfo = false;
|
|
499
|
+ that.map.removeInteraction(that.drawBox);
|
|
500
|
+ }
|
|
501
|
+ } else if (e && e.keyCode == 13) {
|
|
502
|
+ let newArray = [...new Set(that.seletctedCluters)];
|
|
503
|
+ getInfoByProjectNumbers(newArray).then(res => {
|
|
504
|
+ if (res.data) {
|
|
505
|
+ that.projectList = res.data;
|
|
506
|
+ if (that.isOpenPro == true) {
|
|
507
|
+ that.isOpenPro = false;
|
|
508
|
+ }
|
|
509
|
+ } else {
|
|
510
|
+ that.projectList = that.allproTableData;
|
|
511
|
+ }
|
|
512
|
+ })
|
|
513
|
+ }
|
|
514
|
+ };
|
480
|
515
|
},
|
|
516
|
+
|
481
|
517
|
clickFeaturePopInfo() {
|
482
|
518
|
let that = this;
|
483
|
519
|
if (that.select !== null) {
|
|
@@ -509,10 +545,20 @@ export default {
|
509
|
545
|
closePopup() {
|
510
|
546
|
this.popup.setPosition(undefined);
|
511
|
547
|
},
|
|
548
|
+ /* 关闭成果框 */
|
|
549
|
+ closeAchi() {
|
|
550
|
+ this.dialogTableVisible = false;
|
|
551
|
+ this.dialogTitle = '';
|
|
552
|
+ this.achiDialogData = [];
|
|
553
|
+ },
|
|
554
|
+ /* 关闭图层框 */
|
|
555
|
+ closeLayer() {
|
|
556
|
+ this.layersOpen = false;
|
|
557
|
+ },
|
512
|
558
|
openProject() {
|
513
|
559
|
this.dialogTableVisible = true;
|
514
|
|
- // let projectId = datas.clickFeature.id;
|
515
|
|
- // this.dialogTitle = datas.clickFeature.projectNumber
|
|
560
|
+ let projectId = this.clickFeature.projectId;
|
|
561
|
+ this.dialogTitle = this.clickFeature.projectNumber;
|
516
|
562
|
listAchievement({ projectId }).then(res => {
|
517
|
563
|
if (res.total == 0) {
|
518
|
564
|
this.$message.error('暂无成果,请添加');
|
|
@@ -555,6 +601,7 @@ export default {
|
555
|
601
|
geometryFunction: createBox()
|
556
|
602
|
});
|
557
|
603
|
that.drawBox.on('drawstart', function () {
|
|
604
|
+ that.selectedInfo = true;
|
558
|
605
|
that.seletctedCluters = [];
|
559
|
606
|
that.select.getFeatures().clear();
|
560
|
607
|
that.isDrawing = true;
|
|
@@ -575,7 +622,7 @@ export default {
|
575
|
622
|
let selectedFeatures = that.select.getFeatures();
|
576
|
623
|
for (let i = 0; i < selectedFeatures.getLength(); i++) {
|
577
|
624
|
let feature = selectedFeatures.item(i);
|
578
|
|
- feature = feature.values_.features;
|
|
625
|
+ feature = feature.get('features');
|
579
|
626
|
if (feature.length == 1) {
|
580
|
627
|
let name = feature[0].name;
|
581
|
628
|
selected.push(name);
|
|
@@ -594,7 +641,63 @@ export default {
|
594
|
641
|
that.map.addInteraction(that.drawBox);
|
595
|
642
|
},
|
596
|
643
|
polygonSelect() {
|
597
|
|
-
|
|
644
|
+ let that = this;
|
|
645
|
+ that.select = new Select({
|
|
646
|
+ condition: never,
|
|
647
|
+ style: that.selectedStyle
|
|
648
|
+ });
|
|
649
|
+ // 创建框选图层
|
|
650
|
+ let drawLayer = new VectorLayer({
|
|
651
|
+ source: new VectorSource(),
|
|
652
|
+ });
|
|
653
|
+ // 创建绘制工具
|
|
654
|
+ that.drawBox = new Draw({
|
|
655
|
+ source: drawLayer.getSource(),
|
|
656
|
+ type: 'Polygon',
|
|
657
|
+ });
|
|
658
|
+ that.drawBox.on('drawstart', function () {
|
|
659
|
+ that.selectedInfo = true;
|
|
660
|
+ that.seletctedCluters = [];
|
|
661
|
+ that.select.getFeatures().clear();
|
|
662
|
+ that.isDrawing = true;
|
|
663
|
+ // drawLayer.getSource().clear();
|
|
664
|
+ });
|
|
665
|
+ // 结束绘制
|
|
666
|
+ that.drawBox.on('drawend', function (e) {
|
|
667
|
+ if (e.feature) {
|
|
668
|
+ // 获取框选范围
|
|
669
|
+ let geometry = e.feature.getGeometry();
|
|
670
|
+ let extent = geometry.getExtent();
|
|
671
|
+ // 查询框选范围内的所有点
|
|
672
|
+ that.getLayerByName('clusters').getSource().forEachFeatureIntersectingExtent(extent, function (feature) {
|
|
673
|
+ let coordinates = feature.getGeometry().getCoordinates();
|
|
674
|
+ // 判断该点是否在圆内部
|
|
675
|
+ if (geometry.intersectsCoordinate(coordinates)) {
|
|
676
|
+ that.select.getFeatures().push(feature);
|
|
677
|
+ }
|
|
678
|
+ });
|
|
679
|
+ // 遍历被选中的要素
|
|
680
|
+ let selected = [];
|
|
681
|
+ let selectedFeatures = that.select.getFeatures();
|
|
682
|
+ for (let i = 0; i < selectedFeatures.getLength(); i++) {
|
|
683
|
+ let feature = selectedFeatures.item(i);
|
|
684
|
+ feature = feature.get('features');
|
|
685
|
+ if (feature.length == 1) {
|
|
686
|
+ let name = feature[0].name;
|
|
687
|
+ selected.push(name);
|
|
688
|
+ } else {
|
|
689
|
+ for (let f of feature) {
|
|
690
|
+ let name = f.name;
|
|
691
|
+ selected.push(name);
|
|
692
|
+ }
|
|
693
|
+ }
|
|
694
|
+ that.seletctedCluters = selected;
|
|
695
|
+ }
|
|
696
|
+ }
|
|
697
|
+ that.isDrawing = false;
|
|
698
|
+ })
|
|
699
|
+ that.map.addInteraction(that.select);
|
|
700
|
+ that.map.addInteraction(that.drawBox);
|
598
|
701
|
},
|
599
|
702
|
/* 通过图层名称获取图层 */
|
600
|
703
|
getLayerByName(name) {
|
|
@@ -810,7 +913,7 @@ export default {
|
810
|
913
|
}
|
811
|
914
|
},
|
812
|
915
|
getText(feature, resolution) {
|
813
|
|
- let features = feature.values_.features;
|
|
916
|
+ let features = feature.get('features');
|
814
|
917
|
let reo = resolution * 100;
|
815
|
918
|
let text;
|
816
|
919
|
if (reo > 2) {
|
|
@@ -849,6 +952,10 @@ export default {
|
849
|
952
|
this.projectList = data;
|
850
|
953
|
})
|
851
|
954
|
},
|
|
955
|
+ /* 开关聚合项目点 */
|
|
956
|
+ switchCluster(val) {
|
|
957
|
+ this.clusters.setVisible(val);
|
|
958
|
+ },
|
852
|
959
|
tableRowClassName() {
|
853
|
960
|
|
854
|
961
|
},
|
|
@@ -863,10 +970,7 @@ export default {
|
863
|
970
|
this.$message.error('暂无成果,请添加');
|
864
|
971
|
this.achiDialogData = [];
|
865
|
972
|
} else {
|
866
|
|
- if (this.dialogTableVisible == false)
|
867
|
|
- this.dialogTableVisible = true;
|
868
|
|
- else
|
869
|
|
- this.dialogTableVisible = false;
|
|
973
|
+ this.dialogTableVisible = true;
|
870
|
974
|
this.achiDialogData = res.rows;
|
871
|
975
|
}
|
872
|
976
|
})
|
|
@@ -914,6 +1018,15 @@ export default {
|
914
|
1018
|
<style lang="scss" scoped>
|
915
|
1019
|
.warpper-container {
|
916
|
1020
|
position: relative;
|
|
1021
|
+
|
|
1022
|
+ .projectpoint-switch {
|
|
1023
|
+ position: absolute;
|
|
1024
|
+ top: 10px;
|
|
1025
|
+ left: 60px;
|
|
1026
|
+ width: 100px;
|
|
1027
|
+ height: 50px;
|
|
1028
|
+ color: #fff;
|
|
1029
|
+ }
|
917
|
1030
|
}
|
918
|
1031
|
|
919
|
1032
|
.map-container {
|
|
@@ -963,16 +1076,21 @@ export default {
|
963
|
1076
|
font-family: '黑体';
|
964
|
1077
|
position: relative;
|
965
|
1078
|
|
966
|
|
- .close {
|
|
1079
|
+ .achi-closer {
|
|
1080
|
+ text-decoration: none;
|
967
|
1081
|
position: absolute;
|
968
|
|
- right: 20px;
|
969
|
|
- top: 10px;
|
|
1082
|
+ top: 2px;
|
|
1083
|
+ right: 8px;
|
970
|
1084
|
}
|
971
|
1085
|
|
972
|
|
- .close:hover {
|
973
|
|
- color: #409EFF;
|
|
1086
|
+ .achi-closer:after {
|
|
1087
|
+ content: "✖";
|
974
|
1088
|
cursor: pointer;
|
975
|
1089
|
}
|
|
1090
|
+
|
|
1091
|
+ .achi-closer:hover:after {
|
|
1092
|
+ color: #409EFF;
|
|
1093
|
+ }
|
976
|
1094
|
}
|
977
|
1095
|
|
978
|
1096
|
}
|
|
@@ -1154,4 +1272,64 @@ export default {
|
1154
|
1272
|
transform: translate(-50%, 0);
|
1155
|
1273
|
margin-left: -11px;
|
1156
|
1274
|
}
|
|
1275
|
+
|
|
1276
|
+.layer-type {
|
|
1277
|
+ position: absolute;
|
|
1278
|
+ top: 70px;
|
|
1279
|
+ left: 53px;
|
|
1280
|
+ width: 300px;
|
|
1281
|
+ padding: 12px 10px;
|
|
1282
|
+ background-color: #fff;
|
|
1283
|
+ border-radius: 5px;
|
|
1284
|
+ cursor: move;
|
|
1285
|
+
|
|
1286
|
+ .title {
|
|
1287
|
+ font-size: 16px;
|
|
1288
|
+ text-align: center;
|
|
1289
|
+ line-height: 45px;
|
|
1290
|
+ }
|
|
1291
|
+
|
|
1292
|
+ .layer-content {
|
|
1293
|
+ cursor: default;
|
|
1294
|
+ position: relative;
|
|
1295
|
+
|
|
1296
|
+ .layer-header {
|
|
1297
|
+ text-align: center;
|
|
1298
|
+ line-height: 40px;
|
|
1299
|
+ font-weight: bold;
|
|
1300
|
+ font-family: '黑体';
|
|
1301
|
+ position: relative;
|
|
1302
|
+
|
|
1303
|
+ .layer-closer {
|
|
1304
|
+ text-decoration: none;
|
|
1305
|
+ position: absolute;
|
|
1306
|
+ top: 2px;
|
|
1307
|
+ right: 8px;
|
|
1308
|
+ }
|
|
1309
|
+
|
|
1310
|
+ .layer-closer:after {
|
|
1311
|
+ content: "✖";
|
|
1312
|
+ cursor: pointer;
|
|
1313
|
+ }
|
|
1314
|
+
|
|
1315
|
+ .layer-closer:hover:after {
|
|
1316
|
+ color: #409EFF;
|
|
1317
|
+ }
|
|
1318
|
+ }
|
|
1319
|
+ }
|
|
1320
|
+}
|
|
1321
|
+
|
|
1322
|
+.alter-position {
|
|
1323
|
+ width: 470px;
|
|
1324
|
+ position: absolute;
|
|
1325
|
+ left: 50%;
|
|
1326
|
+ top: 10px;
|
|
1327
|
+ transform: translate(-50%, 0);
|
|
1328
|
+}
|
|
1329
|
+
|
|
1330
|
+.switch-map {
|
|
1331
|
+ position: absolute;
|
|
1332
|
+ bottom: 0;
|
|
1333
|
+ left: 0;
|
|
1334
|
+}
|
1157
|
1335
|
</style>
|