@mapgis/webclient-mapboxgl-plugin 10.3.3 → 17.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +51 -124
- package/dist/es5/webclient-common.min.js +90 -0
- package/dist/es5/webclient-mapboxgl-plugin.min.js +1 -0
- package/dist/webclient-mapboxgl-plugin-es6.min.js +1 -0
- package/documention/EchartsLayer.html +379 -0
- package/documention/MapViewMapboxgl.html +3587 -0
- package/documention/Popup.html +1523 -0
- package/documention/Screenshot.html +1089 -0
- package/documention/SketchEditorMapboxgl.html +3383 -0
- package/documention/document_ArcGISVectorTileLayerView.js.html +265 -0
- package/documention/document_EchartsLayerView.js.html +246 -0
- package/documention/document_GraphicsLayerView.js.html +314 -0
- package/documention/document_IGSFeatureLayerView.js.html +218 -0
- package/documention/document_IGSMapImageLayerView.js.html +240 -0
- package/documention/document_IGSTileLayerView.js.html +236 -0
- package/documention/document_IGSVectorTileLayerView.js.html +264 -0
- package/documention/document_MapVLayerView.js.html +247 -0
- package/documention/document_WMSLayerView.js.html +240 -0
- package/documention/document_WMTSLayerView.js.html +234 -0
- package/documention/document_WebTileLayerView.js.html +240 -0
- package/documention/document_support_FeatureRenderView.js.html +682 -0
- package/documention/document_support_MapboxglGraphicsLayer.js.html +1184 -0
- package/documention/document_support_SourceMetaData.js.html +223 -0
- package/documention/document_support_Utils.js.html +624 -0
- package/documention/document_support_mapbox_mapboxCustomUtil.js.html +322 -0
- package/documention/global.html +252 -0
- package/documention/index.html +251 -0
- package/documention/module-%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%8F%AF%E8%A7%86%E5%8C%96.MapvLayer.html +445 -0
- package/documention/scripts/app.min.js +1 -0
- package/documention/scripts/linenumber.js +26 -0
- package/documention/scripts/search.js +45 -0
- package/documention/scripts/sideBar.js +11 -0
- package/documention/sketchEditor_SketchEditorMapboxgl.js.html +875 -0
- package/documention/styles/anchor.png +0 -0
- package/documention/styles/app.min.css +1 -0
- package/documention/styles/c.png +0 -0
- package/documention/styles/iframe.css +29 -0
- package/documention/styles/m.png +0 -0
- package/documention/styles/prettify-jsdoc.css +111 -0
- package/documention/styles/prettify-tomorrow.css +132 -0
- package/documention/styles/reset.css +44 -0
- package/documention/styles/up-arrow.png +0 -0
- package/documention/tutorial-1./345/277/253/351/200/237/345/205/245/351/227/250.html +165 -0
- package/documention/util_ConvertRendererToStyleLayerUtil.js.html +844 -0
- package/documention/util_MapboxglFeatureRender.js.html +225 -0
- package/documention/util_MapboxglPlugin.js.html +284 -0
- package/documention/view_MapViewMapboxgl.js.html +1882 -0
- package/documention/view_utils_ArcGISVectorTileLayerUtil.js.html +382 -0
- package/documention/view_utils_EchartsLayerUtil.js.html +194 -0
- package/documention/view_utils_IGSMapImageUtil.js.html +373 -0
- package/documention/view_utils_IGSTileLayerUtil.js.html +285 -0
- package/documention/view_utils_IGSVectorTileLayerUtil.js.html +379 -0
- package/documention/view_utils_MapVLayerUtil.js.html +197 -0
- package/documention/view_utils_Popup.js.html +525 -0
- package/documention/view_utils_Screenshot.js.html +320 -0
- package/documention/view_utils_WMSLayerUtil.js.html +337 -0
- package/documention/view_utils_WMTSLayerUtil.js.html +331 -0
- package/documention/view_utils_WebTileLayerUtil.js.html +284 -0
- package/documention/view_utils_echarts_EchartsLayerPlugin.js.html +419 -0
- package/documention/view_utils_mapV_MapVLayerPlugin.js.html +527 -0
- package/documention/view_utils_mapV_MapvBaseLayer.js.html +477 -0
- package/documention/view_utils_support_rasterLayerUtil.js.html +244 -0
- package/documention/view_utils_support_vectorLayerUtil.js.html +503 -0
- package/package.json +20 -20
- package/core/Base.js +0 -7
- package/core/index.js +0 -5
- package/index.js +0 -6
- package/overlay/D3Layer.js +0 -108
- package/overlay/EchartsLayer.js +0 -242
- package/overlay/ElsCubeLayer.js +0 -125
- package/overlay/MapvLayer.js +0 -298
- package/overlay/StreamLayer.js +0 -86
- package/overlay/TimeSpaceCubeLayer.js +0 -135
- package/overlay/dthree/mapbox-d3.css +0 -9
- package/overlay/echarts/MapCoordSys.js +0 -105
- package/overlay/echarts/MapModel.js +0 -0
- package/overlay/echarts/MapView.js +0 -0
- package/overlay/echarts/index.js +0 -4
- package/overlay/index.js +0 -31
- package/overlay/mapv/MapvBaseLayer.js +0 -299
- package/overlay/mapv/index.js +0 -5
- package/overlay/stream/GeojsonStreamLayer.js +0 -135
- package/overlay/stream/MapvStreamLayer.js +0 -79
- package/overlay/stream/index.js +0 -3
- package/overlay/stream/popup.css +0 -31
- package/service/index.js +0 -1
- package/service/socket/SocketService.js +0 -90
|
@@ -0,0 +1,1882 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
<!DOCTYPE html>
|
|
4
|
+
<html lang="en">
|
|
5
|
+
|
|
6
|
+
<head>
|
|
7
|
+
|
|
8
|
+
<meta charset="utf-8">
|
|
9
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
10
|
+
<title>Client for JavaScript view/MapViewMapboxgl.js</title>
|
|
11
|
+
<!--[if lt IE 9]>
|
|
12
|
+
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
13
|
+
<![endif]-->
|
|
14
|
+
<link type="text/css" rel="stylesheet" href="styles/app.min.css">
|
|
15
|
+
<link type="text/css" rel="stylesheet" href="styles/iframe.css">
|
|
16
|
+
<link type="text/css" rel="stylesheet" href="">
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
</head>
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
<body class="layout small-header">
|
|
24
|
+
<div id="stickyNavbarOverlay"></div>
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
<div class="top-nav">
|
|
28
|
+
<div class="inner">
|
|
29
|
+
<a id="hamburger" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
|
|
30
|
+
<span aria-hidden="true"></span>
|
|
31
|
+
<span aria-hidden="true"></span>
|
|
32
|
+
<span aria-hidden="true"></span>
|
|
33
|
+
</a>
|
|
34
|
+
<div class="logo">
|
|
35
|
+
|
|
36
|
+
<h1> MapGIS Client for JavaScript API</h1>
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
</div>
|
|
40
|
+
<div class="menu">
|
|
41
|
+
|
|
42
|
+
<div class="navigation">
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
<a
|
|
46
|
+
class="link user-link "
|
|
47
|
+
href="/static/modules/common/api/common-mapgis/index.html"
|
|
48
|
+
>
|
|
49
|
+
Common
|
|
50
|
+
</a>
|
|
51
|
+
|
|
52
|
+
<a
|
|
53
|
+
class="link user-link "
|
|
54
|
+
href="/static/modules/cesium/api/cesium-mapgis/index.html"
|
|
55
|
+
>
|
|
56
|
+
Cesium
|
|
57
|
+
</a>
|
|
58
|
+
|
|
59
|
+
<a
|
|
60
|
+
class="link user-link "
|
|
61
|
+
href="/static/modules/mapboxgl/api/mapboxgl-mapgis/index.html"
|
|
62
|
+
>
|
|
63
|
+
MapboxGL
|
|
64
|
+
</a>
|
|
65
|
+
|
|
66
|
+
<a
|
|
67
|
+
class="link user-link "
|
|
68
|
+
href="/static/modules/leaflet/api/leaflet-mapgis/index.html"
|
|
69
|
+
>
|
|
70
|
+
Leaflet
|
|
71
|
+
</a>
|
|
72
|
+
|
|
73
|
+
<a
|
|
74
|
+
class="link user-link "
|
|
75
|
+
href="/static/modules/openlayers/api/openLayers-mapgis/index.html"
|
|
76
|
+
>
|
|
77
|
+
OpenLayers
|
|
78
|
+
</a>
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<div id="main">
|
|
88
|
+
<div
|
|
89
|
+
class="sidebar "
|
|
90
|
+
id="sidebarNav"
|
|
91
|
+
>
|
|
92
|
+
<div>
|
|
93
|
+
<span class="mapgis-api-document-span"><a href="index.html">API文档</a></span>
|
|
94
|
+
</div>
|
|
95
|
+
|
|
96
|
+
<div class="search-wrapper">
|
|
97
|
+
<input id="search" type="text" placeholder="搜索文档..." class="input">
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<nav>
|
|
101
|
+
|
|
102
|
+
<div class="category"><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">undefined</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Popup.html">Popup</a><span style="display: none;"><p>二维场景信息弹窗(leaflet引擎)
|
|
103
|
+
参考示例:
|
|
104
|
+
<a href='#MapView'>[初始化二维场景视图]</a>
|
|
105
|
+
[ES6引入方式]:<br/>
|
|
106
|
+
import { Popup } from '@mapgis/webclient-leaflet-plugin' <br/>
|
|
107
|
+
自定义样式说明:<br/>
|
|
108
|
+
zondy-popup__content 弹窗容器样式<br/>
|
|
109
|
+
zondy-popup__tip 弹窗对话框箭头样式<br/>
|
|
110
|
+
zondy-popup__header 弹窗头部样式<br/>
|
|
111
|
+
zondy-popup__content 弹窗主体样式<br/>
|
|
112
|
+
zondy-popup__footer 弹窗底部样式<br/></p></span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">undefined</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="Screenshot.html">Screenshot</a><span style="display: none;"><p>打印工具</p></span></li></ul><div style="font-weight: bold;vertical-align: middle;padding: 0.4rem 0;" class="mapgis-menu-span"><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/m.png" alt="">草图编辑模块</div><ul class="mapgis-sidebar-menus"><li><img style="width: 20px;margin-right: 6px;vertical-align: middle;" src="./styles/c.png" alt=""><a href="SketchEditorMapboxgl.html">SketchEditorMapboxgl</a><span style="display: none;"><p>二维场景草图编辑类<br/>
|
|
113
|
+
<br>[ES5引入方式]:<br/>
|
|
114
|
+
const { SketchEditorMapboxgl } = Zondy <br/>
|
|
115
|
+
[ES6引入方式]:<br/>
|
|
116
|
+
import { SketchEditorMapboxgl } from "@mapgis/webclient-leaflet-plugin" <br/></p></span></li></ul></div>
|
|
117
|
+
|
|
118
|
+
</nav>
|
|
119
|
+
</div>
|
|
120
|
+
<div class="core" id="main-content-wrapper">
|
|
121
|
+
<div class="content">
|
|
122
|
+
<header id="page-title" class="page-title">
|
|
123
|
+
<span class="page-title-main">类名</span>
|
|
124
|
+
<span class="page-title-sub">view/MapViewMapboxgl.js</span>
|
|
125
|
+
</header>
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
<section>
|
|
132
|
+
<article>
|
|
133
|
+
<pre class="prettyprint source linenums"><code>import {
|
|
134
|
+
Zondy,
|
|
135
|
+
defaultValue,
|
|
136
|
+
MapView,
|
|
137
|
+
Point,
|
|
138
|
+
Extent,
|
|
139
|
+
SpatialReference,
|
|
140
|
+
ViewEventType,
|
|
141
|
+
LayerType,
|
|
142
|
+
Projection,
|
|
143
|
+
Geometry,
|
|
144
|
+
isNull,
|
|
145
|
+
proj4,
|
|
146
|
+
TileInfoUtil,
|
|
147
|
+
toJSON,
|
|
148
|
+
Map,
|
|
149
|
+
getGUID
|
|
150
|
+
} from '@mapgis/webclient-common'
|
|
151
|
+
import mapboxgl from '@mapgis/mapbox-gl'
|
|
152
|
+
import { getLayerView } from '../document/index'
|
|
153
|
+
import MapViewUtil from './utils/MapViewUtil'
|
|
154
|
+
import Popup from './utils/Popup'
|
|
155
|
+
import Screenshot from './utils/Screenshot'
|
|
156
|
+
import { mapboxCustomCRS } from '../document/support/mapbox/mapboxCustomUtil'
|
|
157
|
+
|
|
158
|
+
class MapViewMapboxgl extends MapView {
|
|
159
|
+
constructor(options) {
|
|
160
|
+
super(options)
|
|
161
|
+
options = defaultValue(options, {})
|
|
162
|
+
this._options = options
|
|
163
|
+
/**
|
|
164
|
+
* 地图视图中心点
|
|
165
|
+
* @member {Point} MapView.prototype.center
|
|
166
|
+
*/
|
|
167
|
+
// 统一center的类型
|
|
168
|
+
this._center = defaultValue(options.center, undefined)
|
|
169
|
+
if (
|
|
170
|
+
this._center &&
|
|
171
|
+
Array.isArray(this._center) &&
|
|
172
|
+
this._center.length > 1
|
|
173
|
+
) {
|
|
174
|
+
this._center = new Point({
|
|
175
|
+
coordinates: [this._center[0], this._center[1]]
|
|
176
|
+
})
|
|
177
|
+
}
|
|
178
|
+
/**
|
|
179
|
+
* 地图视图可视范围
|
|
180
|
+
* @member {Extent} MapView.prototype.extent
|
|
181
|
+
*/
|
|
182
|
+
this._extent = defaultValue(options.extent, undefined)
|
|
183
|
+
/**
|
|
184
|
+
* 地图视图宽度
|
|
185
|
+
* @readonly
|
|
186
|
+
* @member {Number} MapView.prototype.width
|
|
187
|
+
*/
|
|
188
|
+
this.width = undefined
|
|
189
|
+
/**
|
|
190
|
+
* 地图视图高度
|
|
191
|
+
* @readonly
|
|
192
|
+
* @member {Number} MapView.prototype.height
|
|
193
|
+
*/
|
|
194
|
+
this.height = undefined
|
|
195
|
+
|
|
196
|
+
/**
|
|
197
|
+
* 地图层级
|
|
198
|
+
* @member {Number} MapView.prototype.zoom
|
|
199
|
+
*/
|
|
200
|
+
this._zoom = defaultValue(options.zoom, 0)
|
|
201
|
+
|
|
202
|
+
/**
|
|
203
|
+
* 地图视图比例尺
|
|
204
|
+
* @member {Number} MapView.prototype.scale
|
|
205
|
+
*/
|
|
206
|
+
this._scale = defaultValue(options.scale, undefined)
|
|
207
|
+
|
|
208
|
+
/**
|
|
209
|
+
* 地图视图最大比例尺
|
|
210
|
+
* @member {Number} MapView.prototype.maxScale
|
|
211
|
+
*/
|
|
212
|
+
this.maxScale = defaultValue(options.maxScale, undefined)
|
|
213
|
+
/**
|
|
214
|
+
* 地图视图最小比例尺
|
|
215
|
+
* @member {Number} MapView.prototype.minScale
|
|
216
|
+
*/
|
|
217
|
+
this.minScale = defaultValue(options.minScale, undefined)
|
|
218
|
+
|
|
219
|
+
/**
|
|
220
|
+
* 地图弹框popup
|
|
221
|
+
* @member {Popup} MapView.prototype.popup
|
|
222
|
+
*/
|
|
223
|
+
this.popup = defaultValue(options.popup, undefined)
|
|
224
|
+
|
|
225
|
+
/**
|
|
226
|
+
* 视图空间参考系
|
|
227
|
+
* @readonly
|
|
228
|
+
* @member {SpatialReference} MapView.prototype._spatialReference
|
|
229
|
+
*/
|
|
230
|
+
this._spatialReference = undefined
|
|
231
|
+
this._referenceLayer = undefined
|
|
232
|
+
this.crs = undefined
|
|
233
|
+
/**
|
|
234
|
+
* 是否锁定视图空间参考系
|
|
235
|
+
* @member {Boolean} MapView.prototype.spatialReferenceLocked
|
|
236
|
+
*/
|
|
237
|
+
this.spatialReferenceLocked = defaultValue(
|
|
238
|
+
options.spatialReferenceLocked,
|
|
239
|
+
false
|
|
240
|
+
)
|
|
241
|
+
/**
|
|
242
|
+
* 试图是否静止
|
|
243
|
+
* @member {Boolean} MapView.prototype.stationary
|
|
244
|
+
* @readonly
|
|
245
|
+
*/
|
|
246
|
+
this.stationary = true
|
|
247
|
+
/**
|
|
248
|
+
* 初始化图层的额外参数,请参考MapBoxGl的API文档
|
|
249
|
+
* @member {Object} MapView.prototype.extendOptions
|
|
250
|
+
*/
|
|
251
|
+
this.extendOptions = defaultValue(options.extendOptions, {})
|
|
252
|
+
/**
|
|
253
|
+
* 地图视图最大显示范围。用户不设置时,将地图范围作为地图视图的最大显示范围,用户设置时采用用户设置的。地图视图初始化时,会根据此范围计算地图视图的最小比例尺,当瓦片数据的最大比例尺小于此比例尺时,无法显示。在相同视图大小下,fullExtent越大,地图视图的最小比例尺越小。
|
|
254
|
+
* @readonly
|
|
255
|
+
* @member {Extent} MapView.prototype.fullExtent
|
|
256
|
+
*/
|
|
257
|
+
/**
|
|
258
|
+
* 初始化MapBoxGl视图的额外参数,请参考MapBox官网的图层初始化参数
|
|
259
|
+
* @member {Object} MapView.prototype.extendOptions
|
|
260
|
+
*/
|
|
261
|
+
this.extendOptions = defaultValue(options.extendOptions, {})
|
|
262
|
+
if (options.fullExtent) {
|
|
263
|
+
let fullExtent = Extent.fromJSON(options.fullExtent.toJSON())
|
|
264
|
+
if (!fullExtent.spatialReference.isGeographic) {
|
|
265
|
+
fullExtent = Projection.project(
|
|
266
|
+
fullExtent,
|
|
267
|
+
new SpatialReference({
|
|
268
|
+
wkid: 4326
|
|
269
|
+
})
|
|
270
|
+
)
|
|
271
|
+
}
|
|
272
|
+
// 初始化地图最大范围(4326坐标系)
|
|
273
|
+
this._initFullExtent = fullExtent
|
|
274
|
+
}
|
|
275
|
+
// 地图最大范围(4326坐标系)
|
|
276
|
+
this._fullExtent = this._initFullExtent
|
|
277
|
+
// 地图范围,4326坐标系
|
|
278
|
+
this._mapExtent = null
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
/**
|
|
282
|
+
* 初始化一个地图视图对象
|
|
283
|
+
* @param isFirst 是否是第一次构造视图
|
|
284
|
+
* @private
|
|
285
|
+
* */
|
|
286
|
+
_initView(isFirst, options) {
|
|
287
|
+
const self = this
|
|
288
|
+
mapboxgl.accessToken =
|
|
289
|
+
'pk.eyJ1IjoiemtidWQiLCJhIjoiY2w5OGF2NXIyMzQ5bjNub2luem85Y2Z4OCJ9.uX09XQPOX5E7sOohws2l_Q'
|
|
290
|
+
// 如果是初次构造视图(初次获取到crs),且未设置视图中心点,则取_fullExtent中心作为视图中心点
|
|
291
|
+
if (isFirst && !this._center) {
|
|
292
|
+
if (this.fullExtent) {
|
|
293
|
+
this._center = this._fullExtent.center
|
|
294
|
+
}
|
|
295
|
+
}
|
|
296
|
+
// 根据fullExtent获取leaflet的maxBounds
|
|
297
|
+
const maxBounds = this._getMaxBounds()
|
|
298
|
+
// 初始化比例尺
|
|
299
|
+
if (!this._zoom && this._scale) {
|
|
300
|
+
this._initScale(this._scale)
|
|
301
|
+
}
|
|
302
|
+
let fitBoundsOptions = undefined
|
|
303
|
+
if (!this._center && !this._zoom) {
|
|
304
|
+
if (this._extent) {
|
|
305
|
+
fitBoundsOptions = [
|
|
306
|
+
[this._extent.xmin, this._extent.ymin],
|
|
307
|
+
[this._extent.xmax, this._extent.ymax]
|
|
308
|
+
]
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
const viewOptions = {
|
|
312
|
+
// 经纬度一定要设置crs参数
|
|
313
|
+
crs: this.crs,
|
|
314
|
+
// MapBox的maxBounds需要优化
|
|
315
|
+
maxBounds,
|
|
316
|
+
// 地图容器div的id
|
|
317
|
+
container: this._viewId,
|
|
318
|
+
// 设置地图样式信息
|
|
319
|
+
style: {
|
|
320
|
+
version: 8,
|
|
321
|
+
sources: {},
|
|
322
|
+
layers: [
|
|
323
|
+
{
|
|
324
|
+
id: getGUID(),
|
|
325
|
+
type: 'background',
|
|
326
|
+
paint: {
|
|
327
|
+
'background-color': 'rgba(255, 255, 255,1)'
|
|
328
|
+
}
|
|
329
|
+
}
|
|
330
|
+
]
|
|
331
|
+
},
|
|
332
|
+
zoom: this._zoom,
|
|
333
|
+
center: this._center.coordinates,
|
|
334
|
+
fitBoundsOptions,
|
|
335
|
+
preserveDrawingBuffer: true
|
|
336
|
+
}
|
|
337
|
+
// 初始化参数可被用户覆盖
|
|
338
|
+
Object.keys(this.extendOptions).forEach((key) => {
|
|
339
|
+
viewOptions[key] = Object.assign(
|
|
340
|
+
viewOptions[key],
|
|
341
|
+
this.extendOptions[key]
|
|
342
|
+
)
|
|
343
|
+
})
|
|
344
|
+
this._innerView = new mapboxgl.Map(viewOptions)
|
|
345
|
+
this.engineType = 'mapboxgl'
|
|
346
|
+
// 初始化视图事件
|
|
347
|
+
this._initViewEvent()
|
|
348
|
+
if (!this._center && !this._zoom && this._extent) {
|
|
349
|
+
this.flyTo({ extent: this._this._extent }, { animate: false })
|
|
350
|
+
}
|
|
351
|
+
// 获取视图大小
|
|
352
|
+
this._initSize()
|
|
353
|
+
// 初始化最大比例尺和最小比例尺
|
|
354
|
+
this._initScaleLimit()
|
|
355
|
+
// 初始化地图视图弹框,目前仅支持location方式打开弹框
|
|
356
|
+
this._initPopup()
|
|
357
|
+
// 设置鼠标样式
|
|
358
|
+
this._initCursor()
|
|
359
|
+
|
|
360
|
+
return new Promise((resolve) => {
|
|
361
|
+
if (self._innerView.loaded()) {
|
|
362
|
+
resolve(self)
|
|
363
|
+
} else {
|
|
364
|
+
self._innerView.once('load', () => {
|
|
365
|
+
resolve(self)
|
|
366
|
+
})
|
|
367
|
+
}
|
|
368
|
+
})
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
// 只定义内部变量this.minScale、this.maxScale
|
|
372
|
+
_initScaleLimit() {
|
|
373
|
+
// maxScale对应maxZoom,minScale对应minZoom
|
|
374
|
+
// 如果用户设置了minScale/maxScale,则地图将直接采用用户设置的值。如果用户未设置地图视图会根据全图范围,计算视图的最小比例尺。
|
|
375
|
+
if (this._options.minScale !== undefined) {
|
|
376
|
+
// 在mapView上设置了minScale:
|
|
377
|
+
// 如果minScale大于0,则设置引擎的minZoom为minScale对应的层级;
|
|
378
|
+
// 如果minScale小于等于0,则设置引擎minZoom为undefined,minScale置为零。
|
|
379
|
+
if (this.minScale > 0) {
|
|
380
|
+
const zoom = this._getZoomByScale(this.minScale)
|
|
381
|
+
if (zoom !== undefined) {
|
|
382
|
+
this._innerView.setMinZoom(zoom)
|
|
383
|
+
}
|
|
384
|
+
} else {
|
|
385
|
+
this.minScale = 0
|
|
386
|
+
this._innerView.setMinZoom(undefined)
|
|
387
|
+
}
|
|
388
|
+
} else {
|
|
389
|
+
// 用户未设置minScale:(地图视图会根据全图范围,计算视图的最小比例尺。)
|
|
390
|
+
// 如果引擎上的minZoom有值且是有限值,则minScale为全图范围对应的比例尺;
|
|
391
|
+
// 否则,minZoom也为undefined。
|
|
392
|
+
const minZoom = this._innerView.getMinZoom()
|
|
393
|
+
if (isFinite(minZoom)) {
|
|
394
|
+
this.minScale = this._getScaleByZoom(this.minZoom)
|
|
395
|
+
} else {
|
|
396
|
+
this.minScale = undefined
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
if (this._options.maxScale !== undefined) {
|
|
400
|
+
// 在mapView上设置了maxScale:
|
|
401
|
+
// 如果maxScale大于0,则设置引擎的maxZoom为maxScale对应的层级;
|
|
402
|
+
// 如果maxScale小于等于0,则设置引擎maxZoom为undefined,maxScale置为0。
|
|
403
|
+
// 初始option设置过maxScale
|
|
404
|
+
if (this.maxScale > 0) {
|
|
405
|
+
const zoom = this._getZoomByScale(this.maxScale)
|
|
406
|
+
if (zoom !== undefined) {
|
|
407
|
+
this._innerView.setMaxZoom(zoom)
|
|
408
|
+
}
|
|
409
|
+
} else if (this.maxScale <= 0) {
|
|
410
|
+
this.maxScale = 0
|
|
411
|
+
this._innerView.setMaxZoom(undefined)
|
|
412
|
+
}
|
|
413
|
+
} else {
|
|
414
|
+
// mapView没有设置maxScale:
|
|
415
|
+
// 如果引擎上的maxZoom有值且是有限值,则maxScale为引擎视图最大层级对应的比例尺;
|
|
416
|
+
// 否则,maxZoom也为undefined。
|
|
417
|
+
|
|
418
|
+
// 处理超过lod层级时,导致部分图层投影转换出现非法值问题
|
|
419
|
+
let maxZoom = this._innerView.getMaxZoom()
|
|
420
|
+
const crs = this.crs || {}
|
|
421
|
+
const options = crs.options || {}
|
|
422
|
+
const lods = options.lods
|
|
423
|
+
if (lods && Array.isArray(lods)) {
|
|
424
|
+
if (maxZoom >= lods.length - 1) {
|
|
425
|
+
maxZoom = lods.length - 1
|
|
426
|
+
this._innerView.setMaxZoom(maxZoom)
|
|
427
|
+
}
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
if (isFinite(maxZoom)) {
|
|
431
|
+
this.maxScale = this._getScaleByZoom(maxZoom)
|
|
432
|
+
} else {
|
|
433
|
+
this.maxScale = undefined
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
if (!this._scale || this._scale <= 0) {
|
|
437
|
+
// 当_scale没有值或小于等于0,取最小比例尺的值
|
|
438
|
+
this._scale = this.minScale
|
|
439
|
+
} else if (this._scale > this.minScale) {
|
|
440
|
+
// 当_scale大于minScale,则超出比例尺范围限制,_scale置为最小比例尺的值
|
|
441
|
+
this._scale = this.minScale
|
|
442
|
+
} else if (this._scale < this.maxScale) {
|
|
443
|
+
// 当_scale小于maxScale,则超出比例尺范围限制,_scale置为最大比例尺的值
|
|
444
|
+
this._scale = this.maxScale
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
|
|
448
|
+
// 构造crs对象
|
|
449
|
+
_createCrsObject(options) {
|
|
450
|
+
mapboxCustomCRS(mapboxgl, proj4)
|
|
451
|
+
if (
|
|
452
|
+
!options.spatialReference ||
|
|
453
|
+
!options.resolutions ||
|
|
454
|
+
!options.origin ||
|
|
455
|
+
!options.extent
|
|
456
|
+
) {
|
|
457
|
+
return
|
|
458
|
+
}
|
|
459
|
+
let wkt
|
|
460
|
+
if (options.spatialReference.wkid) {
|
|
461
|
+
wkt = Projection.getEPSGByWKID(options.spatialReference.wkid).strProject
|
|
462
|
+
} else if (options.spatialReference.wkt) {
|
|
463
|
+
wkt = options.spatialReference.wkt
|
|
464
|
+
}
|
|
465
|
+
const extentBounds = [
|
|
466
|
+
options.extent.xmin,
|
|
467
|
+
options.extent.ymin,
|
|
468
|
+
options.extent.xmax,
|
|
469
|
+
options.extent.ymax
|
|
470
|
+
]
|
|
471
|
+
|
|
472
|
+
const code = `EPSG:${options.spatialReference.wkid}`
|
|
473
|
+
const def = wkt
|
|
474
|
+
const crs = new mapboxgl.Proj.CRS(code, def, {
|
|
475
|
+
resolutions: options.resolutions,
|
|
476
|
+
origin: options.origin,
|
|
477
|
+
tileSize: options.tileSize,
|
|
478
|
+
bounds: extentBounds,
|
|
479
|
+
lods: options.lod
|
|
480
|
+
})
|
|
481
|
+
crs.options = options
|
|
482
|
+
return crs
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
_reCreateView() {
|
|
486
|
+
// 重置视图
|
|
487
|
+
if (this._innerView) {
|
|
488
|
+
// 停止视图动画
|
|
489
|
+
this._innerView._animatingZoom = false
|
|
490
|
+
// 销毁容器,此处会停止飞行动画、pan动画
|
|
491
|
+
this._innerView.remove()
|
|
492
|
+
}
|
|
493
|
+
return this._initView(true, this._options)
|
|
494
|
+
}
|
|
495
|
+
|
|
496
|
+
_isEqualBounds(bounds1, bounds2) {
|
|
497
|
+
let isEqual = true
|
|
498
|
+
if (
|
|
499
|
+
bounds1 &&
|
|
500
|
+
bounds2 &&
|
|
501
|
+
Array.isArray(bounds1) &&
|
|
502
|
+
Array.isArray(bounds2) &&
|
|
503
|
+
bounds1.length === bounds2.length
|
|
504
|
+
) {
|
|
505
|
+
for (const i in bounds1) {
|
|
506
|
+
if (bounds1[i] !== bounds2[i]) {
|
|
507
|
+
isEqual = false
|
|
508
|
+
break
|
|
509
|
+
}
|
|
510
|
+
}
|
|
511
|
+
} else if (
|
|
512
|
+
(!bounds1 && !bounds2) ||
|
|
513
|
+
(Array.isArray(bounds1) &&
|
|
514
|
+
bounds1.length === 0 &&
|
|
515
|
+
Array.isArray(bounds2) &&
|
|
516
|
+
bounds2.length === 0)
|
|
517
|
+
) {
|
|
518
|
+
isEqual = true
|
|
519
|
+
} else {
|
|
520
|
+
isEqual = false
|
|
521
|
+
}
|
|
522
|
+
return isEqual
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
/**
|
|
526
|
+
* 初始化地图视图事件
|
|
527
|
+
* @private
|
|
528
|
+
* */
|
|
529
|
+
_initViewEvent() {
|
|
530
|
+
const self = this
|
|
531
|
+
// 定义一个变量存储单击触发事件
|
|
532
|
+
this._clickStore = null
|
|
533
|
+
// 定义一个变量存储拖拽事件参数
|
|
534
|
+
this._dragParams = { isDrag: false, origin: null, action: '', button: null }
|
|
535
|
+
|
|
536
|
+
// 地图视图加载完毕事件
|
|
537
|
+
self.fire(ViewEventType.loaded, {})
|
|
538
|
+
|
|
539
|
+
// leaflet注册点击事件
|
|
540
|
+
this._innerView.on('click', (event) => {
|
|
541
|
+
// 单击触发事件,300ms延迟
|
|
542
|
+
self._clickStore = setTimeout(function () {
|
|
543
|
+
// 发送左键单击点击事件
|
|
544
|
+
if (self._clickStore) {
|
|
545
|
+
self.fire(ViewEventType.click, MapViewUtil.getMouseEvent(event, self))
|
|
546
|
+
}
|
|
547
|
+
}, 300)
|
|
548
|
+
// 发送立即点击事件
|
|
549
|
+
self.fire(
|
|
550
|
+
ViewEventType.immediateClick,
|
|
551
|
+
MapViewUtil.getMouseEvent(event, self)
|
|
552
|
+
)
|
|
553
|
+
})
|
|
554
|
+
|
|
555
|
+
// 注册鼠标右键按下事件
|
|
556
|
+
this._innerView.on('contextmenu', (event) => {
|
|
557
|
+
// 单击触发事件,300ms延迟
|
|
558
|
+
self._clickStore = setTimeout(function () {
|
|
559
|
+
// 发送鼠标右键按下事件
|
|
560
|
+
if (self._clickStore) {
|
|
561
|
+
self.fire(ViewEventType.click, MapViewUtil.getMouseEvent(event, self))
|
|
562
|
+
}
|
|
563
|
+
}, 300)
|
|
564
|
+
// 发送立即点击事件
|
|
565
|
+
self.fire(
|
|
566
|
+
ViewEventType.immediateClick,
|
|
567
|
+
MapViewUtil.getMouseEvent(event, self)
|
|
568
|
+
)
|
|
569
|
+
})
|
|
570
|
+
|
|
571
|
+
// 注册双击事件
|
|
572
|
+
this._innerView.on('dblclick', (event) => {
|
|
573
|
+
// 单击事件清理
|
|
574
|
+
if (self._clickStore) {
|
|
575
|
+
clearTimeout(this._clickStore)
|
|
576
|
+
self._clickStore = null
|
|
577
|
+
}
|
|
578
|
+
// 发送双击事件
|
|
579
|
+
self.fire(
|
|
580
|
+
ViewEventType.doubleClick,
|
|
581
|
+
MapViewUtil.getMouseEvent(event, self)
|
|
582
|
+
)
|
|
583
|
+
})
|
|
584
|
+
|
|
585
|
+
// 注册鼠标按下事件
|
|
586
|
+
this._innerView.on('mousedown', (event) => {
|
|
587
|
+
// 发送鼠标按下事件
|
|
588
|
+
self.fire(
|
|
589
|
+
ViewEventType.pointerDown,
|
|
590
|
+
MapViewUtil.getMouseEvent(event, self)
|
|
591
|
+
)
|
|
592
|
+
// 发送鼠标拖拽开始事件
|
|
593
|
+
if (!this._dragParams.isDrag) {
|
|
594
|
+
this._dragParams.origin = {
|
|
595
|
+
x: event.originalEvent.layerX,
|
|
596
|
+
y: event.originalEvent.layerY
|
|
597
|
+
}
|
|
598
|
+
this._dragParams.button = event.originalEvent.button
|
|
599
|
+
this._dragParams.action = 'mouse-down'
|
|
600
|
+
this._dragParams.isDrag = false
|
|
601
|
+
}
|
|
602
|
+
})
|
|
603
|
+
|
|
604
|
+
// 注册鼠标抬起事件
|
|
605
|
+
this._innerView.on('mouseup', (event) => {
|
|
606
|
+
// 发送鼠标抬起事件
|
|
607
|
+
self.fire(ViewEventType.pointerUp, MapViewUtil.getMouseEvent(event, self))
|
|
608
|
+
// 发送鼠标拖拽结束事件
|
|
609
|
+
if (self._dragParams.isDrag && this._dragParams.action === 'update') {
|
|
610
|
+
this._dragParams.action = 'end'
|
|
611
|
+
self.fire(
|
|
612
|
+
ViewEventType.drag,
|
|
613
|
+
MapViewUtil.getDragEvent(
|
|
614
|
+
event,
|
|
615
|
+
self,
|
|
616
|
+
self._dragParams.origin,
|
|
617
|
+
this._dragParams.action
|
|
618
|
+
)
|
|
619
|
+
)
|
|
620
|
+
}
|
|
621
|
+
self._dragParams = {
|
|
622
|
+
isDrag: false,
|
|
623
|
+
origin: null,
|
|
624
|
+
action: '',
|
|
625
|
+
button: null
|
|
626
|
+
}
|
|
627
|
+
})
|
|
628
|
+
|
|
629
|
+
// 注册鼠标移动事件
|
|
630
|
+
this._innerView.on('mousemove', (event) => {
|
|
631
|
+
// 发送鼠标移动视图事件
|
|
632
|
+
self.fire(
|
|
633
|
+
ViewEventType.pointerMove,
|
|
634
|
+
MapViewUtil.getMouseEvent(event, self)
|
|
635
|
+
)
|
|
636
|
+
// console.log('self._dragParams.isDrag', self._dragParams.isDrag)
|
|
637
|
+
// 发送鼠标拖拽中事件
|
|
638
|
+
if (self._dragParams.isDrag) {
|
|
639
|
+
self.fire(
|
|
640
|
+
ViewEventType.drag,
|
|
641
|
+
MapViewUtil.getDragEvent(
|
|
642
|
+
event,
|
|
643
|
+
self,
|
|
644
|
+
self._dragParams.origin,
|
|
645
|
+
self._dragParams.action,
|
|
646
|
+
self._dragParams.button
|
|
647
|
+
)
|
|
648
|
+
)
|
|
649
|
+
self._dragParams.action = 'update'
|
|
650
|
+
} else if (this._dragParams.action === 'mouse-down') {
|
|
651
|
+
this._dragParams.action = 'start'
|
|
652
|
+
self._dragParams.isDrag = true
|
|
653
|
+
}
|
|
654
|
+
})
|
|
655
|
+
|
|
656
|
+
// 注册键盘按下事件
|
|
657
|
+
this._innerView.on('dragstart', (event) => {
|
|
658
|
+
// 发送鼠标拖拽开始事件
|
|
659
|
+
this._dragParams.origin = {
|
|
660
|
+
x: event.originalEvent.layerX,
|
|
661
|
+
y: event.originalEvent.layerY
|
|
662
|
+
}
|
|
663
|
+
this._dragParams.action = 'start'
|
|
664
|
+
// 发送键盘按下事件
|
|
665
|
+
self.fire(
|
|
666
|
+
ViewEventType.drag,
|
|
667
|
+
MapViewUtil.getDragEvent(
|
|
668
|
+
event,
|
|
669
|
+
self,
|
|
670
|
+
this._dragParams.origin,
|
|
671
|
+
this._dragParams.action
|
|
672
|
+
)
|
|
673
|
+
)
|
|
674
|
+
})
|
|
675
|
+
|
|
676
|
+
this._innerView.on('drag', (event) => {
|
|
677
|
+
// 发送键盘按下事件
|
|
678
|
+
this._dragParams.action = 'update'
|
|
679
|
+
self.fire(
|
|
680
|
+
ViewEventType.drag,
|
|
681
|
+
MapViewUtil.getDragEvent(
|
|
682
|
+
event,
|
|
683
|
+
self,
|
|
684
|
+
this._dragParams.origin,
|
|
685
|
+
this._dragParams.action
|
|
686
|
+
)
|
|
687
|
+
)
|
|
688
|
+
})
|
|
689
|
+
|
|
690
|
+
this._innerView.on('dragend', (event) => {
|
|
691
|
+
// 发送键盘按下事件
|
|
692
|
+
this._dragParams.action = 'end'
|
|
693
|
+
self.fire(
|
|
694
|
+
ViewEventType.drag,
|
|
695
|
+
MapViewUtil.getDragEvent(
|
|
696
|
+
event,
|
|
697
|
+
self,
|
|
698
|
+
this._dragParams.origin,
|
|
699
|
+
this._dragParams.action
|
|
700
|
+
)
|
|
701
|
+
)
|
|
702
|
+
self._dragParams = {
|
|
703
|
+
origin: null,
|
|
704
|
+
action: '',
|
|
705
|
+
button: null
|
|
706
|
+
}
|
|
707
|
+
})
|
|
708
|
+
|
|
709
|
+
this._innerView.on('rotatestart', (event) => {
|
|
710
|
+
// 发送鼠标拖拽开始事件
|
|
711
|
+
this._dragParams.origin = {
|
|
712
|
+
x: event.originalEvent.layerX,
|
|
713
|
+
y: event.originalEvent.layerY
|
|
714
|
+
}
|
|
715
|
+
this._dragParams.action = 'start'
|
|
716
|
+
// 发送键盘按下事件
|
|
717
|
+
self.fire(
|
|
718
|
+
ViewEventType.drag,
|
|
719
|
+
MapViewUtil.getDragEvent(
|
|
720
|
+
event,
|
|
721
|
+
self,
|
|
722
|
+
this._dragParams.origin,
|
|
723
|
+
this._dragParams.action
|
|
724
|
+
)
|
|
725
|
+
)
|
|
726
|
+
})
|
|
727
|
+
|
|
728
|
+
this._innerView.on('rotate', (event) => {
|
|
729
|
+
// 发送键盘按下事件
|
|
730
|
+
this._dragParams.action = 'update'
|
|
731
|
+
self.fire(
|
|
732
|
+
ViewEventType.drag,
|
|
733
|
+
MapViewUtil.getDragEvent(
|
|
734
|
+
event,
|
|
735
|
+
self,
|
|
736
|
+
this._dragParams.origin,
|
|
737
|
+
this._dragParams.action
|
|
738
|
+
)
|
|
739
|
+
)
|
|
740
|
+
})
|
|
741
|
+
|
|
742
|
+
this._innerView.on('rotateend', (event) => {
|
|
743
|
+
// 发送键盘按下事件
|
|
744
|
+
this._dragParams.action = 'end'
|
|
745
|
+
self.fire(
|
|
746
|
+
ViewEventType.drag,
|
|
747
|
+
MapViewUtil.getDragEvent(
|
|
748
|
+
event,
|
|
749
|
+
self,
|
|
750
|
+
this._dragParams.origin,
|
|
751
|
+
this._dragParams.action
|
|
752
|
+
)
|
|
753
|
+
)
|
|
754
|
+
self._dragParams = {
|
|
755
|
+
origin: null,
|
|
756
|
+
action: '',
|
|
757
|
+
button: null
|
|
758
|
+
}
|
|
759
|
+
})
|
|
760
|
+
|
|
761
|
+
// 注册视图开始改变事件
|
|
762
|
+
this._innerView.on('movestart', () => {
|
|
763
|
+
self.stationary = false
|
|
764
|
+
})
|
|
765
|
+
|
|
766
|
+
// 注册zoom变化事件
|
|
767
|
+
this._innerView.on('zoom', (event) => {
|
|
768
|
+
self._map.layers.forEach(function (layer) {
|
|
769
|
+
switch (layer.type) {
|
|
770
|
+
case LayerType.igsFeature:
|
|
771
|
+
case LayerType.graphics:
|
|
772
|
+
// showLayerByScale(self, layer)
|
|
773
|
+
break
|
|
774
|
+
default:
|
|
775
|
+
break
|
|
776
|
+
}
|
|
777
|
+
})
|
|
778
|
+
// 发送zoom变化事件
|
|
779
|
+
self.fire(ViewEventType.zoom, {
|
|
780
|
+
zoom: event.target._zoom,
|
|
781
|
+
event
|
|
782
|
+
})
|
|
783
|
+
})
|
|
784
|
+
// 注册zoom end事件
|
|
785
|
+
this._innerView.on('zoomend', (event) => {
|
|
786
|
+
// 更新地图视野范围,比例尺
|
|
787
|
+
self._zoomEndHandler()
|
|
788
|
+
// 发送地图视图改变事件
|
|
789
|
+
self.fire(
|
|
790
|
+
ViewEventType.viewChange,
|
|
791
|
+
MapViewUtil.getViewChangeEvent(event, self)
|
|
792
|
+
)
|
|
793
|
+
})
|
|
794
|
+
|
|
795
|
+
// 注册地图移动完成事件
|
|
796
|
+
this._innerView.on('moveend', (event) => {
|
|
797
|
+
// 更新地图视中心
|
|
798
|
+
self._moveEndHandler()
|
|
799
|
+
// 发送地图视图改变事件
|
|
800
|
+
self.fire(
|
|
801
|
+
ViewEventType.viewChange,
|
|
802
|
+
MapViewUtil.getViewChangeEvent(event, self)
|
|
803
|
+
)
|
|
804
|
+
// self.fire(ViewEventType.mapMove, event)
|
|
805
|
+
self.stationary = true
|
|
806
|
+
})
|
|
807
|
+
|
|
808
|
+
// 注册地图大小变化事件
|
|
809
|
+
this._innerView.on('resize', () => {
|
|
810
|
+
const oldWidth = Number(self.width)
|
|
811
|
+
const oldHeight = Number(self.height)
|
|
812
|
+
// 更新地图窗口宽高
|
|
813
|
+
self._initSize()
|
|
814
|
+
// 发送地图初始化后触发的事件
|
|
815
|
+
self.fire(ViewEventType.resize, {
|
|
816
|
+
oldWidth,
|
|
817
|
+
oldHeight,
|
|
818
|
+
width: self.width,
|
|
819
|
+
height: self.height
|
|
820
|
+
})
|
|
821
|
+
})
|
|
822
|
+
// 注册监控键盘事件
|
|
823
|
+
this._listenKey()
|
|
824
|
+
}
|
|
825
|
+
|
|
826
|
+
/**
|
|
827
|
+
* 设置(鼠标)操作地图事件是否可用
|
|
828
|
+
* @private
|
|
829
|
+
* @param {String} actionType 操作类型
|
|
830
|
+
* @param {Boolean} isEnable 是否可用
|
|
831
|
+
* */
|
|
832
|
+
_mapActionControl(actionType, isEnable) {
|
|
833
|
+
if (!this._innerView) return
|
|
834
|
+
if (actionType === 'drag-pan') {
|
|
835
|
+
// 左键拖拽地图
|
|
836
|
+
if (isEnable) {
|
|
837
|
+
this._innerView.dragPan.enable()
|
|
838
|
+
} else {
|
|
839
|
+
this._innerView.dragPan.disable()
|
|
840
|
+
}
|
|
841
|
+
} else if (actionType === 'double-click-zoom') {
|
|
842
|
+
// 双击放大地图
|
|
843
|
+
if (isEnable) {
|
|
844
|
+
this._innerView.doubleClickZoom.enable()
|
|
845
|
+
} else {
|
|
846
|
+
this._innerView.doubleClickZoom.disable()
|
|
847
|
+
}
|
|
848
|
+
} else if (actionType === 'drag-rotate') {
|
|
849
|
+
// 右键旋转地图
|
|
850
|
+
if (isEnable) {
|
|
851
|
+
this._innerView.dragRotate.enable()
|
|
852
|
+
} else {
|
|
853
|
+
this._innerView.dragRotate.disable()
|
|
854
|
+
}
|
|
855
|
+
}
|
|
856
|
+
}
|
|
857
|
+
|
|
858
|
+
/**
|
|
859
|
+
* 注册监控键盘事件
|
|
860
|
+
* @private
|
|
861
|
+
* */
|
|
862
|
+
_listenKey() {
|
|
863
|
+
const self = this
|
|
864
|
+
const canvas = this._innerView._canvas
|
|
865
|
+
canvas.setAttribute('tabIndex', '-1')
|
|
866
|
+
canvas.onclick = () => {
|
|
867
|
+
canvas.focus()
|
|
868
|
+
}
|
|
869
|
+
canvas.addEventListener('keydown', (event) => {
|
|
870
|
+
self.fire(ViewEventType.keyDown, MapViewUtil.getKeyEvent(event, self))
|
|
871
|
+
})
|
|
872
|
+
canvas.addEventListener('keyup', (event) => {
|
|
873
|
+
self.fire(ViewEventType.keyUp, MapViewUtil.getKeyEvent(event, self))
|
|
874
|
+
})
|
|
875
|
+
}
|
|
876
|
+
|
|
877
|
+
/**
|
|
878
|
+
* @description 初始化获取视图尺寸大小
|
|
879
|
+
* @private
|
|
880
|
+
*/
|
|
881
|
+
_initSize() {
|
|
882
|
+
// const container = this._innerView.getContainer()
|
|
883
|
+
// this.width = container.offsetWidth
|
|
884
|
+
// this.height = container.offsetHeight
|
|
885
|
+
const canvas = this._innerView.getCanvas()
|
|
886
|
+
const width = canvas.style ? canvas.style.width : canvas.width
|
|
887
|
+
const height = canvas.style ? canvas.style.height : canvas.height
|
|
888
|
+
this.width = Number(width.toString().replace('px', ''))
|
|
889
|
+
this.height = Number(height.toString().replace('px', ''))
|
|
890
|
+
}
|
|
891
|
+
|
|
892
|
+
/**
|
|
893
|
+
* zoom end事件处理器
|
|
894
|
+
* @private
|
|
895
|
+
* */
|
|
896
|
+
_zoomEndHandler() {
|
|
897
|
+
// 更新地图视野范围
|
|
898
|
+
this.getExtent()
|
|
899
|
+
// 更新地图层级
|
|
900
|
+
this.getZoom()
|
|
901
|
+
// 更新地图比例尺
|
|
902
|
+
this.getScale()
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
/**
|
|
906
|
+
* @description 获取当前视图容器的宽高,单位像素<a id='getSize'></a>
|
|
907
|
+
* @return {Object} 当前视图容器的宽高对象
|
|
908
|
+
* */
|
|
909
|
+
getSize() {
|
|
910
|
+
return { width: this.width, height: this.height }
|
|
911
|
+
}
|
|
912
|
+
|
|
913
|
+
_moveEndHandler() {
|
|
914
|
+
// 更新地图视野中心
|
|
915
|
+
this.getCenter()
|
|
916
|
+
// 更新地图视野范围
|
|
917
|
+
this.getExtent()
|
|
918
|
+
}
|
|
919
|
+
|
|
920
|
+
// 创建layerView对象
|
|
921
|
+
_createLayerViewObj(layer) {
|
|
922
|
+
return getLayerView(this, layer)
|
|
923
|
+
}
|
|
924
|
+
|
|
925
|
+
/**
|
|
926
|
+
* 初始化弹窗
|
|
927
|
+
* @private
|
|
928
|
+
* */
|
|
929
|
+
_initPopup() {
|
|
930
|
+
this.popup = new Popup({ view: this })
|
|
931
|
+
}
|
|
932
|
+
|
|
933
|
+
/**
|
|
934
|
+
* <a id='hitTest'></a>
|
|
935
|
+
* @description 穿透检测,图元拾取。目前支持graphic类型拾取结果,支持图层类型GraphicLayer,FeatureLayer。
|
|
936
|
+
* @param {Object} screenPoint 屏幕像素坐标点,例如{ x: 900, y: 500 }
|
|
937
|
+
* @return {Array} 图元检测结果
|
|
938
|
+
* @example <caption><h7>根据基础图层对象或者图层id查询并返回实际图层</h7></caption>
|
|
939
|
+
* // ES6引入方式
|
|
940
|
+
* import { MapView } from "@mapgis/webclient-mapboxgl-plugin";
|
|
941
|
+
* import { Map, Point, Polygon, MultiPolygon ,Extent, GraphicsLayer, Feature, Circle, IGSFeatureLayer, IGSTileLayer } from "@mapgis/webclient-common";
|
|
942
|
+
|
|
943
|
+
* // 初始化图层管理容器
|
|
944
|
+
* const map = new Map();
|
|
945
|
+
* // 初始化地图视图对象
|
|
946
|
+
* this.mapView = new MapView({
|
|
947
|
+
* // 视图id
|
|
948
|
+
* viewId: "mapgis-2d-viewer",
|
|
949
|
+
* // 图层管理容器
|
|
950
|
+
* map: map,
|
|
951
|
+
* })
|
|
952
|
+
* // 创建一个要素crs
|
|
953
|
+
* const feature = [
|
|
954
|
+
* new Feature({
|
|
955
|
+
* id: '11113',
|
|
956
|
+
* geometry: new Circle({
|
|
957
|
+
* center: [113, 35],
|
|
958
|
+
* radius: 10000,
|
|
959
|
+
* radiusUnit: 'kilometers',
|
|
960
|
+
* })
|
|
961
|
+
* }),
|
|
962
|
+
* new Feature({
|
|
963
|
+
* id: '11114',
|
|
964
|
+
* geometry: new Polygon({
|
|
965
|
+
* coordinates: [
|
|
966
|
+
* // 外圈
|
|
967
|
+
* [
|
|
968
|
+
* [113.0, 29.0],
|
|
969
|
+
* [116.0, 29.0],
|
|
970
|
+
* [116.0, 35.0],
|
|
971
|
+
* [113.0, 35.0],
|
|
972
|
+
* [113.0, 29.0]
|
|
973
|
+
* ]
|
|
974
|
+
* ]
|
|
975
|
+
* })
|
|
976
|
+
* }),
|
|
977
|
+
* new Feature({
|
|
978
|
+
* id: '11115',
|
|
979
|
+
* geometry:new MultiPolygon({
|
|
980
|
+
* coordinates: [
|
|
981
|
+
* [
|
|
982
|
+
* // 外圈
|
|
983
|
+
* [
|
|
984
|
+
* [112.0, 28.0],
|
|
985
|
+
* [115.0, 28.0],
|
|
986
|
+
* [115.0, 30.0],
|
|
987
|
+
* [112.0, 30.0],
|
|
988
|
+
* [112.0, 28.0]
|
|
989
|
+
* ],
|
|
990
|
+
* // 第一个内圈
|
|
991
|
+
* [
|
|
992
|
+
* [112.2, 28.2],
|
|
993
|
+
* [112.2, 29.8],
|
|
994
|
+
* [114.8, 29.8],
|
|
995
|
+
* [114.8, 28.2],
|
|
996
|
+
* [112.2, 28.2]
|
|
997
|
+
* ]
|
|
998
|
+
* ]
|
|
999
|
+
* ]
|
|
1000
|
+
* })
|
|
1001
|
+
* })
|
|
1002
|
+
* ]
|
|
1003
|
+
* // 初始化几何图层
|
|
1004
|
+
* const graphicsLayer = new GraphicsLayer({
|
|
1005
|
+
* graphics:feature
|
|
1006
|
+
* })
|
|
1007
|
+
* map.add(this.graphicsLayer)
|
|
1008
|
+
* const result = this.mapView.hitTest({x:1100,y:600})
|
|
1009
|
+
* */
|
|
1010
|
+
hitTest(screenPoint) {
|
|
1011
|
+
if (!this._innerView) return
|
|
1012
|
+
const hitTestResult = []
|
|
1013
|
+
const layerIds = this._getInnerStyleLayerIds()
|
|
1014
|
+
// 使用引擎queryRenderedFeatures查询到引擎要素对象
|
|
1015
|
+
const queryResult = this._innerView.queryRenderedFeatures(
|
|
1016
|
+
[screenPoint.x, screenPoint.y],
|
|
1017
|
+
{
|
|
1018
|
+
layers: layerIds
|
|
1019
|
+
}
|
|
1020
|
+
)
|
|
1021
|
+
queryResult.forEach((item) => {
|
|
1022
|
+
if (
|
|
1023
|
+
!item.properties ||
|
|
1024
|
+
item.properties.id === undefined ||
|
|
1025
|
+
!item.layer ||
|
|
1026
|
+
!item.layer.id
|
|
1027
|
+
) {
|
|
1028
|
+
return
|
|
1029
|
+
}
|
|
1030
|
+
// 从引擎要素对象上取到对应的公共层layerId、featureId
|
|
1031
|
+
const layerId = item.layer.id.split('_')[0]
|
|
1032
|
+
const featureId = item.properties.id
|
|
1033
|
+
// 获取layer对象和feature对象
|
|
1034
|
+
let layer = this.getLayer(layerId)
|
|
1035
|
+
if (!layer) {
|
|
1036
|
+
layer = this._graphicsLayers.find((layer) => layer.id === layerId)
|
|
1037
|
+
}
|
|
1038
|
+
let features = null
|
|
1039
|
+
if (
|
|
1040
|
+
layer.type === LayerType.igsFeature ||
|
|
1041
|
+
layer.type === LayerType.geojson
|
|
1042
|
+
) {
|
|
1043
|
+
const layerView = this._getLayerView(layer)
|
|
1044
|
+
if (layerView.featureSet && layerView.featureSet.features) {
|
|
1045
|
+
features = layerView.featureSet.features.filter((item) => {
|
|
1046
|
+
if (item.id === featureId) {
|
|
1047
|
+
return item
|
|
1048
|
+
}
|
|
1049
|
+
})
|
|
1050
|
+
}
|
|
1051
|
+
} else if (layer.type === LayerType.graphics) {
|
|
1052
|
+
if (layer.graphics) {
|
|
1053
|
+
const featureCollection = layer.graphics.filter((item) => {
|
|
1054
|
+
if (item.id === featureId) {
|
|
1055
|
+
return item
|
|
1056
|
+
}
|
|
1057
|
+
})
|
|
1058
|
+
features = featureCollection.items
|
|
1059
|
+
}
|
|
1060
|
+
}
|
|
1061
|
+
const feature = features && features.length > 0 ? features[0] : null
|
|
1062
|
+
const graphicHit = {
|
|
1063
|
+
graphic: feature,
|
|
1064
|
+
layer,
|
|
1065
|
+
mapPoint: this.toMap(screenPoint),
|
|
1066
|
+
type: 'graphic'
|
|
1067
|
+
}
|
|
1068
|
+
hitTestResult.push(graphicHit)
|
|
1069
|
+
})
|
|
1070
|
+
return hitTestResult
|
|
1071
|
+
}
|
|
1072
|
+
|
|
1073
|
+
// 获取mapbox内部的styleLayerId
|
|
1074
|
+
_getInnerStyleLayerIds() {
|
|
1075
|
+
let layerIds = []
|
|
1076
|
+
const layers = this._map.allLayers.items.concat(this._graphicsLayers.items)
|
|
1077
|
+
layers.forEach((layer) => {
|
|
1078
|
+
if (
|
|
1079
|
+
layer.type === LayerType.igsFeature ||
|
|
1080
|
+
layer.type === LayerType.geojson
|
|
1081
|
+
) {
|
|
1082
|
+
const innerLayerView = this._getLayerView(layer)
|
|
1083
|
+
if (innerLayerView) {
|
|
1084
|
+
layerIds = layerIds.concat(innerLayerView.layerIDs)
|
|
1085
|
+
}
|
|
1086
|
+
} else if (layer.type === LayerType.graphics) {
|
|
1087
|
+
const innerLayer = this.getInnerLayer(layer)
|
|
1088
|
+
if (innerLayer && innerLayer.getStyleLayerIds) {
|
|
1089
|
+
layerIds = layerIds.concat(innerLayer.getStyleLayerIds())
|
|
1090
|
+
}
|
|
1091
|
+
}
|
|
1092
|
+
})
|
|
1093
|
+
return layerIds
|
|
1094
|
+
}
|
|
1095
|
+
|
|
1096
|
+
toMap(screenPoint) {
|
|
1097
|
+
if (!screenPoint) return
|
|
1098
|
+
const latLngPoint = this._innerView.unproject([
|
|
1099
|
+
screenPoint.x,
|
|
1100
|
+
screenPoint.y
|
|
1101
|
+
])
|
|
1102
|
+
let geoPoint = new Point({
|
|
1103
|
+
coordinates: [latLngPoint.lng, latLngPoint.lat]
|
|
1104
|
+
})
|
|
1105
|
+
if (this._spatialReference && !this._spatialReference.isGeographic) {
|
|
1106
|
+
geoPoint = Projection.project(geoPoint, this._spatialReference)
|
|
1107
|
+
} else {
|
|
1108
|
+
geoPoint.spatialReference = this._spatialReference
|
|
1109
|
+
}
|
|
1110
|
+
return geoPoint
|
|
1111
|
+
}
|
|
1112
|
+
|
|
1113
|
+
toScreen(point) {
|
|
1114
|
+
let _point = Geometry.fromJSON(point)
|
|
1115
|
+
if (!_point.spatialReference.isGeographic) {
|
|
1116
|
+
_point = Projection.project(
|
|
1117
|
+
_point,
|
|
1118
|
+
new SpatialReference({
|
|
1119
|
+
wkid: 4326
|
|
1120
|
+
})
|
|
1121
|
+
)
|
|
1122
|
+
}
|
|
1123
|
+
const screenPoint = this._innerView.project([
|
|
1124
|
+
_point.coordinates[0],
|
|
1125
|
+
_point.coordinates[1]
|
|
1126
|
+
])
|
|
1127
|
+
return screenPoint
|
|
1128
|
+
}
|
|
1129
|
+
|
|
1130
|
+
/**
|
|
1131
|
+
* <a id='takeScreenshot'></a>
|
|
1132
|
+
* @description 屏幕快照
|
|
1133
|
+
* @param {Object} [options = {}] 屏幕快照配置配置
|
|
1134
|
+
* @param {PictureFormat} [options.format = PictureFormat.png] 照片格式,支持png,jpeg格式
|
|
1135
|
+
* @param {String} [options.filename = 'screenshotFile'] 下载文件名
|
|
1136
|
+
* @param {Number} [options.width = undefined] 图片宽度
|
|
1137
|
+
* @param {Number} [options.height = undefined] 图片高度
|
|
1138
|
+
* @param {Number} [options.x = undefined] 图片原点x
|
|
1139
|
+
* @param {Number} [options.y = undefined] 图片原点y
|
|
1140
|
+
* @param {Boolean} [options.isDownload = true] 是否下载图片
|
|
1141
|
+
* @return {Object} 屏幕快照 {dataUrl String },且浏览器会下载图片
|
|
1142
|
+
* @example <caption><h7>屏幕快照</h7></caption>
|
|
1143
|
+
* // ES5引入方式
|
|
1144
|
+
* const { Map, MapView } = Zondy
|
|
1145
|
+
* const { PictureFormat } = Zondy.Enum
|
|
1146
|
+
* // ES6引入方式
|
|
1147
|
+
* import { Map, MapView } from "@mapgis/webclient-mapboxgl-plugin"
|
|
1148
|
+
* import { PictureFormat } from "@mapgis/webclient-common"
|
|
1149
|
+
* // 初始化图层管理容器
|
|
1150
|
+
* const map = new Map();
|
|
1151
|
+
* // 初始化地图视图对象
|
|
1152
|
+
* const mapView = new MapView({
|
|
1153
|
+
* // 二维场景视图的容器(html的div标签)ID
|
|
1154
|
+
* viewId: "二维场景视图的容器的id",
|
|
1155
|
+
* // 图层管理容器
|
|
1156
|
+
* map: map
|
|
1157
|
+
* })
|
|
1158
|
+
* // 设置屏幕快照参数
|
|
1159
|
+
* const screenshotOptions: {
|
|
1160
|
+
* format: PictureFormat.png
|
|
1161
|
+
* }
|
|
1162
|
+
* // 开始屏幕快照
|
|
1163
|
+
* mapView.takeScreenshot(screenshotOptions).then((result) => {
|
|
1164
|
+
* // 获取base64格式的url字符串
|
|
1165
|
+
* console.log("dataUrl:", result.dataUrl)
|
|
1166
|
+
* })
|
|
1167
|
+
* */
|
|
1168
|
+
takeScreenshot(options) {
|
|
1169
|
+
options.view = this
|
|
1170
|
+
let screenshotResult = null
|
|
1171
|
+
if (!this._screenshot) {
|
|
1172
|
+
this._screenshot = new Screenshot(options)
|
|
1173
|
+
screenshotResult = this._screenshot._addView()
|
|
1174
|
+
} else {
|
|
1175
|
+
screenshotResult = this._screenshot._addView()
|
|
1176
|
+
}
|
|
1177
|
+
return screenshotResult
|
|
1178
|
+
}
|
|
1179
|
+
|
|
1180
|
+
flyTo(options, animateOptions = { animate: true }) {
|
|
1181
|
+
options = defaultValue(options, {})
|
|
1182
|
+
const zoom = defaultValue(options.zoom, 1)
|
|
1183
|
+
|
|
1184
|
+
// 获取center
|
|
1185
|
+
const center = this._getFlyToCenter(options)
|
|
1186
|
+
|
|
1187
|
+
// 获取extent
|
|
1188
|
+
const extent = this._getFlyToExtent(options)
|
|
1189
|
+
|
|
1190
|
+
if (this._innerView) {
|
|
1191
|
+
if (center) {
|
|
1192
|
+
this._innerView.flyTo({
|
|
1193
|
+
center: [center.coordinates[0], center.coordinates[1]],
|
|
1194
|
+
zoom
|
|
1195
|
+
})
|
|
1196
|
+
} else if (extent) {
|
|
1197
|
+
this._innerView.fitBounds(
|
|
1198
|
+
[
|
|
1199
|
+
[extent.xmin, extent.ymin], // 西南
|
|
1200
|
+
[extent.xmax, extent.ymax] // 东北
|
|
1201
|
+
],
|
|
1202
|
+
animateOptions
|
|
1203
|
+
)
|
|
1204
|
+
}
|
|
1205
|
+
}
|
|
1206
|
+
}
|
|
1207
|
+
|
|
1208
|
+
/**
|
|
1209
|
+
* 视点跳转为给定的目标<a id='goTo'></a>
|
|
1210
|
+
* @param goToTarget 跳转参数
|
|
1211
|
+
* @param {Point|Array} [goToTarget.center] 视图跳转中心点
|
|
1212
|
+
* @param {Number} [goToTarget.zoom] 视图跳转层级
|
|
1213
|
+
* @param {Number} [goToTarget.scale] 视图跳转比例尺
|
|
1214
|
+
* @param {Geometry|Array<Geometry>|Collection<Geometry>} [goToTarget.target] 按范围跳转
|
|
1215
|
+
* @param options 动画参数
|
|
1216
|
+
* @param {Boolean} [options.animate = true ] 新视图的过渡是否开启动画,默认开启动画
|
|
1217
|
+
* @param {Number} [options.duration = 200 ] 动画的持续时间,以毫秒为单位,默认200毫秒
|
|
1218
|
+
* @example <caption><h7>中心点跳转示例</h7></caption>
|
|
1219
|
+
* // ES5引入方式
|
|
1220
|
+
* const { Map, MapView } = Zondy
|
|
1221
|
+
* // ES6引入方式
|
|
1222
|
+
* import { Map, MapViewMapboxgl as MapView } from "@mapgis/webclient-leaflet-plugin"
|
|
1223
|
+
* // 初始化图层管理容器
|
|
1224
|
+
* map = new .Map();
|
|
1225
|
+
* // 初始化地图视图对象
|
|
1226
|
+
* mapView = new MapView({
|
|
1227
|
+
* // 视图id
|
|
1228
|
+
* viewId: "view-id",
|
|
1229
|
+
* // 图层管理容器
|
|
1230
|
+
* map: map
|
|
1231
|
+
* });
|
|
1232
|
+
* // 视点跳转
|
|
1233
|
+
* mapView.goTo({
|
|
1234
|
+
* // 跳转中心点
|
|
1235
|
+
* center: [115.47643872463577, 30.980700423496124],
|
|
1236
|
+
* // 地图层级
|
|
1237
|
+
* zoom: 8
|
|
1238
|
+
* });
|
|
1239
|
+
*
|
|
1240
|
+
* @example <caption><h7>按范围跳转示例</h7></caption>
|
|
1241
|
+
* // ES5引入方式
|
|
1242
|
+
* const { Map, MapView } = Zondy
|
|
1243
|
+
* const { Extent, Circle } = Zondy.Geometry
|
|
1244
|
+
* // ES6引入方式
|
|
1245
|
+
* import { Map, MapViewMapboxgl as MapView } from "@mapgis/webclient-leaflet-plugin"
|
|
1246
|
+
* // 初始化图层管理容器
|
|
1247
|
+
* map = new Map();
|
|
1248
|
+
* // 初始化地图视图对象
|
|
1249
|
+
* mapView = new MapView({
|
|
1250
|
+
* // 视图id
|
|
1251
|
+
* viewId: "view-id",
|
|
1252
|
+
* // 图层管理容器
|
|
1253
|
+
* map: map
|
|
1254
|
+
* });
|
|
1255
|
+
* const extent1 = new Extent({
|
|
1256
|
+
* xmin: 111.88463529230717,
|
|
1257
|
+
* ymin: 28.646934514163803,
|
|
1258
|
+
* xmax: 116.89989408129225,
|
|
1259
|
+
* ymax: 33.07991791253288,
|
|
1260
|
+
* })
|
|
1261
|
+
* const geometry2 = new Circle({
|
|
1262
|
+
* center: [111, 29],
|
|
1263
|
+
* radius: 100,
|
|
1264
|
+
* radiusUnit: "kilometers",
|
|
1265
|
+
* })
|
|
1266
|
+
* mapView
|
|
1267
|
+
* .goTo({
|
|
1268
|
+
* target: [extent1, geometry2],
|
|
1269
|
+
* })
|
|
1270
|
+
* .then(() => {
|
|
1271
|
+
* console.log("gotoExtent callback")
|
|
1272
|
+
* })
|
|
1273
|
+
*/
|
|
1274
|
+
goTo(goToTarget = {}, options = {}) {
|
|
1275
|
+
let center
|
|
1276
|
+
let zoom
|
|
1277
|
+
let resultPromise = new Promise((resolve) => {
|
|
1278
|
+
resolve()
|
|
1279
|
+
})
|
|
1280
|
+
if (this._innerView) {
|
|
1281
|
+
// 获取center,zoom
|
|
1282
|
+
if (
|
|
1283
|
+
!isNull(goToTarget.center) ||
|
|
1284
|
+
!isNull(goToTarget.zoom) ||
|
|
1285
|
+
!isNull(goToTarget.scale)
|
|
1286
|
+
) {
|
|
1287
|
+
if (!isNull(goToTarget.center)) {
|
|
1288
|
+
center = this._getFlyToCenter({ center: goToTarget.center })
|
|
1289
|
+
} else {
|
|
1290
|
+
center = this._center
|
|
1291
|
+
}
|
|
1292
|
+
// 同时设置scale和zoom时,scale优先于zoom
|
|
1293
|
+
if (!isNull(goToTarget.scale) && goToTarget.scale > 0) {
|
|
1294
|
+
zoom = this._getZoomByScale(goToTarget.scale)
|
|
1295
|
+
} else if (!isNull(goToTarget.zoom) && goToTarget.zoom > 0) {
|
|
1296
|
+
zoom = goToTarget.zoom
|
|
1297
|
+
} else {
|
|
1298
|
+
zoom = this._zoom
|
|
1299
|
+
}
|
|
1300
|
+
}
|
|
1301
|
+
// 几何对象 或 几何数组 或 几何集合collection的 extent
|
|
1302
|
+
let extent
|
|
1303
|
+
if (!isNull(goToTarget.target)) {
|
|
1304
|
+
const targetExtent = this._getTargetExtent(goToTarget.target)
|
|
1305
|
+
if (
|
|
1306
|
+
targetExtent.xmin !== targetExtent.xmax &&
|
|
1307
|
+
targetExtent.ymin !== targetExtent.ymax
|
|
1308
|
+
) {
|
|
1309
|
+
extent = targetExtent
|
|
1310
|
+
} else {
|
|
1311
|
+
center = this._getFlyToCenter({
|
|
1312
|
+
center: new Point({
|
|
1313
|
+
coordinates: [targetExtent.xmin, targetExtent.ymin]
|
|
1314
|
+
})
|
|
1315
|
+
})
|
|
1316
|
+
}
|
|
1317
|
+
}
|
|
1318
|
+
// 获取goto动画参数
|
|
1319
|
+
const animateOptions = { animate: true, duration: 200 }
|
|
1320
|
+
if (!isNull(options)) {
|
|
1321
|
+
if (!isNull(options.animate)) {
|
|
1322
|
+
animateOptions.animate = options.animate
|
|
1323
|
+
}
|
|
1324
|
+
if (!isNull(options.duration)) {
|
|
1325
|
+
animateOptions.duration = options.duration
|
|
1326
|
+
}
|
|
1327
|
+
}
|
|
1328
|
+
if (center) {
|
|
1329
|
+
// 中心点跳转
|
|
1330
|
+
let centerLat = center.coordinates[1]
|
|
1331
|
+
let centerLng = center.coordinates[0]
|
|
1332
|
+
// 如果中心点超过fullExtent,则取fullExtent中心为当前中心点
|
|
1333
|
+
if (this._fullExtent) {
|
|
1334
|
+
if (
|
|
1335
|
+
centerLat > this._fullExtent.ymax ||
|
|
1336
|
+
centerLat < this._fullExtent.ymin
|
|
1337
|
+
) {
|
|
1338
|
+
centerLat = (this._fullExtent.ymax + this._fullExtent.ymin) / 2
|
|
1339
|
+
}
|
|
1340
|
+
if (
|
|
1341
|
+
centerLng > this._fullExtent.xmax ||
|
|
1342
|
+
centerLng < this._fullExtent.xmin
|
|
1343
|
+
) {
|
|
1344
|
+
centerLng = (this._fullExtent.xmax + this._fullExtent.xmin) / 2
|
|
1345
|
+
}
|
|
1346
|
+
}
|
|
1347
|
+
if (isFinite(centerLat) && isFinite(centerLng)) {
|
|
1348
|
+
// 如果中心点坐标和层级与当前视图相同,则不跳转
|
|
1349
|
+
let isSame = false
|
|
1350
|
+
const viewCenter = this._innerView.getCenter()
|
|
1351
|
+
if (
|
|
1352
|
+
zoom === this._zoom &&
|
|
1353
|
+
centerLat === viewCenter.lat &&
|
|
1354
|
+
centerLng === viewCenter.lng
|
|
1355
|
+
) {
|
|
1356
|
+
isSame = true
|
|
1357
|
+
}
|
|
1358
|
+
if (!isSame) {
|
|
1359
|
+
const flyToOptions = {
|
|
1360
|
+
center: [center.coordinates[0], center.coordinates[1]],
|
|
1361
|
+
zoom
|
|
1362
|
+
}
|
|
1363
|
+
Object.assign(flyToOptions, animateOptions)
|
|
1364
|
+
resultPromise = new Promise((resolve) => {
|
|
1365
|
+
this._innerView.flyTo(flyToOptions)
|
|
1366
|
+
this._innerView.once('moveend', () => {
|
|
1367
|
+
resolve()
|
|
1368
|
+
})
|
|
1369
|
+
})
|
|
1370
|
+
}
|
|
1371
|
+
}
|
|
1372
|
+
} else if (extent) {
|
|
1373
|
+
// 范围跳转
|
|
1374
|
+
let xmin = extent.xmin
|
|
1375
|
+
let xmax = extent.xmax
|
|
1376
|
+
let ymin = extent.ymin
|
|
1377
|
+
let ymax = extent.ymax
|
|
1378
|
+
if (this._fullExtent) {
|
|
1379
|
+
if (xmin < this._fullExtent.xmin) {
|
|
1380
|
+
xmin = this._fullExtent.xmin
|
|
1381
|
+
}
|
|
1382
|
+
if (xmax > this._fullExtent.xmax) {
|
|
1383
|
+
xmax = this._fullExtent.xmax
|
|
1384
|
+
}
|
|
1385
|
+
if (ymin < this._fullExtent.ymin) {
|
|
1386
|
+
ymin = this._fullExtent.ymin
|
|
1387
|
+
}
|
|
1388
|
+
if (ymax > this._fullExtent.ymax) {
|
|
1389
|
+
ymax = this._fullExtent.ymax
|
|
1390
|
+
}
|
|
1391
|
+
}
|
|
1392
|
+
if (
|
|
1393
|
+
isFinite(xmin) &&
|
|
1394
|
+
isFinite(xmax) &&
|
|
1395
|
+
isFinite(ymin) &&
|
|
1396
|
+
isFinite(ymax)
|
|
1397
|
+
) {
|
|
1398
|
+
// 如果extent与当前地图视图范围所在中心和层级不一致,则跳转
|
|
1399
|
+
// resultPromise = this._setViewExtent(extent, animateOptions)
|
|
1400
|
+
this._innerView.fitBounds(
|
|
1401
|
+
[
|
|
1402
|
+
[extent.xmin, extent.ymin], // 西南
|
|
1403
|
+
[extent.xmax, extent.ymax] // 东北
|
|
1404
|
+
],
|
|
1405
|
+
animateOptions
|
|
1406
|
+
)
|
|
1407
|
+
}
|
|
1408
|
+
}
|
|
1409
|
+
}
|
|
1410
|
+
return resultPromise
|
|
1411
|
+
}
|
|
1412
|
+
|
|
1413
|
+
/**
|
|
1414
|
+
* 获取当前视图的中心点(经纬度中心点)<a id='getCenter'></a>
|
|
1415
|
+
* @return {Object} 中心点对象
|
|
1416
|
+
* */
|
|
1417
|
+
getCenter() {
|
|
1418
|
+
const center = this._innerView.getCenter()
|
|
1419
|
+
let centerCrs = new Point({ coordinates: [center.lng, center.lat] })
|
|
1420
|
+
this._center = centerCrs
|
|
1421
|
+
const spatialReference = this._spatialReference
|
|
1422
|
+
if (!spatialReference.isGeographic) {
|
|
1423
|
+
centerCrs = Projection.project(centerCrs, spatialReference)
|
|
1424
|
+
}
|
|
1425
|
+
return centerCrs
|
|
1426
|
+
}
|
|
1427
|
+
|
|
1428
|
+
/**
|
|
1429
|
+
* <a id='setCenter'></a>
|
|
1430
|
+
* 设置缩视野中心<a id='setCenter'></a>
|
|
1431
|
+
* @private
|
|
1432
|
+
* @param {Point} value 视图中心
|
|
1433
|
+
* */
|
|
1434
|
+
setCenter(value) {
|
|
1435
|
+
if (!this._innerView) return
|
|
1436
|
+
if (Array.isArray(value) && value.length > 1) {
|
|
1437
|
+
this._center = new Point({
|
|
1438
|
+
coordinates: [value[0], value[1]],
|
|
1439
|
+
spatialReference: this._spatialReference
|
|
1440
|
+
})
|
|
1441
|
+
this.flyTo({ zoom: this._zoom, center: this._center })
|
|
1442
|
+
} else if (value instanceof Point) {
|
|
1443
|
+
this._center = value
|
|
1444
|
+
this.flyTo({ zoom: this._zoom, center: this._center })
|
|
1445
|
+
}
|
|
1446
|
+
}
|
|
1447
|
+
|
|
1448
|
+
/**
|
|
1449
|
+
* 获取当前缩放级数<a id='getZoom'></a>
|
|
1450
|
+
* @return {Number} 当前缩放级数
|
|
1451
|
+
* */
|
|
1452
|
+
getZoom() {
|
|
1453
|
+
this._zoom = this._innerView.getZoom()
|
|
1454
|
+
return this._zoom
|
|
1455
|
+
}
|
|
1456
|
+
|
|
1457
|
+
/**
|
|
1458
|
+
* <a id='setZoom'></a>
|
|
1459
|
+
* 设置缩放级数
|
|
1460
|
+
* @private
|
|
1461
|
+
* @param {Number} value 视图层级
|
|
1462
|
+
* */
|
|
1463
|
+
setZoom(value) {
|
|
1464
|
+
if (!this._innerView) return
|
|
1465
|
+
|
|
1466
|
+
this._zoom = value
|
|
1467
|
+
this.flyTo({ zoom: value, center: this._center })
|
|
1468
|
+
}
|
|
1469
|
+
|
|
1470
|
+
/**
|
|
1471
|
+
* 获取当前视图的地理范围<a id='getExtent'></a>
|
|
1472
|
+
* @return {Extent} 获取当前视图的地理范围
|
|
1473
|
+
* */
|
|
1474
|
+
getExtent() {
|
|
1475
|
+
if (!this._innerView) return
|
|
1476
|
+
const latLngBounds = this._innerView.getBounds()
|
|
1477
|
+
if (!latLngBounds || !latLngBounds._sw || !latLngBounds._ne) return
|
|
1478
|
+
let extent = new Extent({
|
|
1479
|
+
xmin: latLngBounds._sw.lng,
|
|
1480
|
+
ymin: latLngBounds._sw.lat,
|
|
1481
|
+
xmax: latLngBounds._ne.lng,
|
|
1482
|
+
ymax: latLngBounds._ne.lat
|
|
1483
|
+
})
|
|
1484
|
+
const spatialReference = this._spatialReference
|
|
1485
|
+
if (!spatialReference.isGeographic) {
|
|
1486
|
+
extent = Projection.project(extent, spatialReference)
|
|
1487
|
+
}
|
|
1488
|
+
this._extent = extent
|
|
1489
|
+
return extent
|
|
1490
|
+
}
|
|
1491
|
+
|
|
1492
|
+
/**
|
|
1493
|
+
* <a id='setExtent'></a>
|
|
1494
|
+
* 设置视野范围
|
|
1495
|
+
* @private
|
|
1496
|
+
* @param {Extent} value 范围对象
|
|
1497
|
+
* */
|
|
1498
|
+
setExtent(value) {
|
|
1499
|
+
if (!this._innerView) return
|
|
1500
|
+
this._extent = value
|
|
1501
|
+
this.flyTo({ extent: value })
|
|
1502
|
+
}
|
|
1503
|
+
|
|
1504
|
+
/**
|
|
1505
|
+
* <a id='getScale'></a>
|
|
1506
|
+
* 获取当前比例尺
|
|
1507
|
+
* @return {Number} 比例尺 实际10000米:地图1米
|
|
1508
|
+
* */
|
|
1509
|
+
getScale() {
|
|
1510
|
+
const scale = this._getScaleByZoom(this._zoom)
|
|
1511
|
+
this._scale = scale
|
|
1512
|
+
return scale
|
|
1513
|
+
}
|
|
1514
|
+
|
|
1515
|
+
/**
|
|
1516
|
+
* 根据层级获取比例尺
|
|
1517
|
+
* @private
|
|
1518
|
+
* @param {Number} zoom 层级
|
|
1519
|
+
* @return {Number} 比例尺
|
|
1520
|
+
* */
|
|
1521
|
+
_getScaleByZoom(zoom) {
|
|
1522
|
+
let scale
|
|
1523
|
+
if (this.crs && this.crs.options && this.crs.options.lods) {
|
|
1524
|
+
if (!isNull(zoom)) {
|
|
1525
|
+
if (zoom % 1 === 0) {
|
|
1526
|
+
const lod = this.crs.options.lods[zoom]
|
|
1527
|
+
scale = lod.scale
|
|
1528
|
+
} else {
|
|
1529
|
+
const floorZoom = Math.floor(zoom)
|
|
1530
|
+
const ceilZoom = Math.ceil(zoom)
|
|
1531
|
+
const floorLod = this.crs.options.lods[floorZoom]
|
|
1532
|
+
const ceilLod = this.crs.options.lods[ceilZoom]
|
|
1533
|
+
if (floorLod === undefined && ceilLod === undefined) {
|
|
1534
|
+
scale = 0
|
|
1535
|
+
} else if (floorLod === undefined) {
|
|
1536
|
+
scale = ceilLod.scale
|
|
1537
|
+
} else if (ceilLod === undefined) {
|
|
1538
|
+
scale = floorLod.scale
|
|
1539
|
+
} else {
|
|
1540
|
+
scale =
|
|
1541
|
+
floorLod.scale -
|
|
1542
|
+
(floorLod.scale - ceilLod.scale) * (zoom - floorZoom)
|
|
1543
|
+
}
|
|
1544
|
+
}
|
|
1545
|
+
}
|
|
1546
|
+
}
|
|
1547
|
+
return scale
|
|
1548
|
+
}
|
|
1549
|
+
|
|
1550
|
+
/**
|
|
1551
|
+
* 初始化地图视图比例尺
|
|
1552
|
+
* @private
|
|
1553
|
+
* */
|
|
1554
|
+
_initScale(value) {
|
|
1555
|
+
if (this._scale && this._scale > 0) {
|
|
1556
|
+
this._zoom = this._getZoomByScale(value)
|
|
1557
|
+
}
|
|
1558
|
+
}
|
|
1559
|
+
|
|
1560
|
+
/**
|
|
1561
|
+
* 根据比例尺获取层级
|
|
1562
|
+
* @private
|
|
1563
|
+
* @param {Number} value 比例尺
|
|
1564
|
+
* @return {Object} 比例尺层级与层级对应的比例尺
|
|
1565
|
+
* */
|
|
1566
|
+
_getZoomByScale(value) {
|
|
1567
|
+
let zoom = undefined
|
|
1568
|
+
if (this.crs && this.crs.options && this.crs.options.lods) {
|
|
1569
|
+
let validScaleIndex = -1
|
|
1570
|
+
for (let i = 0; i < this.crs.options.lods.length; i++) {
|
|
1571
|
+
const item = this.crs.options.lods[i]
|
|
1572
|
+
const lastItem = this.crs.options.lods[i - 1]
|
|
1573
|
+
if (item.scale <= 0) {
|
|
1574
|
+
break
|
|
1575
|
+
} else if (validScaleIndex < 0) {
|
|
1576
|
+
validScaleIndex = i
|
|
1577
|
+
}
|
|
1578
|
+
if (i === validScaleIndex) {
|
|
1579
|
+
if (item.scale > 0 && value >= item.scale) {
|
|
1580
|
+
zoom = item.level
|
|
1581
|
+
break
|
|
1582
|
+
}
|
|
1583
|
+
} else if (
|
|
1584
|
+
value >= item.scale &&
|
|
1585
|
+
value <= lastItem.scale &&
|
|
1586
|
+
lastItem.scale !== item.scale
|
|
1587
|
+
) {
|
|
1588
|
+
zoom =
|
|
1589
|
+
item.level - (value - item.scale) / (lastItem.scale - item.scale)
|
|
1590
|
+
break
|
|
1591
|
+
} else if (i === this.crs.options.lods.length - 1) {
|
|
1592
|
+
if (item.scale > 0 && value <= item.scale) {
|
|
1593
|
+
zoom = item.level
|
|
1594
|
+
break
|
|
1595
|
+
}
|
|
1596
|
+
}
|
|
1597
|
+
}
|
|
1598
|
+
}
|
|
1599
|
+
return zoom
|
|
1600
|
+
}
|
|
1601
|
+
|
|
1602
|
+
/**
|
|
1603
|
+
* <a id='setScale'></a>
|
|
1604
|
+
* 设置当前比例尺
|
|
1605
|
+
* @private
|
|
1606
|
+
* @param {Number} value 比例尺 实际10000米:地图1米
|
|
1607
|
+
* */
|
|
1608
|
+
setScale(value) {
|
|
1609
|
+
if (!this._innerView) return
|
|
1610
|
+
const zoom = this._getZoomByScale(value)
|
|
1611
|
+
// 视图定位
|
|
1612
|
+
if (zoom) {
|
|
1613
|
+
this.flyTo({ center: this._center, zoom })
|
|
1614
|
+
}
|
|
1615
|
+
}
|
|
1616
|
+
|
|
1617
|
+
// 根据地图范围得到最大限度视图范围
|
|
1618
|
+
_getMaxBounds() {
|
|
1619
|
+
if (this._fullExtent) {
|
|
1620
|
+
return [
|
|
1621
|
+
[this._fullExtent.xmin, this._fullExtent.ymin],
|
|
1622
|
+
[this._fullExtent.xmax, this._fullExtent.ymax]
|
|
1623
|
+
]
|
|
1624
|
+
} else {
|
|
1625
|
+
return []
|
|
1626
|
+
}
|
|
1627
|
+
}
|
|
1628
|
+
|
|
1629
|
+
/**
|
|
1630
|
+
* @description 比较两个crs对象是否相等
|
|
1631
|
+
* @private
|
|
1632
|
+
* @param {CRS} crs1 作比较的第一个CRS对象
|
|
1633
|
+
* @param {CRS} crs2 作比较的第二个CRS对象
|
|
1634
|
+
* @return {Boolean} crs对象是否相等
|
|
1635
|
+
* */
|
|
1636
|
+
_isEqualCrs(crs1, crs2) {
|
|
1637
|
+
let isEqual = true
|
|
1638
|
+
if (crs1 && crs2) {
|
|
1639
|
+
// 比较被设置的新Crs和当前this.crs是否相同。
|
|
1640
|
+
// 判断标准 crs.option的resolutions,origin,bounds是否相等,以及crs.epsgCode相等
|
|
1641
|
+
let crs1Info
|
|
1642
|
+
if (crs1.epsgCode.split(':').length > 1) {
|
|
1643
|
+
crs1Info = {
|
|
1644
|
+
wkid: crs1.epsgCode.split(':')[1]
|
|
1645
|
+
}
|
|
1646
|
+
} else {
|
|
1647
|
+
crs1Info = {
|
|
1648
|
+
wkid: this.crs.epsgCode
|
|
1649
|
+
}
|
|
1650
|
+
}
|
|
1651
|
+
let crs2Info
|
|
1652
|
+
if (crs2.epsgCode.split(':').length > 1) {
|
|
1653
|
+
crs2Info = {
|
|
1654
|
+
wkid: crs2.epsgCode.split(':')[1]
|
|
1655
|
+
}
|
|
1656
|
+
} else {
|
|
1657
|
+
crs2Info = {
|
|
1658
|
+
wkid: crs2.epsgCode
|
|
1659
|
+
}
|
|
1660
|
+
}
|
|
1661
|
+
|
|
1662
|
+
let isEqualSR
|
|
1663
|
+
if (crs2Info.wkid === undefined || crs1Info.wkid === undefined) {
|
|
1664
|
+
isEqualSR = TileInfoUtil.isSameSpatialReference(
|
|
1665
|
+
crs2Info.wkt,
|
|
1666
|
+
crs1Info.wkt
|
|
1667
|
+
)
|
|
1668
|
+
} else {
|
|
1669
|
+
isEqualSR = TileInfoUtil.isSameSpatialReference(
|
|
1670
|
+
crs2Info.wkid,
|
|
1671
|
+
crs1Info.wkid
|
|
1672
|
+
)
|
|
1673
|
+
}
|
|
1674
|
+
if (isEqualSR) {
|
|
1675
|
+
// ArcgisMapImage图层临时处理,服务数据extent有问题,暂为解决。4326、3857参考系构建对应的Leaflet参考系对象,
|
|
1676
|
+
// 因此没有options,不参与对比bounds、resolutions,暂时组织比较wkid
|
|
1677
|
+
// 问题解决后,统一比较 crs.options,该if条件可移除
|
|
1678
|
+
if (
|
|
1679
|
+
(crs2Info.wkid === '4326' || crs2Info.wkid === '3857') &&
|
|
1680
|
+
!crs2.options
|
|
1681
|
+
) {
|
|
1682
|
+
isEqual = true
|
|
1683
|
+
}
|
|
1684
|
+
if (crs2.options) {
|
|
1685
|
+
const newCrsOptions = crs2.options
|
|
1686
|
+
crs2Info.resolutions = newCrsOptions.resolutions
|
|
1687
|
+
crs2Info.origin = newCrsOptions.origin
|
|
1688
|
+
crs2Info.bounds = newCrsOptions.bounds
|
|
1689
|
+
crs1Info.resolutions = this.crs.options.resolutions
|
|
1690
|
+
crs1Info.origin = this.crs.options.origin
|
|
1691
|
+
crs1Info.bounds = this.crs.options.bounds
|
|
1692
|
+
if (
|
|
1693
|
+
JSON.stringify(crs2Info.resolutions) !==
|
|
1694
|
+
JSON.stringify(crs1Info.resolutions) ||
|
|
1695
|
+
JSON.stringify(crs2Info.origin) !==
|
|
1696
|
+
JSON.stringify(crs1Info.origin) ||
|
|
1697
|
+
!this._isEqualBounds(crs1Info.bounds, crs2Info.bounds)
|
|
1698
|
+
) {
|
|
1699
|
+
isEqual = false
|
|
1700
|
+
}
|
|
1701
|
+
}
|
|
1702
|
+
} else {
|
|
1703
|
+
isEqual = false
|
|
1704
|
+
}
|
|
1705
|
+
} else if ((!crs1 && crs2) || (crs1 && !crs2)) {
|
|
1706
|
+
isEqual = false
|
|
1707
|
+
}
|
|
1708
|
+
return isEqual
|
|
1709
|
+
}
|
|
1710
|
+
|
|
1711
|
+
/**
|
|
1712
|
+
* <a id='toJSON'></a>
|
|
1713
|
+
* 导出场景视图的配置文件
|
|
1714
|
+
* @return {Object} 导出的配置文件
|
|
1715
|
+
* */
|
|
1716
|
+
toJSON() {
|
|
1717
|
+
return {
|
|
1718
|
+
extent: toJSON(this._extent, Extent),
|
|
1719
|
+
center: toJSON(this._center, Point),
|
|
1720
|
+
map: toJSON(this._map, Map),
|
|
1721
|
+
viewId: this._viewId,
|
|
1722
|
+
width: this.width,
|
|
1723
|
+
height: this.height,
|
|
1724
|
+
zoom: this.zoom,
|
|
1725
|
+
scale: this.scale,
|
|
1726
|
+
maxScale: this.maxScale,
|
|
1727
|
+
minScale: this.minScale,
|
|
1728
|
+
spatialReferenceLocked: this.spatialReferenceLocked
|
|
1729
|
+
}
|
|
1730
|
+
}
|
|
1731
|
+
}
|
|
1732
|
+
|
|
1733
|
+
Object.defineProperties(MapView.prototype, {
|
|
1734
|
+
scale: {
|
|
1735
|
+
get() {
|
|
1736
|
+
return this._scale
|
|
1737
|
+
},
|
|
1738
|
+
set(value) {
|
|
1739
|
+
this.setScale(value)
|
|
1740
|
+
}
|
|
1741
|
+
},
|
|
1742
|
+
zoom: {
|
|
1743
|
+
get() {
|
|
1744
|
+
return this._zoom
|
|
1745
|
+
},
|
|
1746
|
+
set(value) {
|
|
1747
|
+
this.setZoom(value)
|
|
1748
|
+
}
|
|
1749
|
+
},
|
|
1750
|
+
extent: {
|
|
1751
|
+
get() {
|
|
1752
|
+
return this._extent
|
|
1753
|
+
},
|
|
1754
|
+
set(value) {
|
|
1755
|
+
this.setExtent(value)
|
|
1756
|
+
}
|
|
1757
|
+
},
|
|
1758
|
+
center: {
|
|
1759
|
+
get() {
|
|
1760
|
+
let center = this._center
|
|
1761
|
+
if (this._spatialReference) {
|
|
1762
|
+
if (!this.spatialReference.isGeographic) {
|
|
1763
|
+
center = Projection.project(this._center, this._spatialReference)
|
|
1764
|
+
}
|
|
1765
|
+
}
|
|
1766
|
+
return center
|
|
1767
|
+
},
|
|
1768
|
+
set(value) {
|
|
1769
|
+
this.setCenter(value)
|
|
1770
|
+
}
|
|
1771
|
+
},
|
|
1772
|
+
// fullExtent: {
|
|
1773
|
+
// get() {
|
|
1774
|
+
// if (!this._initFullExtent) {
|
|
1775
|
+
// this._fullExtent = this._mapExtent
|
|
1776
|
+
// } else {
|
|
1777
|
+
// this._fullExtent = this._initFullExtent
|
|
1778
|
+
// }
|
|
1779
|
+
// let fullExtent
|
|
1780
|
+
// if (this.spatialReference && this._fullExtent) {
|
|
1781
|
+
// if (!this.spatialReference.isGeographic) {
|
|
1782
|
+
// fullExtent = Projection.project(
|
|
1783
|
+
// this._fullExtent,
|
|
1784
|
+
// this.spatialReference
|
|
1785
|
+
// )
|
|
1786
|
+
// } else {
|
|
1787
|
+
// fullExtent = this._fullExtent
|
|
1788
|
+
// }
|
|
1789
|
+
// }
|
|
1790
|
+
// return fullExtent
|
|
1791
|
+
// },
|
|
1792
|
+
// set(value) {
|
|
1793
|
+
// let fullExtent
|
|
1794
|
+
// if (!value.spatialReference.isGeographic) {
|
|
1795
|
+
// fullExtent = Projection.project(
|
|
1796
|
+
// value,
|
|
1797
|
+
// new SpatialReference('EPSG:4326')
|
|
1798
|
+
// )
|
|
1799
|
+
// } else {
|
|
1800
|
+
// fullExtent = value
|
|
1801
|
+
// }
|
|
1802
|
+
// this._fullExtent = fullExtent
|
|
1803
|
+
// this._initFullExtent = Extent.fromJSON(fullExtent.toJSON())
|
|
1804
|
+
// // Extent的改变引起Crs的改变
|
|
1805
|
+
// this.setCrs()
|
|
1806
|
+
// }
|
|
1807
|
+
// },
|
|
1808
|
+
spatialReference: {
|
|
1809
|
+
get() {
|
|
1810
|
+
return this._spatialReference
|
|
1811
|
+
},
|
|
1812
|
+
set(value) {
|
|
1813
|
+
// this._spatialReference = value
|
|
1814
|
+
}
|
|
1815
|
+
},
|
|
1816
|
+
rotation: {
|
|
1817
|
+
get() {
|
|
1818
|
+
return this._rotation
|
|
1819
|
+
},
|
|
1820
|
+
set(value) {
|
|
1821
|
+
// this._rotation = value
|
|
1822
|
+
// if (this._innerView) {
|
|
1823
|
+
// this._innerView.setBearing(value)
|
|
1824
|
+
// }
|
|
1825
|
+
}
|
|
1826
|
+
}
|
|
1827
|
+
})
|
|
1828
|
+
|
|
1829
|
+
/**
|
|
1830
|
+
* 通过一个配置生成一个场景视图对象
|
|
1831
|
+
* @param {Object} json 场景视图配置
|
|
1832
|
+
* @return {MapView}
|
|
1833
|
+
* */
|
|
1834
|
+
MapViewMapboxgl.fromJSON = function (json) {
|
|
1835
|
+
json = defaultValue(json, {})
|
|
1836
|
+
|
|
1837
|
+
return new MapViewMapboxgl(json)
|
|
1838
|
+
}
|
|
1839
|
+
|
|
1840
|
+
Zondy.MapViewMapboxgl = MapViewMapboxgl
|
|
1841
|
+
export default MapViewMapboxgl
|
|
1842
|
+
</code></pre>
|
|
1843
|
+
</article>
|
|
1844
|
+
</section>
|
|
1845
|
+
|
|
1846
|
+
|
|
1847
|
+
|
|
1848
|
+
|
|
1849
|
+
</div>
|
|
1850
|
+
|
|
1851
|
+
<footer class="footer">
|
|
1852
|
+
<div class="content has-text-centered">
|
|
1853
|
+
<p>文档生成<a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.11</a></p>
|
|
1854
|
+
<p class="sidebar-created-by">
|
|
1855
|
+
<a href="http://www.smaryun.com" target="_blank">司马云</a> <span>© 2023 云生态圈</span>
|
|
1856
|
+
<a href="http://192.168.82.89:8086/#/index" target="_blank">MapGIS Client for JavaScript</a>
|
|
1857
|
+
</p>
|
|
1858
|
+
</div>
|
|
1859
|
+
</footer>
|
|
1860
|
+
|
|
1861
|
+
</div>
|
|
1862
|
+
<div id="side-nav" class="side-nav">
|
|
1863
|
+
<div style="margin-bottom: 10px;">
|
|
1864
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#page-title">构造函数</a>
|
|
1865
|
+
</div>
|
|
1866
|
+
<div style="margin-bottom: 10px;">
|
|
1867
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#member">成员变量</a>
|
|
1868
|
+
</div>
|
|
1869
|
+
<div style="margin-bottom: 10px;">
|
|
1870
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#function">方法</a>
|
|
1871
|
+
</div>
|
|
1872
|
+
<div>
|
|
1873
|
+
<img style="vertical-align: middle;margin-right: 10px;width: 30px;" src="./styles/anchor.png"/><a href="#event">事件</a>
|
|
1874
|
+
</div>
|
|
1875
|
+
</div>
|
|
1876
|
+
</div>
|
|
1877
|
+
<script src="scripts/linenumber.js"> </script>
|
|
1878
|
+
|
|
1879
|
+
<script src="scripts/search.js"> </script>
|
|
1880
|
+
|
|
1881
|
+
</body>
|
|
1882
|
+
</html>
|