Repository navigation
Expand file tree
/
Copy pathImageMapLayer.js
More file actions
381 lines (354 loc) · 15.1 KB
/
Copy pathImageMapLayer.js
File metadata and controls
381 lines (354 loc) · 15.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
/* Copyright© 2000 - 2026 SuperMap Software Co.Ltd. All rights reserved.
* This program are made available under the terms of the Apache License, Version 2.0
* which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
import L, { Util, Layer, ImageOverlay } from 'leaflet';
import '../core/Base';
import { ServerGeometry } from '@supermapgis/iclient-common/iServer/ServerGeometry';
import { SecurityManager } from '@supermapgis/iclient-common/security/SecurityManager';
import { Util as CommonUtil } from '@supermapgis/iclient-common/commontypes/Util';
import Attributions from '../core/Attributions';
import { toSuperMapGeometry } from '../core/Util';
/**
* @class ImageMapLayer
* @deprecatedclassinstance L.supermap.imageMapLayer
* @classdesc SuperMap iServer 的 REST 地图服务的图层类(SuperMap iServer Java 6R 及以上分块动态 REST 图层)。使用 Image 资源出图。
* @category iServer Map Tile
* @modulecategory Mapping
* @extends {L.Layer}
* @example
* new ImageMapLayer(url).addTo(map);
* @param {string} url - 服务地址，如：http://{ip}:{port}/iserver/services/map-china400/rest/maps/China。
* @param {Object} options - 参数。
* @param {string} [options.layersID] - 获取需要切片的地图图层 ID，即指定需要切片的地图图层，可以是临时图层集，也可以是当前地图中图层的组合。
* @param {boolean} [options.redirect=false] - 是否重定向，如果为 true，则将请求重定向到瓦片的真实地址；如果为 false，则响应体中是瓦片的字节流。
* @param {boolean} [options.transparent=true] - 地图瓦片是否透明。
* @param {boolean} [options.cacheEnabled=true] - 是否启用缓存。
* @param {boolean} [options.clipRegionEnabled=false] - 是否启用地图裁剪。
* @param {L.Path} [options.clipRegion] - 地图显示裁剪的区域（区域为一个面对象）。当 clipRegionEnabled = true 时有效，即地图只显示该区域覆盖的部分。
* @param {Object} [options.prjCoordSys] - 请求的地图的坐标参考系统。如：prjCoordSys={"epsgCode":3857}。
* @param {boolean} [options.overlapDisplayed=false] - 地图对象在同一范围内，是否重叠显示。
* @param {string} [options.overlapDisplayedOptions] - 避免地图对象压盖显示的过滤选项，当 overlapDisplayed 为 false 时有效。在文本或专题图元素显示较密集的区域，文本之间或专题元素之间会发生相互压盖的现象， 此选项可以分别控制各种类型的对象的压盖显示情况，以处理地图中各种类型对象的压盖显示问题。
* @param {number} [options.opacity=1] - 图层不透明度。
* @param {string} [options.alt] - 图像无法显示时的提示文字。
* @param {string} [options.pane='tilePane'] - 图层所归属的 map DOM 的分组。
* @param {boolean} [options.interactive=false] - 是否响应鼠标点击或悬停等交互事件。
* @param {boolean} [options.crossOrigin=false] - 是否设置跨域属性。
* @param {string} [options.errorOverlayUrl] - 图层未能加载时显示的瓦片地址。
* @param {number} [options.zIndex=1] - 设置图层的层级。
* @param {string} [options.className] - 自定义 DOM 元素的 className。
* @param {number} [options.updateInterval=150] - 平移时图层延迟刷新间隔时间。
* @param {string} [options.tileProxy] - 服务代理地址。
* @param {string} [options.format='png'] - 瓦片表述类型，支持 "png" 、"webp"、"bmp" 、"jpg"、"gif" 等图片格式。
* @param {(NDVIParameter|HillshadeParameter)} [options.rasterfunction] - 栅格分析参数。支持归一化植被指数分析参数、山体阴影分析参数。
* @param {Object} [options.displayFilters] - 图层的显示过滤条件，利用该参数控制图层中可显示的要素。
* 参数结构：
* {
* "<layerName1>": "{displayFilter}",
* "<layerName2>": "{displayFilter}"
* }
* 其中，
* <layerName> 为地图中某图层名称，可从 layer 资源响应体参数 name 中获取；
* {displayFilter} 为属性过滤条件，仅对数据中存在的属性生效。
* 当前仅支持对工作空间数据源发布的地图进行属性过滤，支持对多图层同时过滤。
* @param {string} [options.attribution='Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' title='SuperMap iServer' target='_blank'>SuperMap iServer</a></span>'] - 版权描述信息。
* @fires ImageMapLayer#load
* @fires ImageMapLayer#error
* @fires ImageMapLayer#loading
* @usage
*/
export var ImageMapLayer = Layer.extend({
options: {
//如果有layersID，则是在使用专题图
layersID: null,
//如果为 true，则将请求重定向到图片的真实地址；如果为 false，则响应体中是图片的字节流
redirect: false,
//地图图片是否透明
transparent: true,
//是否启用服务器缓存
cacheEnabled: true,
//地图显示裁剪的区域是否有效
clipRegionEnabled: false,
//地图显示裁剪的区域
clipRegion: null,
//请求的地图的坐标参考系统。如：prjCoordSys= {"epsgCode":3857}。
prjCoordSys: null,
//地图对象在同一范围内，是否重叠显示
overlapDisplayed: false,
//避免地图对象压盖显示的过滤选项
overlapDisplayedOptions: null,
//图层不透明度
opacity: 1,
//图像无法显示时的提示文字
alt: '',
//图层所归属的map DOM的分组。默认为："tilePane"
pane: 'tilePane',
//是否响应鼠标点击或悬停交互事件
interactive: false,
//是否设置跨域属性
crossOrigin: false,
//图层未能加载时显示的瓦片地址
errorOverlayUrl: '',
//设置图层的显示层级
zIndex: 1,
//自定义的html class name
className: '',
//版权信息
attribution: Attributions.Common.attribution,
//平移时图层延迟刷新间隔时间。
updateInterval: 150,
//启用托管地址。
tileProxy: null,
format: 'png'
},
initialize: function(url, options) {
this._url = url;
Util.setOptions(this, options);
},
/**
* @private
* @function ImageMapLayer.prototype.onAdd
* @description 添加到地图。
* @param {L.Map} map - Leaflet Map 对象。
*/
onAdd: function(map) {
this.update = Util.throttle(this.update, this.options.updateInterval, this);
map.on('moveend', this.update, this);
if (this._currentImage && this._currentImage._bounds.equals(this._map.getBounds())) {
map.addLayer(this._currentImage);
} else if (this._currentImage) {
this._map.removeLayer(this._currentImage);
this._currentImage = null;
}
this.update();
},
/**
* @private
* @function ImageMapLayer.prototype.onRemove
* @description 从地图上移除。
*/
onRemove: function() {
// eslint-disable-line no-unused-vars
if (this._currentImage) {
this._map.removeLayer(this._currentImage);
}
this._map.off('moveend', this.update, this);
},
/**
* @function ImageMapLayer.prototype.bringToFront
* @description 置顶当前图层。
*/
bringToFront: function() {
this.options.position = 'front';
if (this._currentImage) {
this._currentImage.bringToFront();
}
return this;
},
/**
* @function ImageMapLayer.prototype.bringToBack
* @description 置底当前图层。
*/
bringToBack: function() {
this.options.position = 'back';
if (this._currentImage) {
this._currentImage.bringToBack();
}
return this;
},
/**
* @function ImageMapLayer.prototype.getOpacity
* @description 获取图层不透明度。
* @returns {number} 图层的不透明度。
*/
getOpacity: function() {
return this.options.opacity;
},
/**
* @function ImageMapLayer.prototype.setOpacity
* @description 设置图层不透明度。
*/
setOpacity: function(opacity) {
this.options.opacity = opacity;
if (this._currentImage) {
this._currentImage.setOpacity(opacity);
}
return this;
},
/**
* @function ImageMapLayer.prototype.getImageUrl
* @description 获取 image 图层请求地址，子类可重写实现。
* @returns {string} 请求瓦片地址。
*/
getImageUrl: function(params) {
let serviceUrl = CommonUtil.urlPathAppend(this._url, `image.${this.options.format}`);
let imageUrl =
serviceUrl + Util.getParamString(Object.assign({}, this._initAllRequestParams(), params), serviceUrl);
imageUrl = SecurityManager.appendCredential(imageUrl);
//支持代理
if (this.options.tileProxy) {
imageUrl = this.options.tileProxy + encodeURIComponent(imageUrl);
}
if (!this.options.cacheEnabled) {
imageUrl += '&_t=' + new Date().getTime();
}
return imageUrl;
},
//获取请求瓦片宽高以及请求范围参数
_getImageParams: function(bounds) {
var size = this._calculateImageSize(bounds);
return {
viewBounds: this._compriseBounds(this._calculateBounds(bounds)),
width: size.x,
height: size.y
};
},
//初始化服务请求参数
_initAllRequestParams: function() {
var me = this,
options = me.options || {},
params = {};
var redirect = options.redirect === true ? options.redirect : false;
params['redirect'] = redirect;
var transparent = options.transparent === true ? options.transparent : false;
params['transparent'] = transparent;
var cacheEnabled = options.cacheEnabled === false ? options.cacheEnabled : true;
params['cacheEnabled'] = cacheEnabled;
if (options.prjCoordSys) {
params['prjCoordSys'] = JSON.stringify(options.prjCoordSys);
}
if (options.layersID) {
params['layersID'] = options.layersID;
}
if (options.rasterfunction) {
params['rasterfunction'] = JSON.stringify(options.rasterfunction);
}
if (options.displayFilters) {
params['displayFilters'] = JSON.stringify(options.displayFilters);
}
if (options.clipRegionEnabled && options.clipRegion) {
params['clipRegionEnabled'] = options.clipRegionEnabled;
params['clipRegion'] = JSON.stringify(ServerGeometry.fromGeometry(toSuperMapGeometry(options.clipRegion)));
}
if (options.overlapDisplayed === false) {
params['overlapDisplayed'] = false;
if (options.overlapDisplayedOptions) {
params['overlapDisplayedOptions'] = me.overlapDisplayedOptions.toString();
}
} else {
params['overlapDisplayed'] = true;
}
return params;
},
//初始化请求链接
_requestImage: function(params, bounds) {
var imageUrl = this.getImageUrl(params);
this._loadImage(imageUrl, bounds);
},
//加载请求图层
_loadImage: function(url, bounds) {
if (!this._map) {
return;
}
if(this._currentImage) {
this._currentImage.setUrl(url);
}else{
this._currentImage = new ImageOverlay(url, bounds, {
opacity: this.options.opacity,
alt: this.options.alt,
zIndex: this.options.zIndex,
className: this.options.className,
errorOverlayUrl: this.options.error,
crossOrigin: this.options.crossOrigin,
pane: this.options.pane || this.getPane(),
interactive: this.options.interactive
}).addTo(this._map);
}
var onLoad = function() {
var map = this._map;
if (!map) {
return;
}
this._currentImage.setBounds(bounds);
/**
* @event ImageMapLayer#load
* @description 请求图层加载完成后触发。
* @property {L.Bounds} bounds - 图层 bounds。
*/
this.fire('load', { bounds: bounds });
};
var onError = function() {
this._map && this._map.removeLayer(this._currentImage);
/**
* @event ImageMapLayer#error
* @description 请求图层加载失败后触发。
*/
this.fire('error');
}
this._currentImage.off('load');
this._currentImage.once('load', onLoad, this);
this._currentImage.off('error');
this._currentImage.once('error', onError, this);
/**
* @event ImageMapLayer#loading
* @description 请求图层加载中触发。
* @property {L.Bounds} bounds - 图层 bounds。
*/
this.fire('loading', { bounds: bounds });
},
/**
* @function ImageMapLayer.prototype.update
* @description 更新图层。
*/
update: function() {
if (!this._map) {
return;
}
var zoom = this._map.getZoom();
var bounds = this._map.getBounds();
if (zoom > (this._map.options.maxZoom|| 18) || zoom < (this._map.options.minZoom || 0)) {
if (this._currentImage) {
this._currentImage._map.removeLayer(this._currentImage);
this._currentImage = null;
}
return;
}
var params = this._getImageParams(bounds);
if (params) {
this._requestImage(params, bounds);
} else if (this._currentImage) {
this._currentImage._map.removeLayer(this._currentImage);
this._currentImage = null;
}
},
//将像素坐标转成点坐标
_calculateBounds: function(bounds) {
var neProjected = this._map.options.crs.project(bounds.getNorthEast());
var swProjected = this._map.options.crs.project(bounds.getSouthWest());
return L.bounds(neProjected, swProjected);
},
//转换viewBounds为JSON字符串
_compriseBounds: function(boundsProjected) {
var projBounds = {
leftBottom: {
x: boundsProjected.getBottomLeft().x,
y: boundsProjected.getTopRight().y
},
rightTop: {
x: boundsProjected.getTopRight().x,
y: boundsProjected.getBottomLeft().y
}
};
return JSON.stringify(projBounds);
},
//计算图层的宽高
_calculateImageSize: function(bounds) {
// 与imageoverlay 内部逻辑一致
var sizeBounds = new L.Bounds(
this._map.latLngToLayerPoint(bounds.getNorthWest()),
this._map.latLngToLayerPoint(bounds.getSouthEast()));
return sizeBounds.getSize();
}
});
export var imageMapLayer = function(url, options) {
return new ImageMapLayer(url, options);
};