|
|
@@ -1,17 +1,15 @@
|
|
1
|
1
|
<!--
|
|
2
|
|
- * @Author: wrh
|
|
3
|
|
- * @Date: 2024-06-06 13:40:02
|
|
4
|
|
- * @LastEditors: wrh
|
|
5
|
|
- * @LastEditTime: 2024-06-07 16:00:36
|
|
|
2
|
+ * @Author: ysh
|
|
|
3
|
+ * @Date: 2024-06-21 18:51:49
|
|
|
4
|
+ * @LastEditors: Please set LastEditors
|
|
|
5
|
+ * @LastEditTime: 2024-06-28 16:49:32
|
|
6
|
6
|
-->
|
|
7
|
7
|
<template>
|
|
8
|
8
|
<div class="warpper-container">
|
|
9
|
9
|
<!-- 地图 -->
|
|
10
|
|
- <div class="map-container" id="maps" tabindex="0" ref="maps"></div>
|
|
|
10
|
+ <div class="map-container" id="maps" tabindex="0"></div>
|
|
11
|
11
|
<!-- 鼠标移动坐标 -->
|
|
12
|
12
|
<div id="mouse-position"></div>
|
|
13
|
|
- <!-- 项目信息弹出框 -->
|
|
14
|
|
- <InfoBox :datas="datas" @closePopup="closePopup" @open="openAchiList"></InfoBox>
|
|
15
|
13
|
<!-- 工具栏列表 -->
|
|
16
|
14
|
<div class="tool-box">
|
|
17
|
15
|
<div class="item">
|
|
|
@@ -24,7 +22,7 @@
|
|
24
|
22
|
<div class="layers" @click="layersOpen = !layersOpen"></div>
|
|
25
|
23
|
</el-tooltip>
|
|
26
|
24
|
</div>
|
|
27
|
|
- <!-- <div class="item">
|
|
|
25
|
+ <div class="item">
|
|
28
|
26
|
<el-tooltip effect="dark" content="矩形框选" placement="right">
|
|
29
|
27
|
<div class="select" @click="rectSelect()"></div>
|
|
30
|
28
|
</el-tooltip>
|
|
|
@@ -33,166 +31,233 @@
|
|
33
|
31
|
<el-tooltip effect="dark" content="多边形框选" placement="right">
|
|
34
|
32
|
<div class="selectM" @click="polygonSelect()"></div>
|
|
35
|
33
|
</el-tooltip>
|
|
36
|
|
- </div> -->
|
|
|
34
|
+ </div>
|
|
37
|
35
|
</div>
|
|
38
|
|
- <!-- 图层显示 -->
|
|
39
|
|
- <transition-group appear name="animate__animated animate__bounce" enter-active-class="animate__fadeInLeft"
|
|
40
|
|
- leave-active-class="animate__fadeOutLeft">
|
|
41
|
|
- <div class="layer-type dialog_wrap" v-if="layersOpen" @mousedown.stop="move">
|
|
42
|
|
- <div class="layer-content">
|
|
43
|
|
- <div>
|
|
44
|
|
- <el-icon class="close" @click="layersOpen = false">
|
|
45
|
|
- <CloseBold />
|
|
46
|
|
- </el-icon>
|
|
47
|
|
- </div>
|
|
48
|
|
- <el-tabs v-model="activeName" class="demo-tabs">
|
|
49
|
|
- <el-tab-pane label="项目图层" name="first">
|
|
50
|
|
- <ProjectLayer :proTree="proTableData"></ProjectLayer>
|
|
51
|
|
- </el-tab-pane>
|
|
52
|
|
- </el-tabs>
|
|
|
36
|
+ <!-- 项目信息弹出框 -->
|
|
|
37
|
+ <div id="popup" class="ol-popup">
|
|
|
38
|
+ <span id="popup-closer" class="ol-popup-closer" @click="closePopup"></span>
|
|
|
39
|
+ <div id="popup-content">
|
|
|
40
|
+ <el-descriptions :column="1" border v-if="clickFeacture.type == 'projectPoint'">
|
|
|
41
|
+ <el-descriptions-item label="项目编号" width="130px">
|
|
|
42
|
+ {{ clickFeacture.projectNumber }}
|
|
|
43
|
+ </el-descriptions-item>
|
|
|
44
|
+ <el-descriptions-item label="项目名称" width="130px">
|
|
|
45
|
+ {{ clickFeacture.projectName }}
|
|
|
46
|
+ </el-descriptions-item>
|
|
|
47
|
+ <el-descriptions-item label="项目负责人" width="130px">
|
|
|
48
|
+ {{ getUserName(clickFeacture.projectLeader) }}
|
|
|
49
|
+ </el-descriptions-item>
|
|
|
50
|
+ <el-descriptions-item label="存放地址" width="130px">
|
|
|
51
|
+ {{ clickFeacture.storageAddress == '' || clickFeacture.storageAddress == null ? '暂无' :
|
|
|
52
|
+ clickFeacture.storageAddress }}
|
|
|
53
|
+ </el-descriptions-item>
|
|
|
54
|
+ </el-descriptions>
|
|
|
55
|
+
|
|
|
56
|
+ <div v-if="clickFeacture.type == 'featurePoint'">
|
|
|
57
|
+ <div class="title">项目编号:{{ clickFeacture.projectNumber }}</div>
|
|
|
58
|
+ <el-descriptions :column="1" border>
|
|
|
59
|
+ <el-descriptions-item label="名称" width="130px">
|
|
|
60
|
+ {{ clickFeacture.selectFeatures.values_.name }}
|
|
|
61
|
+ </el-descriptions-item>
|
|
|
62
|
+ </el-descriptions>
|
|
|
63
|
+ </div>
|
|
|
64
|
+ </div>
|
|
|
65
|
+ <div class="look-achi" @click="" v-if="clickFeacture.type == 'projectPoint'">成果目录>></div>
|
|
|
66
|
+ </div>
|
|
|
67
|
+ <!-- 项目目录 -->
|
|
|
68
|
+ <div class="right-project" :class="{ closeProBox: isOpenPro }">
|
|
|
69
|
+ <div class="result-click" @click="isOpenPro = !isOpenPro">
|
|
|
70
|
+ <i class="el-icon-d-arrow-left" v-if="isOpenPro"></i>
|
|
|
71
|
+ <i class="el-icon-d-arrow-right" v-if="!isOpenPro"></i>
|
|
|
72
|
+ </div>
|
|
|
73
|
+ <div class="right-content">
|
|
|
74
|
+ <div class="header">项目列表</div>
|
|
|
75
|
+ <!-- 搜索栏 -->
|
|
|
76
|
+ <div class="search-box">
|
|
|
77
|
+ <el-input v-model="searchVal" placeholder="请输入......" @keyup.enter="queryProject">
|
|
|
78
|
+ <template #prepend>
|
|
|
79
|
+ <el-select v-model="searchType" placeholder="请选择" style="width: 125px">
|
|
|
80
|
+ <el-option label="按项目编号" value="1" />
|
|
|
81
|
+ <el-option label="按项目名称" value="2" />
|
|
|
82
|
+ <el-option label="按项目类别" value="3" />
|
|
|
83
|
+ </el-select>
|
|
|
84
|
+ </template>
|
|
|
85
|
+ <template #append>
|
|
|
86
|
+ <el-button icon="el-icon-search" @click="queryProject" />
|
|
|
87
|
+ </template>
|
|
|
88
|
+ </el-input>
|
|
|
89
|
+ </div>
|
|
|
90
|
+ <el-divider />
|
|
|
91
|
+ <!-- 项目数据 -->
|
|
|
92
|
+ <div class="pro-catalogue" v-loading="loading">
|
|
|
93
|
+ <el-table ref="myTable" :data="projectList" :height="tableHeight" border style="width: 100%;"
|
|
|
94
|
+ :row-class-name="tableRowClassName" @row-click="handleRowClick">
|
|
|
95
|
+ <el-table-column type="expand">
|
|
|
96
|
+ <template slot-scope="props">
|
|
|
97
|
+ <div class="expand-info">
|
|
|
98
|
+ <el-descriptions :column="2">
|
|
|
99
|
+ <el-descriptions-item label="存放地址：" class="desLabel" :span="2">
|
|
|
100
|
+ {{ props.row.storageAddress == '' || props.row.storageAddress == undefined ? '暂无' :
|
|
|
101
|
+ props.row.storageAddress
|
|
|
102
|
+ }}
|
|
|
103
|
+ </el-descriptions-item>
|
|
|
104
|
+ <el-descriptions-item label="甲方单位：" class="desLabel" :span="2">{{ props.row.partyA.partyAName == ''
|
|
|
105
|
+ ? '暂无' :
|
|
|
106
|
+ props.row.partyA.partyAName
|
|
|
107
|
+ }}</el-descriptions-item>
|
|
|
108
|
+ <el-descriptions-item label="联系人：" class="desLabel">{{ props.row.contactPerson == '' ? '暂无' :
|
|
|
109
|
+ props.row.contactPerson
|
|
|
110
|
+ }}</el-descriptions-item>
|
|
|
111
|
+ <el-descriptions-item label="联系电话：" class="desLabel">{{ props.row.telephone == '' ? '暂无' :
|
|
|
112
|
+ props.row.telephone
|
|
|
113
|
+ }}</el-descriptions-item>
|
|
|
114
|
+ <el-descriptions-item label="项目类型：" class="desLabel">{{ props.row.projectType == '' ? '暂无' :
|
|
|
115
|
+ props.row.projectType
|
|
|
116
|
+ }}</el-descriptions-item>
|
|
|
117
|
+ <el-descriptions-item label="技术负责人：" class="desLabel">{{ props.row.technicalDirector == '' ? '暂无'
|
|
|
118
|
+ :
|
|
|
119
|
+ getUserName(props.row.technicalDirector)
|
|
|
120
|
+ }}</el-descriptions-item>
|
|
|
121
|
+ <el-descriptions-item label="技术设计人：" class="desLabel">{{ props.row.techinicalDesigner == '' ? '暂无'
|
|
|
122
|
+ :
|
|
|
123
|
+ getUserName(props.row.techinicalDesigner)
|
|
|
124
|
+ }}</el-descriptions-item>
|
|
|
125
|
+ <el-descriptions-item label="承担部门：" class="desLabel">{{ props.row.undertakingSector == '' ? '暂无' :
|
|
|
126
|
+ props.row.undertakingSector
|
|
|
127
|
+ }}</el-descriptions-item>
|
|
|
128
|
+ <el-descriptions-item label="质量检察员：" class="desLabel">{{ props.row.qualityInspector == '' ? '暂无' :
|
|
|
129
|
+ getUserNames(props.row.qualityInspector)
|
|
|
130
|
+ }}</el-descriptions-item>
|
|
|
131
|
+ <el-descriptions-item label="项目登记时间：" class="desLabel" :span="2">{{ props.row.registrationDate ==
|
|
|
132
|
+ '' ? '暂无' :
|
|
|
133
|
+ props.row.registrationDate
|
|
|
134
|
+ }}</el-descriptions-item>
|
|
|
135
|
+ <el-descriptions-item label="项目登记人：" class="desLabel">{{ props.row.projectRegistrant == '' ? '暂无'
|
|
|
136
|
+ :
|
|
|
137
|
+ getUserName(props.row.projectRegistrant)
|
|
|
138
|
+ }}</el-descriptions-item>
|
|
|
139
|
+ <el-descriptions-item label="进场时间：" class="desLabel">{{ props.row.approachTime == '' ? '暂无' :
|
|
|
140
|
+ props.row.approachTime
|
|
|
141
|
+ }}</el-descriptions-item>
|
|
|
142
|
+ <el-descriptions-item label="撤场时间：" class="desLabel">{{ props.row.withdrawalTime == '' ? '暂无' :
|
|
|
143
|
+ props.row.withdrawalTime
|
|
|
144
|
+ }}</el-descriptions-item>
|
|
|
145
|
+ <el-descriptions-item label="项目要求完成时间：" class="desLabel">{{ props.row.requiredCompletionDate == ''
|
|
|
146
|
+ ? '暂无' :
|
|
|
147
|
+ props.row.requiredCompletionDate
|
|
|
148
|
+ }}</el-descriptions-item>
|
|
|
149
|
+ </el-descriptions>
|
|
|
150
|
+ <div class="look-achi" @click="lookThisAchi(props.row)">
|
|
|
151
|
+ 查看成果>>
|
|
|
152
|
+ </div>
|
|
|
153
|
+ </div>
|
|
|
154
|
+ </template>
|
|
|
155
|
+ </el-table-column>
|
|
|
156
|
+ <el-table-column label="kml范围" width="95" align="center" :formatter="formatterKmlurl" />
|
|
|
157
|
+ <el-table-column prop="projectNumber" label="项目编号" width="95" align="center" />
|
|
|
158
|
+ <el-table-column prop="projectName" label="项目名称" width="180" align="center" />
|
|
|
159
|
+ <el-table-column prop="projectLeader" label="负责人" align="center">
|
|
|
160
|
+ <template slot-scope="scope">
|
|
|
161
|
+ {{ getUserName(scope.row.projectLeader) }}
|
|
|
162
|
+ </template>
|
|
|
163
|
+ </el-table-column>
|
|
|
164
|
+ </el-table>
|
|
|
165
|
+ <el-pagination @current-change="handleCurrentChange" :current-page.sync="queryParams.pageNum"
|
|
|
166
|
+ :page-size="queryParams.pageSize" layout="total, prev, pager, next" :total="total">
|
|
|
167
|
+ </el-pagination>
|
|
|
168
|
+ <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
|
|
|
169
|
+ :limit.sync="queryParams.pageSize" @pagination="getProjectList" /> -->
|
|
53
|
170
|
</div>
|
|
54
|
171
|
</div>
|
|
55
|
|
- </transition-group>
|
|
56
|
|
-
|
|
57
|
|
- <!-- 地图样式 -->
|
|
58
|
|
- <div class="switch-map">
|
|
59
|
|
- <SwitchMap></SwitchMap>
|
|
60
|
172
|
</div>
|
|
61
|
173
|
</div>
|
|
62
|
174
|
</template>
|
|
63
|
|
-<script>
|
|
64
|
175
|
|
|
65
|
|
-import 'ol/ol.css';
|
|
|
176
|
+<script>
|
|
|
177
|
+import { Tianditu, ZhongKe, ArcGISBlue, Autonavi, google, terrain, vect } from '@/utils/maps'
|
|
|
178
|
+import { listProject, getProject } from '@/api/oa/project/project'
|
|
|
179
|
+import infoBox from './index/infoBox.vue';
|
|
|
180
|
+// ---------------------------------ol引用------------------------------------------------
|
|
|
181
|
+import 'ol/ol.css'
|
|
66
|
182
|
import { Map, View } from 'ol';
|
|
67
|
|
-import { XYZ, Cluster, Vector as VectorSource } from 'ol/source';
|
|
|
183
|
+// import XYZ from 'ol/source/XYZ';
|
|
|
184
|
+// import VectorSource from 'ol/source/Vector';
|
|
|
185
|
+import KML from 'ol/format/KML';
|
|
68
|
186
|
import Overlay from 'ol/Overlay';
|
|
|
187
|
+import Feature from 'ol/Feature';
|
|
|
188
|
+import { toLonLat } from 'ol/proj';
|
|
69
|
189
|
import TileLayer from 'ol/layer/Tile';
|
|
|
190
|
+// import Draw from 'ol/interaction/Draw';
|
|
|
191
|
+import { createBox } from 'ol/interaction/Draw';
|
|
|
192
|
+import { Select, DragBox, Draw } from "ol/interaction";
|
|
|
193
|
+import { platformModifierKeyOnly, never } from 'ol/events/condition';
|
|
70
|
194
|
import VectorLayer from 'ol/layer/Vector';
|
|
71
|
|
-import { MousePosition, defaults as defaultControls } from 'ol/control';
|
|
72
|
195
|
import { boundingExtent } from 'ol/extent';
|
|
73
|
|
-import { createStringXY } from 'ol/coordinate';
|
|
74
|
|
-import Feature from 'ol/Feature';
|
|
75
|
|
-import { Point } from 'ol/geom';
|
|
76
|
|
-import { Circle, Fill, Stroke, Style, Text } from 'ol/style';
|
|
77
|
|
-import ProjectLayer from './index/projectLayer.vue';
|
|
78
|
|
-import SwitchMap from './index/switchMap.vue';
|
|
79
|
|
-import InfoBox from './index/infoBox.vue';
|
|
80
|
|
-import { listProject } from "@/api/file/project";
|
|
81
|
|
-import { getAchievementByProject } from "@/api/file/achievement";
|
|
82
|
|
-
|
|
|
196
|
+import { Cluster, Vector as VectorSource, XYZ } from 'ol/source';
|
|
|
197
|
+import { Point, Polygon, MultiPolygon, MultiLineString } from 'ol/geom';
|
|
|
198
|
+import { toStringXY, createStringXY, toStringHDMS } from 'ol/coordinate';
|
|
|
199
|
+import { Circle, Fill, Stroke, Style, RegularShape, Icon, Text } from 'ol/style';
|
|
|
200
|
+import { MousePosition, ScaleLine, defaults as defaultControls } from 'ol/control';
|
|
83
|
201
|
export default {
|
|
84
|
|
- components: {
|
|
85
|
|
- ProjectLayer,
|
|
86
|
|
- InfoBox,
|
|
87
|
|
- SwitchMap
|
|
88
|
|
- },
|
|
|
202
|
+ components: { infoBox },
|
|
89
|
203
|
data() {
|
|
90
|
204
|
return {
|
|
91
|
|
- map: null,
|
|
92
|
|
- clusters: null,
|
|
|
205
|
+ queryParams: {
|
|
|
206
|
+ pageNum: 1,
|
|
|
207
|
+ pageSize: 10
|
|
|
208
|
+ },
|
|
|
209
|
+ map: {},
|
|
|
210
|
+ control: null,
|
|
|
211
|
+ view: null,
|
|
|
212
|
+ select: null,
|
|
93
|
213
|
popup: null,
|
|
94
|
|
- mousePositionControl: null,
|
|
95
|
|
- proTableData: [],
|
|
96
|
|
- allproTableData: [],
|
|
97
|
|
- layersOpen: false,
|
|
98
|
|
- achiDialogData: [],
|
|
99
|
|
- dialogTableVisible: false,
|
|
100
|
|
- dialogTitle: '',
|
|
|
214
|
+ clusters: null,
|
|
101
|
215
|
viewCenter: [105.55, 34.18],
|
|
102
|
|
- datas: {
|
|
103
|
|
- clickFeacture: {},
|
|
|
216
|
+ layersOpen: false,
|
|
|
217
|
+ isOpenPro: false, //项目列表是否展开
|
|
|
218
|
+ searchVal: '',
|
|
|
219
|
+ searchType: '',
|
|
|
220
|
+ projectList: [],
|
|
|
221
|
+ allproTableData: [],
|
|
|
222
|
+ total: 0,
|
|
|
223
|
+ loading: true,
|
|
|
224
|
+ tableHeight: 0,
|
|
|
225
|
+ clickFeacture: {},
|
|
|
226
|
+ clickDatas: {
|
|
104
|
227
|
selectFeatures: null,
|
|
105
|
228
|
selectProjectNumber: "",
|
|
106
|
229
|
type: '',
|
|
107
|
|
- infoData: {}
|
|
108
|
|
- },
|
|
109
|
|
- tileLayers: [
|
|
110
|
|
- new TileLayer({
|
|
111
|
|
- source: new XYZ({
|
|
112
|
|
- url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
|
|
113
|
|
- }),
|
|
114
|
|
- properties: {
|
|
115
|
|
- name: '高德'
|
|
116
|
|
- },
|
|
117
|
|
- visible: true
|
|
118
|
|
- }),
|
|
119
|
|
- new TileLayer({
|
|
120
|
|
- source: new XYZ({
|
|
121
|
|
- url: "https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s,m&gl=CN&x={x}&y={y}&z={z}"
|
|
122
|
|
- }),
|
|
123
|
|
- properties: {
|
|
124
|
|
- name: '谷歌'
|
|
125
|
|
- },
|
|
126
|
|
- visible: false
|
|
127
|
|
- }),
|
|
128
|
|
- new TileLayer({
|
|
129
|
|
- source: new XYZ({
|
|
130
|
|
- url: "http://t4.tianditu.com/DataServer?T=ter_c&tk=4d02670f819130ba862ebc24a1aebaf3&x={x}&y={y}&l={z}"
|
|
131
|
|
- }),
|
|
132
|
|
- properties: {
|
|
133
|
|
- name: '天地图地形'
|
|
134
|
|
- },
|
|
135
|
|
- visible: false
|
|
136
|
|
- }),
|
|
137
|
|
- new TileLayer({
|
|
138
|
|
- source: new XYZ({
|
|
139
|
|
- url: "http://t4.tianditu.com/DataServer?T=vec_w&tk=81b9a9cf3e4be1df181e7bf54c5949fc&x={x}&y={y}&l={z}"
|
|
140
|
|
- }),
|
|
141
|
|
- properties: {
|
|
142
|
|
- name: '矢量图'
|
|
143
|
|
- },
|
|
144
|
|
- visible: false
|
|
145
|
|
- }),
|
|
146
|
|
- new TileLayer({
|
|
147
|
|
- source: new XYZ({
|
|
148
|
|
- url: 'http://t4.tianditu.com/DataServer?T=img_w&tk=4d02670f819130ba862ebc24a1aebaf3&x={x}&y={y}&l={z}'
|
|
149
|
|
- }),
|
|
150
|
|
- properties: {
|
|
151
|
|
- name: '天地图'
|
|
152
|
|
- },
|
|
153
|
|
- visible: false
|
|
154
|
|
- }),
|
|
155
|
|
- new TileLayer({
|
|
156
|
|
- source: new XYZ({
|
|
157
|
|
- url: "https://tiles1.geovisearth.com/base/v1/img/{z}/{x}/{y}?format=webp&tmsIds=w&token=9b56a7bcb2f51c939753bc066fa6d0e7b7f55cfbf1939fa9e04f53050f4154b9"
|
|
158
|
|
- }),
|
|
159
|
|
- properties: {
|
|
160
|
|
- name: '中科星图'
|
|
161
|
|
- },
|
|
162
|
|
- visible: false
|
|
163
|
|
- }),
|
|
164
|
|
- new TileLayer({
|
|
165
|
|
- source: new XYZ({
|
|
166
|
|
- url: "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
|
|
167
|
|
- }),
|
|
168
|
|
- properties: {
|
|
169
|
|
- name: 'ArcGIS'
|
|
170
|
|
- },
|
|
171
|
|
- visible: false
|
|
172
|
|
- })
|
|
173
|
|
- ],
|
|
174
|
|
- };
|
|
175
|
|
- },
|
|
176
|
|
- watch: {
|
|
177
|
|
- map: function (newval, oldval) {
|
|
178
|
|
- console.log(oldval);
|
|
179
|
|
- console.log(newval);
|
|
|
230
|
+ }
|
|
180
|
231
|
}
|
|
181
|
232
|
},
|
|
182
|
233
|
mounted() {
|
|
183
|
|
- },
|
|
184
|
|
- created() {
|
|
|
234
|
+ this.setTableDomHeight();
|
|
185
|
235
|
this.initMap();
|
|
186
|
|
- this.getProTableData()
|
|
|
236
|
+ this.getProjectList();
|
|
187
|
237
|
},
|
|
188
|
238
|
methods: {
|
|
|
239
|
+ setTableDomHeight() {
|
|
|
240
|
+ let dom = document.querySelector('.right-project');
|
|
|
241
|
+ dom.style.height = window.innerHeight - 110 + 'px'; //减去110为页头的高度
|
|
|
242
|
+ let height = dom.offsetHeight - 28 + 25 - 179 //表格的高度，减去表头179，边距25，以及页码28
|
|
|
243
|
+ this.resetHeight().then(() => {
|
|
|
244
|
+ this.tableHeight = height
|
|
|
245
|
+ })
|
|
|
246
|
+ },
|
|
|
247
|
+ resetHeight() {
|
|
|
248
|
+ return new Promise((resolve, rehect) => {
|
|
|
249
|
+ this.tableHeight = 0;
|
|
|
250
|
+ resolve()
|
|
|
251
|
+ })
|
|
|
252
|
+ },
|
|
189
|
253
|
initMap() {
|
|
190
|
|
- const mousePositionControl = new MousePosition({
|
|
191
|
|
- coordinateFormat: createStringXY(4),
|
|
192
|
|
- projection: 'EPSG:4326',
|
|
193
|
|
- className: 'custom-mouse-position',
|
|
194
|
|
- target: document.getElementById('mouse-position'),
|
|
195
|
|
- });
|
|
|
254
|
+ this.view = new View({
|
|
|
255
|
+ projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
|
|
|
256
|
+ center: this.viewCenter, // 中心点
|
|
|
257
|
+ zoom: 5, // // 地图缩放级别(打开页面时默认级别)
|
|
|
258
|
+ maxZoom: 20,
|
|
|
259
|
+ minZoom: 1, // 地图缩放最小级别
|
|
|
260
|
+ })
|
|
196
|
261
|
this.popup = new Overlay({
|
|
197
|
262
|
element: document.getElementById('popup'),
|
|
198
|
263
|
autoPan: {
|
|
|
@@ -200,75 +265,142 @@ export default {
|
|
200
|
265
|
duration: 250,
|
|
201
|
266
|
},
|
|
202
|
267
|
},
|
|
|
268
|
+ })
|
|
|
269
|
+ this.control = new MousePosition({
|
|
|
270
|
+ coordinateFormat: this.formatCoordinate(4),
|
|
|
271
|
+ projection: 'EPSG:4326',
|
|
|
272
|
+ className: 'custom-mouse-position',
|
|
|
273
|
+ target: document.getElementById('mouse-position'),
|
|
203
|
274
|
});
|
|
204
|
|
- this.popup.setPosition(undefined);
|
|
205
|
275
|
this.map = new Map({
|
|
206
|
|
- target: document.getElementById('maps'),
|
|
207
|
|
- controls: defaultControls().extend([mousePositionControl]),
|
|
208
|
|
- overlays: [this.popup],
|
|
209
|
|
- layers: this.tileLayers,
|
|
210
|
|
- view: new View({
|
|
211
|
|
- projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
|
|
212
|
|
- center: this.viewCenters, // 中心点
|
|
213
|
|
- // zoom: 5, // // 地图缩放级别(打开页面时默认级别)
|
|
214
|
|
- // maxZoom: 20,
|
|
215
|
|
- // minZoom: 1, // 地图缩放最小级别
|
|
216
|
|
- })
|
|
217
|
|
- });
|
|
|
276
|
+ target: 'maps',
|
|
|
277
|
+ controls: defaultControls().extend([this.control]),
|
|
|
278
|
+ layers: [
|
|
|
279
|
+ Autonavi,
|
|
|
280
|
+ new TileLayer({//标注
|
|
|
281
|
+ source: new XYZ({
|
|
|
282
|
+ url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
|
|
|
283
|
+ }),
|
|
|
284
|
+ properties: {
|
|
|
285
|
+ name: '标注'
|
|
|
286
|
+ },
|
|
|
287
|
+ }),
|
|
|
288
|
+ ],
|
|
|
289
|
+ view: this.view,
|
|
|
290
|
+ })
|
|
|
291
|
+ this.map.addOverlay(this.popup);
|
|
|
292
|
+ this.mapClick(this.map, this.popup);
|
|
218
|
293
|
},
|
|
219
|
|
- getProTableData() {
|
|
220
|
|
- let param = {
|
|
221
|
|
- pageNum: 1,
|
|
222
|
|
- pageSize: 10000,
|
|
223
|
|
- }
|
|
224
|
|
- listProject(param).then(res => {
|
|
225
|
|
- let data = res.rows;
|
|
226
|
|
- let features = [];
|
|
227
|
|
- let datas = [];
|
|
228
|
|
- for (let d of data) {
|
|
229
|
|
- if (d.kmlLat && d.kmlLng) {
|
|
230
|
|
- let f = new Feature(new Point([Number(d.kmlLng), Number(d.kmlLat)]));
|
|
231
|
|
- f.name = d.projectNumber;
|
|
232
|
|
- features.push(f);
|
|
233
|
|
- datas.push(d);
|
|
234
|
|
- }
|
|
235
|
|
- }
|
|
236
|
|
- this.proTableData = datas;
|
|
237
|
|
- this.allproTableData = datas;
|
|
238
|
|
- let source = new VectorSource({
|
|
239
|
|
- features: features,
|
|
240
|
|
- });
|
|
241
|
|
- let clusterSource = new Cluster({
|
|
242
|
|
- distance: 100, //群集之间的最小距离（以像素为单位）。
|
|
243
|
|
- source: source, //数据源
|
|
|
294
|
+ mapClick(map, popup) {
|
|
|
295
|
+ let that = this;
|
|
|
296
|
+ map.on('singleclick', function (evt) {
|
|
|
297
|
+ const coordinate = evt.coordinate;
|
|
|
298
|
+ let features = map.forEachFeatureAtPixel(evt.pixel, (feature) => {
|
|
|
299
|
+ return feature;
|
|
244
|
300
|
});
|
|
245
|
|
- this.clusters = new VectorLayer({
|
|
246
|
|
- name: 'clusters',
|
|
247
|
|
- source: clusterSource,
|
|
248
|
|
- style: this.clusterStyle(features,),
|
|
249
|
|
- zIndex: 99
|
|
250
|
|
- })
|
|
251
|
|
- this.map.addLayer(this.clusters);
|
|
252
|
|
- this.map.on('click', (e) => {
|
|
253
|
|
- this.clusters.getFeatures(e.pixel).then((clickedFeatures) => {
|
|
254
|
|
- if (clickedFeatures.length) {
|
|
255
|
|
- // Get clustered Coordinates
|
|
256
|
|
- const features = clickedFeatures[0].get('features');
|
|
257
|
|
- if (features.length > 1) {
|
|
258
|
|
- const extent = boundingExtent(
|
|
259
|
|
- features.map((r) => r.getGeometry().getCoordinates())
|
|
260
|
|
- );
|
|
261
|
|
- this.map.getView().fit(extent, { duration: 1000, padding: [100, 100, 100, 100] });
|
|
|
301
|
+ if (features != undefined && features != null && features != "") {
|
|
|
302
|
+ let feature = features.values_.features;
|
|
|
303
|
+ if (feature.length == 1) {
|
|
|
304
|
+ let num = feature[0].name
|
|
|
305
|
+ let projectId = feature[0].projectId
|
|
|
306
|
+ getProject(projectId).then(res => {
|
|
|
307
|
+ if (res.data) {
|
|
|
308
|
+ that.clickFeacture = res.data;
|
|
|
309
|
+ that.clickFeacture.type = 'projectPoint';
|
|
|
310
|
+ console.log(that.clickFeacture);
|
|
|
311
|
+ popup.setPosition(coordinate);
|
|
262
|
312
|
}
|
|
263
|
|
- }
|
|
264
|
|
- });
|
|
265
|
|
- });
|
|
|
313
|
+ })
|
|
|
314
|
+ } else {
|
|
|
315
|
+ popup.setPosition(undefined);
|
|
|
316
|
+ }
|
|
|
317
|
+ } else {
|
|
|
318
|
+ popup.setPosition(undefined);
|
|
|
319
|
+ }
|
|
266
|
320
|
})
|
|
267
|
321
|
},
|
|
|
322
|
+ /* 关闭信息框 */
|
|
|
323
|
+ closePopup() {
|
|
|
324
|
+ this.popup.setPosition(undefined);
|
|
|
325
|
+ },
|
|
|
326
|
+ openAchiList() {
|
|
268
|
327
|
|
|
|
328
|
+ },
|
|
|
329
|
+ formatCoordinate(fractionDigits) {
|
|
|
330
|
+ return (
|
|
|
331
|
+ /**
|
|
|
332
|
+ * @param {Coordinate} coordinate Coordinate.
|
|
|
333
|
+ * @return {string} String XY.
|
|
|
334
|
+ */
|
|
|
335
|
+ function (coordinate) {
|
|
|
336
|
+ return '经纬度：' + toStringXY(coordinate, fractionDigits);
|
|
|
337
|
+ }
|
|
|
338
|
+ );
|
|
|
339
|
+ },
|
|
|
340
|
+ resetView() {
|
|
|
341
|
+ this.map.getView().setCenter(this.viewCenter);
|
|
|
342
|
+ this.map.getView().setZoom(5)
|
|
|
343
|
+ },
|
|
|
344
|
+ rectSelect() {
|
|
|
345
|
+
|
|
|
346
|
+ },
|
|
|
347
|
+ polygonSelect() {
|
|
|
348
|
+
|
|
|
349
|
+ },
|
|
|
350
|
+ getProjectList() {
|
|
|
351
|
+ this.loading = true
|
|
|
352
|
+ listProject(this.queryParams).then(res => {
|
|
|
353
|
+ let data = res.rows;
|
|
|
354
|
+ this.total = res.total;
|
|
|
355
|
+ this.projectList = data;
|
|
|
356
|
+ this.allproTableData = data;
|
|
|
357
|
+ this.loading = false
|
|
|
358
|
+ this.addProjectCluster(data);
|
|
|
359
|
+ })
|
|
|
360
|
+ },
|
|
|
361
|
+ /* 格式化表格显示 */
|
|
|
362
|
+ formatterKmlurl(row, cloumn) {
|
|
|
363
|
+ if (row.projectKml == "" || row.projectKml == null) {
|
|
|
364
|
+ return "无";
|
|
|
365
|
+ } else {
|
|
|
366
|
+ return "有";
|
|
|
367
|
+ }
|
|
|
368
|
+ },
|
|
|
369
|
+ // 添加项目点在地图上
|
|
|
370
|
+ addProjectCluster(data) {
|
|
|
371
|
+ let features = [], projectPoints = []
|
|
|
372
|
+ for (let d of data) {
|
|
|
373
|
+ if (d.kmlLat && d.kmlLng) {
|
|
|
374
|
+ let f = new Feature(new Point([Number(d.kmlLng), Number(d.kmlLat)]));
|
|
|
375
|
+ f.name = d.projectNumber;
|
|
|
376
|
+ f.projectId = d.projectId;
|
|
|
377
|
+ features.push(f);
|
|
|
378
|
+ projectPoints.push(d);
|
|
|
379
|
+ }
|
|
|
380
|
+ }
|
|
|
381
|
+ let source = new VectorSource({
|
|
|
382
|
+ features: features,
|
|
|
383
|
+ });
|
|
|
384
|
+ let clusterSource = new Cluster({
|
|
|
385
|
+ distance: 100, //群集之间的最小距离（以像素为单位）。
|
|
|
386
|
+ source: source, //数据源
|
|
|
387
|
+ });
|
|
|
388
|
+ this.clusters = new VectorLayer({
|
|
|
389
|
+ name: 'clusters',
|
|
|
390
|
+ source: clusterSource,
|
|
|
391
|
+ style: this.clusterStyle,
|
|
|
392
|
+ zIndex: 99
|
|
|
393
|
+ })
|
|
|
394
|
+ this.map.addLayer(this.clusters);
|
|
|
395
|
+ },
|
|
|
396
|
+ handleCurrentChange(val) {
|
|
|
397
|
+ this.queryParams.pageNum = val
|
|
|
398
|
+ this.getProjectList()
|
|
|
399
|
+ },
|
|
|
400
|
+ /* 得到项目的点位绘制到地图上 */
|
|
269
|
401
|
clusterStyle(feature, resolution) {
|
|
270
|
402
|
let styleCache = {};
|
|
271
|
|
- const size = feature.length;
|
|
|
403
|
+ const size = feature.get('features').length;
|
|
272
|
404
|
let style = styleCache[size];
|
|
273
|
405
|
if (!style) {
|
|
274
|
406
|
style = [
|
|
|
@@ -324,7 +456,7 @@ export default {
|
|
324
|
456
|
return style;
|
|
325
|
457
|
},
|
|
326
|
458
|
getText(feature, resolution) {
|
|
327
|
|
- let features = feature;
|
|
|
459
|
+ let features = feature.values_.features;
|
|
328
|
460
|
let reo = resolution * 100;
|
|
329
|
461
|
let text;
|
|
330
|
462
|
if (reo > 2) {
|
|
|
@@ -336,45 +468,50 @@ export default {
|
|
336
|
468
|
}
|
|
337
|
469
|
return text;
|
|
338
|
470
|
},
|
|
339
|
|
- closePopup() {
|
|
340
|
|
- this.popup.setPosition(undefined);
|
|
341
|
|
- },
|
|
342
|
|
- openAchiList() {
|
|
343
|
|
- this.dialogTableVisible = true;
|
|
344
|
|
- let projectId = this.datas.clickFeacture.id;
|
|
345
|
|
- this.dialogTitle = this.datas.clickFeacture.projectNumber
|
|
346
|
|
- getAchievementByProject({ projectId }).then(res => {
|
|
347
|
|
- if (res.data.length == 0) {
|
|
348
|
|
- this.$message.error('暂无成果，请添加!');
|
|
349
|
|
- this.achiDialogData = [];
|
|
350
|
|
- } else {
|
|
351
|
|
- this.dialogTableVisible = true;
|
|
352
|
|
- this.achiDialogData = res.data;
|
|
|
471
|
+ queryProject() {
|
|
|
472
|
+ let type = this.searchType;
|
|
|
473
|
+ let param;
|
|
|
474
|
+ if (type == "1") {
|
|
|
475
|
+ param = {
|
|
|
476
|
+ pageNum: 1,
|
|
|
477
|
+ pageSize: 9999999,
|
|
|
478
|
+ projectNumber: this.searchVal
|
|
|
479
|
+ }
|
|
|
480
|
+ } else if (type == "2") {
|
|
|
481
|
+ param = {
|
|
|
482
|
+ pageNum: 1,
|
|
|
483
|
+ pageSize: 9999999,
|
|
|
484
|
+ projectName: this.searchVal
|
|
|
485
|
+ }
|
|
|
486
|
+ } else if (type == "3") {
|
|
|
487
|
+ param = {
|
|
|
488
|
+ pageNum: 1,
|
|
|
489
|
+ pageSize: 9999999,
|
|
|
490
|
+ projectType: this.searchVal
|
|
|
491
|
+ }
|
|
|
492
|
+ }
|
|
|
493
|
+ listProject(param).then(res => {
|
|
|
494
|
+ let data = res.rows;
|
|
|
495
|
+ let datas = [];
|
|
|
496
|
+ for (let d of data) {
|
|
|
497
|
+ if (d.kmlLat && d.kmlLng) {
|
|
|
498
|
+ datas.push(d);
|
|
|
499
|
+ }
|
|
353
|
500
|
}
|
|
|
501
|
+ this.projectList = data;
|
|
354
|
502
|
})
|
|
355
|
503
|
},
|
|
|
504
|
+ tableRowClassName() {
|
|
|
505
|
+
|
|
|
506
|
+ },
|
|
|
507
|
+ handleRowClick() {
|
|
356
|
508
|
|
|
357
|
|
- // 视角复位
|
|
358
|
|
- resetView() {
|
|
359
|
|
- this.map.getView().setCenter(this.viewCenter);
|
|
360
|
|
- this.map.getView().setZoom(5)
|
|
361
|
509
|
}
|
|
362
|
510
|
},
|
|
363
|
|
-};
|
|
364
|
|
-</script>
|
|
365
|
|
-<style lang="scss" scoped>
|
|
366
|
|
-:deep(.el-descriptions__label) {
|
|
367
|
|
- font-weight: bold;
|
|
368
|
|
-}
|
|
369
|
|
-
|
|
370
|
|
-:deep(.el-checkbox__label) {
|
|
371
|
|
- color: #fff;
|
|
372
|
|
-}
|
|
373
|
|
-
|
|
374
|
|
-:deep(.el-dialog) {
|
|
375
|
|
- margin-top: 10vh !important;
|
|
376
|
511
|
}
|
|
|
512
|
+</script>
|
|
377
|
513
|
|
|
|
514
|
+<style lang="scss" scoped>
|
|
378
|
515
|
.warpper-container {
|
|
379
|
516
|
position: relative;
|
|
380
|
517
|
}
|
|
|
@@ -384,48 +521,74 @@ export default {
|
|
384
|
521
|
height: calc(100vh - 84px);
|
|
385
|
522
|
}
|
|
386
|
523
|
|
|
387
|
|
-.layer-type {
|
|
|
524
|
+/* 鼠标移动，坐标样式 */
|
|
|
525
|
+#mouse-position {
|
|
|
526
|
+ width: 220px;
|
|
|
527
|
+ height: 40px;
|
|
|
528
|
+ line-height: 40px;
|
|
388
|
529
|
position: absolute;
|
|
389
|
|
- top: 67px;
|
|
390
|
|
- left: 53px;
|
|
391
|
|
- width: 250px;
|
|
392
|
|
- padding: 12px 10px;
|
|
393
|
|
- background-color: #fff;
|
|
|
530
|
+ top: 0px;
|
|
|
531
|
+ left: 50%;
|
|
|
532
|
+ transform: translate(-50%, 0%);
|
|
|
533
|
+ padding-left: 15px;
|
|
|
534
|
+ color: #fff;
|
|
|
535
|
+}
|
|
|
536
|
+
|
|
|
537
|
+.tool-box {
|
|
|
538
|
+ position: absolute;
|
|
|
539
|
+ top: 60px;
|
|
|
540
|
+ left: 8px;
|
|
|
541
|
+ width: 50px;
|
|
394
|
542
|
border-radius: 5px;
|
|
395
|
|
- cursor: move;
|
|
|
543
|
+ // background-color: #fff;
|
|
396
|
544
|
|
|
397
|
|
- .title {
|
|
398
|
|
- font-size: 16px;
|
|
399
|
|
- text-align: center;
|
|
400
|
|
- line-height: 45px;
|
|
|
545
|
+ .item {
|
|
|
546
|
+ margin-top: 10px;
|
|
|
547
|
+ width: 40px;
|
|
|
548
|
+ height: 40px;
|
|
|
549
|
+ padding: 6px;
|
|
|
550
|
+ background-color: rgba($color: #000000, $alpha: 0.5);
|
|
|
551
|
+ border-radius: 50%;
|
|
|
552
|
+ cursor: pointer;
|
|
401
|
553
|
}
|
|
402
|
554
|
|
|
403
|
|
- .layer-content {
|
|
404
|
|
- cursor: default;
|
|
405
|
|
- position: relative;
|
|
|
555
|
+ .view {
|
|
|
556
|
+ width: 100%;
|
|
|
557
|
+ height: 100%;
|
|
|
558
|
+ background: url('~@/assets/images/gis/home.png') no-repeat;
|
|
|
559
|
+ background-size: contain;
|
|
|
560
|
+ }
|
|
406
|
561
|
|
|
407
|
|
- .close {
|
|
408
|
|
- position: absolute;
|
|
409
|
|
- top: 0px;
|
|
410
|
|
- right: 2px;
|
|
411
|
|
- z-index: 12;
|
|
412
|
|
- }
|
|
|
562
|
+ .layers {
|
|
|
563
|
+ width: 100%;
|
|
|
564
|
+ height: 100%;
|
|
|
565
|
+ background: url('~@/assets/images/gis/layers.png') no-repeat;
|
|
|
566
|
+ background-size: contain;
|
|
|
567
|
+ }
|
|
413
|
568
|
|
|
414
|
|
- .close:hover {
|
|
415
|
|
- color: #409EFF;
|
|
416
|
|
- cursor: pointer;
|
|
417
|
|
- }
|
|
|
569
|
+ .select {
|
|
|
570
|
+ width: 100%;
|
|
|
571
|
+ height: 100%;
|
|
|
572
|
+ background: url('~@/assets/images/gis/select.png') no-repeat;
|
|
|
573
|
+ background-size: contain;
|
|
|
574
|
+ }
|
|
|
575
|
+
|
|
|
576
|
+ .selectM {
|
|
|
577
|
+ width: 100%;
|
|
|
578
|
+ height: 100%;
|
|
|
579
|
+ background: url('~@/assets/images/gis/selectM.png') no-repeat;
|
|
|
580
|
+ background-size: contain;
|
|
418
|
581
|
}
|
|
419
|
582
|
}
|
|
420
|
583
|
|
|
421
|
584
|
.right-project {
|
|
422
|
|
- width: v-bind('theme.width');
|
|
423
|
|
- min-height: 800px;
|
|
|
585
|
+ width: 500px;
|
|
|
586
|
+ // min-height: 600px;
|
|
424
|
587
|
max-height: calc(100vh - 110px);
|
|
425
|
588
|
padding: 10px;
|
|
426
|
589
|
position: absolute;
|
|
427
|
590
|
top: 10px;
|
|
428
|
|
- right: v-bind('theme.right');
|
|
|
591
|
+ right: 0;
|
|
429
|
592
|
background-color: #fff;
|
|
430
|
593
|
box-shadow: v-bind(--el - box - shadow - dark);
|
|
431
|
594
|
transition: all 0.6s ease-in-out;
|
|
|
@@ -474,128 +637,78 @@ export default {
|
|
474
|
637
|
}
|
|
475
|
638
|
}
|
|
476
|
639
|
|
|
477
|
|
-.achi-list {
|
|
478
|
|
- width: 425px;
|
|
479
|
|
- min-height: 300px;
|
|
480
|
|
- background-color: #fff;
|
|
481
|
|
- position: absolute;
|
|
482
|
|
- top: 55px;
|
|
483
|
|
- right: 520px;
|
|
484
|
|
- padding: 10px;
|
|
485
|
|
- border-radius: 4px;
|
|
486
|
|
- box-shadow: 0 0 10px rgba($color: #000000, $alpha: 0.5);
|
|
487
|
|
- cursor: move;
|
|
488
|
|
-
|
|
489
|
|
- .achi-content {
|
|
490
|
|
- cursor: default;
|
|
491
|
|
- }
|
|
492
|
|
-
|
|
493
|
|
- .achi-projectNumber {
|
|
494
|
|
- padding-left: 20px;
|
|
495
|
|
- font-size: 14px;
|
|
496
|
|
- font-family: '微软雅黑';
|
|
497
|
|
- }
|
|
498
|
|
-
|
|
499
|
|
- .achi-header {
|
|
500
|
|
- text-align: center;
|
|
501
|
|
- line-height: 40px;
|
|
502
|
|
- font-weight: bold;
|
|
503
|
|
- font-family: '黑体';
|
|
504
|
|
- position: relative;
|
|
505
|
|
-
|
|
506
|
|
- .close {
|
|
507
|
|
- position: absolute;
|
|
508
|
|
- right: 20px;
|
|
509
|
|
- top: 10px;
|
|
510
|
|
- }
|
|
511
|
|
-
|
|
512
|
|
- .close:hover {
|
|
513
|
|
- color: #409EFF;
|
|
514
|
|
- cursor: pointer;
|
|
515
|
|
- }
|
|
516
|
|
- }
|
|
|
640
|
+.closeProBox {
|
|
|
641
|
+ right: -500px;
|
|
517
|
642
|
}
|
|
518
|
643
|
|
|
519
|
|
-.tool-box {
|
|
|
644
|
+// 弹出框
|
|
|
645
|
+.ol-popup {
|
|
520
|
646
|
position: absolute;
|
|
521
|
|
- top: 60px;
|
|
522
|
|
- left: 8px;
|
|
523
|
|
- width: 50px;
|
|
524
|
|
- border-radius: 5px;
|
|
525
|
|
- // background-color: #fff;
|
|
|
647
|
+ background-color: #fff;
|
|
|
648
|
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
|
|
|
649
|
+ padding: 25px;
|
|
|
650
|
+ border-radius: 10px;
|
|
|
651
|
+ // border: 1px solid #cccccc;
|
|
|
652
|
+ bottom: 17px;
|
|
|
653
|
+ left: -220px;
|
|
|
654
|
+ min-width: 461px;
|
|
|
655
|
+
|
|
|
656
|
+ .ol-popup-closer {
|
|
|
657
|
+ text-decoration: none;
|
|
|
658
|
+ position: absolute;
|
|
|
659
|
+ top: 2px;
|
|
|
660
|
+ right: 8px;
|
|
|
661
|
+ }
|
|
526
|
662
|
|
|
527
|
|
- .item {
|
|
528
|
|
- margin-top: 10px;
|
|
529
|
|
- width: 40px;
|
|
530
|
|
- height: 40px;
|
|
531
|
|
- padding: 6px;
|
|
532
|
|
- background-color: rgba($color: #000000, $alpha: 0.5);
|
|
533
|
|
- border-radius: 50%;
|
|
|
663
|
+ .ol-popup-closer:after {
|
|
|
664
|
+ content: "✖";
|
|
534
|
665
|
cursor: pointer;
|
|
535
|
666
|
}
|
|
536
|
667
|
|
|
537
|
|
- .view {
|
|
538
|
|
- width: 100%;
|
|
539
|
|
- height: 100%;
|
|
540
|
|
- background: url('../../assets/images/gis/home.png') no-repeat;
|
|
541
|
|
- background-size: contain;
|
|
|
668
|
+ .ol-popup-closer:hover:after {
|
|
|
669
|
+ color: #409EFF;
|
|
542
|
670
|
}
|
|
543
|
671
|
|
|
544
|
|
- .layers {
|
|
545
|
|
- width: 100%;
|
|
546
|
|
- height: 100%;
|
|
547
|
|
- background: url('../../assets/images/gis/layers.png') no-repeat;
|
|
548
|
|
- background-size: contain;
|
|
549
|
|
- }
|
|
550
|
672
|
|
|
551
|
|
- .select {
|
|
552
|
|
- width: 100%;
|
|
553
|
|
- height: 100%;
|
|
554
|
|
- background: url('../../assets/images/gis/select.png') no-repeat;
|
|
555
|
|
- background-size: contain;
|
|
|
673
|
+ .look-achi {
|
|
|
674
|
+ text-align: right;
|
|
|
675
|
+ color: #409EFF;
|
|
|
676
|
+ cursor: pointer;
|
|
|
677
|
+ font-size: 14px;
|
|
|
678
|
+ margin-top: 10px;
|
|
|
679
|
+ font-family: '微软雅黑';
|
|
556
|
680
|
}
|
|
557
|
681
|
|
|
558
|
|
- .selectM {
|
|
559
|
|
- width: 100%;
|
|
560
|
|
- height: 100%;
|
|
561
|
|
- background: url('../../assets/images/gis/selectM.png') no-repeat;
|
|
562
|
|
- background-size: contain;
|
|
|
682
|
+ .title {
|
|
|
683
|
+ font-size: 14px;
|
|
|
684
|
+ font-family: 'Times New Roman', '黑体', Times, serif, ;
|
|
563
|
685
|
}
|
|
564
|
686
|
}
|
|
565
|
687
|
|
|
566
|
|
-.projectpoint-switch {
|
|
|
688
|
+.ol-popup:after,
|
|
|
689
|
+.ol-popup:before {
|
|
|
690
|
+ top: 100%;
|
|
|
691
|
+ border: solid transparent;
|
|
|
692
|
+ content: " ";
|
|
|
693
|
+ height: 0;
|
|
|
694
|
+ width: 0;
|
|
567
|
695
|
position: absolute;
|
|
568
|
|
- top: 10px;
|
|
569
|
|
- left: 60px;
|
|
570
|
|
- width: 100px;
|
|
571
|
|
- height: 50px;
|
|
572
|
|
- color: #fff;
|
|
|
696
|
+ pointer-events: none;
|
|
573
|
697
|
}
|
|
574
|
698
|
|
|
575
|
|
-.alter-position {
|
|
576
|
|
- width: 470px;
|
|
577
|
|
- position: absolute;
|
|
|
699
|
+.ol-popup:after {
|
|
|
700
|
+ border-top-color: #fff;
|
|
|
701
|
+ border-width: 10px;
|
|
578
|
702
|
left: 50%;
|
|
579
|
|
- top: 10px;
|
|
580
|
703
|
transform: translate(-50%, 0);
|
|
|
704
|
+ margin-left: -10px;
|
|
581
|
705
|
}
|
|
582
|
706
|
|
|
583
|
|
-.switch-map {
|
|
584
|
|
- position: absolute;
|
|
585
|
|
- bottom: 0;
|
|
586
|
|
- left: 0;
|
|
587
|
|
-}
|
|
588
|
|
-
|
|
589
|
|
-/* 鼠标移动，坐标样式 */
|
|
590
|
|
-#mouse-position {
|
|
591
|
|
- width: 220px;
|
|
592
|
|
- height: 40px;
|
|
593
|
|
- line-height: 40px;
|
|
594
|
|
- position: absolute;
|
|
595
|
|
- top: 0px;
|
|
|
707
|
+.ol-popup:before {
|
|
|
708
|
+ border-top-color: #fff;
|
|
|
709
|
+ border-width: 11px;
|
|
596
|
710
|
left: 50%;
|
|
597
|
|
- transform: translate(-50%, 0%);
|
|
598
|
|
- padding-left: 15px;
|
|
599
|
|
- color: #fff;
|
|
|
711
|
+ transform: translate(-50%, 0);
|
|
|
712
|
+ margin-left: -11px;
|
|
600
|
713
|
}
|
|
601
|
714
|
</style>
|
