@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
package/overlay/EchartsLayer.js
DELETED
|
@@ -1,242 +0,0 @@
|
|
|
1
|
-
import mapboxgl from 'mapbox-gl';
|
|
2
|
-
import echarts from 'echarts';
|
|
3
|
-
|
|
4
|
-
import '../core/Base';
|
|
5
|
-
|
|
6
|
-
import {
|
|
7
|
-
MapCoordSys
|
|
8
|
-
} from './echarts/MapCoordSys';
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* leaflet的echars 4.0的实现
|
|
12
|
-
* @author 基础平台/创新中心 潘卓然 ParnDeedlit
|
|
13
|
-
* @class mapboxgl.zondy.EchartsLayer
|
|
14
|
-
* @classdesc 基于mapboxgl的Layer对象进行的拓展
|
|
15
|
-
* @param map - {Object} 传入的mapboxgl的地图对象
|
|
16
|
-
* @param options - {Object} echarts.options
|
|
17
|
-
*
|
|
18
|
-
* @see http://echarts.baidu.com/api.html#echarts
|
|
19
|
-
*/
|
|
20
|
-
export class EchartsLayer {
|
|
21
|
-
|
|
22
|
-
constructor(map, options) {
|
|
23
|
-
this.map = map;
|
|
24
|
-
this.options = options;
|
|
25
|
-
this.layerId = options.layerId || "echartlayerdefaultid";
|
|
26
|
-
this.layerClass = options.classId || "echartlayerdefaultclass";
|
|
27
|
-
|
|
28
|
-
this.initDevicePixelRatio();
|
|
29
|
-
|
|
30
|
-
this.mapContainer = map.getCanvasContainer();
|
|
31
|
-
this.canvas = this._createCanvas();
|
|
32
|
-
this.mapContainer.appendChild(this.canvas);
|
|
33
|
-
this.mapContainer.style.perspective = this.map.transform.cameraToCenterDistance + 'px';
|
|
34
|
-
this.chart = echarts.init(this.canvas);
|
|
35
|
-
|
|
36
|
-
this.initEcharts();
|
|
37
|
-
this._resizeCanvas();
|
|
38
|
-
|
|
39
|
-
return this;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
initDevicePixelRatio() {
|
|
43
|
-
this.devicePixelRatio = window.devicePixelRatio || 1;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
initEcharts() {
|
|
47
|
-
echarts.mapboxglMap = this.map;
|
|
48
|
-
|
|
49
|
-
echarts.registerCoordinateSystem('mapboxgl', MapCoordSys);
|
|
50
|
-
|
|
51
|
-
echarts.extendComponentModel({
|
|
52
|
-
type: 'mapboxgl',
|
|
53
|
-
getBMap: function () {
|
|
54
|
-
return this.__mapboxgl;
|
|
55
|
-
},
|
|
56
|
-
defaultOption: {
|
|
57
|
-
roam: false
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
echarts.registerAction({
|
|
62
|
-
type: 'MapboxGLRoma',
|
|
63
|
-
event: 'MapboxGLRoma',
|
|
64
|
-
update: 'updateLayout'
|
|
65
|
-
},
|
|
66
|
-
function (payload, ecModel) {
|
|
67
|
-
|
|
68
|
-
}
|
|
69
|
-
);
|
|
70
|
-
|
|
71
|
-
return this;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
_createCanvas() {
|
|
75
|
-
var canvas = document.createElement('div');
|
|
76
|
-
canvas.id = this.layerId;
|
|
77
|
-
canvas.style.position = 'absolute';
|
|
78
|
-
canvas.style.top = "0px";
|
|
79
|
-
canvas.style.left = "0px";
|
|
80
|
-
canvas.width = parseInt(this.map.getCanvas().style.width);
|
|
81
|
-
canvas.height = parseInt(this.map.getCanvas().style.height);
|
|
82
|
-
canvas.style.width = this.map.getCanvas().style.width;
|
|
83
|
-
canvas.style.height = this.map.getCanvas().style.height;
|
|
84
|
-
|
|
85
|
-
canvas.setAttribute('id', this.layerId);
|
|
86
|
-
canvas.setAttribute('class', this.layerClass);
|
|
87
|
-
|
|
88
|
-
//这段可以先不不放开
|
|
89
|
-
/* var devicePixelRatio = this.devicePixelRatio;
|
|
90
|
-
if (this.mapVOptions.context == '2d') {
|
|
91
|
-
canvas.getContext(this.mapVOptions.context).scale(devicePixelRatio, devicePixelRatio);
|
|
92
|
-
} */
|
|
93
|
-
return canvas;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
_resizeCanvas() {
|
|
97
|
-
const self = this;
|
|
98
|
-
|
|
99
|
-
window.onresize = function () {
|
|
100
|
-
var canvas = self.canvas;
|
|
101
|
-
var map = self.map;
|
|
102
|
-
|
|
103
|
-
canvas.style.position = 'absolute';
|
|
104
|
-
canvas.style.top = "0px";
|
|
105
|
-
canvas.style.left = "0px";
|
|
106
|
-
canvas.style.width = map.getCanvas().style.width;
|
|
107
|
-
canvas.style.height = map.getCanvas().style.height;
|
|
108
|
-
canvas.width = parseInt(map.getCanvas().style.width);
|
|
109
|
-
canvas.height = parseInt(map.getCanvas().style.height);
|
|
110
|
-
|
|
111
|
-
self.chart.resize();
|
|
112
|
-
};
|
|
113
|
-
|
|
114
|
-
//this.mapContainer.style.perspective = this.map.transform.cameraToCenterDistance + 'px';
|
|
115
|
-
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
addTo(map) {
|
|
119
|
-
echarts.extendComponentView({
|
|
120
|
-
type: 'mapboxgl',
|
|
121
|
-
|
|
122
|
-
render: function (mapModel, ecModel, api) {
|
|
123
|
-
var rendering = true
|
|
124
|
-
|
|
125
|
-
var mapboxglMap = echarts.mapboxglMap
|
|
126
|
-
|
|
127
|
-
var viewportRoot = api.getZr().painter.getViewportRoot()
|
|
128
|
-
var coordSys = mapModel.coordinateSystem
|
|
129
|
-
var moveHandler = function (type, target) {
|
|
130
|
-
if (rendering) {
|
|
131
|
-
return
|
|
132
|
-
}
|
|
133
|
-
// var offsetEl = viewportRoot.parentNode.parentNode.parentNode
|
|
134
|
-
var offsetEl = document.getElementsByClassName('mapboxgl-map')[0];
|
|
135
|
-
|
|
136
|
-
var mapOffset = [-parseInt(offsetEl.style.left, 10) || 0, -parseInt(offsetEl.style.top, 10) || 0]
|
|
137
|
-
viewportRoot.style.left = mapOffset[0] + 'px'
|
|
138
|
-
viewportRoot.style.top = mapOffset[1] + 'px'
|
|
139
|
-
|
|
140
|
-
coordSys.setMapOffset(mapOffset)
|
|
141
|
-
mapModel.__mapOffset = mapOffset
|
|
142
|
-
|
|
143
|
-
api.dispatchAction({
|
|
144
|
-
type: 'MapboxGLRoma'
|
|
145
|
-
})
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
function zoomEndHandler() {
|
|
149
|
-
if (rendering) {
|
|
150
|
-
return
|
|
151
|
-
}
|
|
152
|
-
api.dispatchAction({
|
|
153
|
-
type: 'MapboxGLRoma'
|
|
154
|
-
})
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
mapboxglMap.off('move', this._oldMoveHandler)
|
|
158
|
-
// FIXME
|
|
159
|
-
// Moveend may be triggered by centerAndZoom method when creating coordSys next time
|
|
160
|
-
// mapboxglMap.removeEventListener('moveend', this._oldMoveHandler)
|
|
161
|
-
mapboxglMap.off('zoomend', this._oldZoomEndHandler)
|
|
162
|
-
mapboxglMap.on('move', moveHandler)
|
|
163
|
-
// mapboxglMap.addEventListener('moveend', moveHandler)
|
|
164
|
-
mapboxglMap.on('zoomend', zoomEndHandler)
|
|
165
|
-
|
|
166
|
-
this._oldMoveHandler = moveHandler
|
|
167
|
-
this._oldZoomEndHandler = zoomEndHandler
|
|
168
|
-
|
|
169
|
-
var roam = mapModel.get('roam')
|
|
170
|
-
if (roam && roam !== 'scale') {
|
|
171
|
-
// todo 允许拖拽
|
|
172
|
-
} else {
|
|
173
|
-
// todo 不允许拖拽
|
|
174
|
-
}
|
|
175
|
-
if (roam && roam !== 'move') {
|
|
176
|
-
// todo 允许移动
|
|
177
|
-
} else {
|
|
178
|
-
// todo 不允许允许移动
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
rendering = false
|
|
182
|
-
}
|
|
183
|
-
});
|
|
184
|
-
|
|
185
|
-
this.chart.setOption(this.options);
|
|
186
|
-
return this;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
_visible() {
|
|
190
|
-
this.canvas.style.visibility = "visible";
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
_unvisible() {
|
|
194
|
-
this.canvas.style.visibility = "hidden";
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
/**
|
|
198
|
-
* 显示图层
|
|
199
|
-
* @function mapboxgl.zondy.EchartsLayer.prototype.show
|
|
200
|
-
*/
|
|
201
|
-
show() {
|
|
202
|
-
this._visible();
|
|
203
|
-
}
|
|
204
|
-
|
|
205
|
-
/**
|
|
206
|
-
* 隐藏图层
|
|
207
|
-
* @function mapboxgl.zondy.EchartsLayer.prototype.hide
|
|
208
|
-
*/
|
|
209
|
-
hide() {
|
|
210
|
-
this._unvisible();
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
/**
|
|
214
|
-
* 删除图层
|
|
215
|
-
* @function mapboxgl.zondy.EchartsLayer.prototype.remove
|
|
216
|
-
*/
|
|
217
|
-
remove() {
|
|
218
|
-
var self = this;
|
|
219
|
-
this.map._listeners.move.forEach(function (element) {
|
|
220
|
-
if (element.name === 'moveHandler') {
|
|
221
|
-
self.map.off('move', element);
|
|
222
|
-
}
|
|
223
|
-
});
|
|
224
|
-
this.map._listeners.move.forEach(function (element) {
|
|
225
|
-
if (element.name === 'zoomEndHandler') {
|
|
226
|
-
self.map.off('zoomend', element);
|
|
227
|
-
}
|
|
228
|
-
});
|
|
229
|
-
|
|
230
|
-
// this.map.off('move', this.map._listeners.move[1]);
|
|
231
|
-
// this.map.off('zoomend', this.map._listeners.moveend[1]);
|
|
232
|
-
|
|
233
|
-
this.chart.clear();
|
|
234
|
-
|
|
235
|
-
if (this.canvas.parentNode)
|
|
236
|
-
this.canvas.parentNode.removeChild(this.canvas);
|
|
237
|
-
this.map = undefined;
|
|
238
|
-
return this;
|
|
239
|
-
}
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
mapboxgl.zondy.EchartsLayer = EchartsLayer;
|
package/overlay/ElsCubeLayer.js
DELETED
|
@@ -1,125 +0,0 @@
|
|
|
1
|
-
import mapboxgl from 'mapbox-gl';
|
|
2
|
-
import '../core/Base';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* @class mapboxgl.zondy.CubeLayer
|
|
6
|
-
* @category 时空立方体
|
|
7
|
-
* @classdesc Cube图层
|
|
8
|
-
* @param map - {Object} 地图
|
|
9
|
-
* @param jsonData -{Object} 数据集
|
|
10
|
-
* @param styleOptions -{Object} 样式参数。如:
|
|
11
|
-
* layerID - {string} 图层ID。<br>
|
|
12
|
-
*/
|
|
13
|
-
export class ElsCubeLayer {
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
*
|
|
17
|
-
* @param {Object} map
|
|
18
|
-
* @param {Object} jsonData
|
|
19
|
-
* @param {Object} Options
|
|
20
|
-
*/
|
|
21
|
-
constructor(map, jsonData, options) {
|
|
22
|
-
this.map = map;
|
|
23
|
-
this.layers = [];
|
|
24
|
-
|
|
25
|
-
this._prepareData(jsonData, options);
|
|
26
|
-
this._createCubes(this.map, options.style);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* @function mapboxgl.zondy.ElsCubeLayer.prototype._prepareData
|
|
31
|
-
* @description 针对原始数据进行数据处理,处理高程等信息
|
|
32
|
-
*/
|
|
33
|
-
_prepareData(originData, options) {
|
|
34
|
-
/* if(options.z) */
|
|
35
|
-
for (var i = 0; i < 10; i++) {
|
|
36
|
-
|
|
37
|
-
var layer = {
|
|
38
|
-
"type": "FeatureCollection",
|
|
39
|
-
"features": []
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
this._prepareLayerCubes(layer, originData, options.space, options.index, options.style);
|
|
43
|
-
|
|
44
|
-
this.layers.push(layer);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
_prepareLayerCubes(layer, originData, spaceRange, indexRange, styleOption) {
|
|
50
|
-
var item = {};
|
|
51
|
-
|
|
52
|
-
originData.forEach(function (point) {
|
|
53
|
-
var centerx = point.lng;
|
|
54
|
-
var centery = point.lat;
|
|
55
|
-
item.minx = centerx - styleOption.radio;
|
|
56
|
-
item.maxx = centerx + styleOption.radio;
|
|
57
|
-
item.miny = centery - styleOption.radio;
|
|
58
|
-
item.maxy = centery + styleOption.radio;
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
layer.features.push(this._createCubeItem(item.minx, item.maxx, item.miny, item.maxy));
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
_createCubeItem(minx, maxx, miny, maxy, properties) {
|
|
65
|
-
var feature = {
|
|
66
|
-
"type": "Feature",
|
|
67
|
-
"geometry": {
|
|
68
|
-
"type": "Polygon",
|
|
69
|
-
"coordinates": [
|
|
70
|
-
[
|
|
71
|
-
[minx, maxy],
|
|
72
|
-
[maxx, maxy],
|
|
73
|
-
[maxx, miny],
|
|
74
|
-
[minx, miny],
|
|
75
|
-
[minx, maxy]
|
|
76
|
-
]
|
|
77
|
-
]
|
|
78
|
-
},
|
|
79
|
-
"properties": properties
|
|
80
|
-
};
|
|
81
|
-
return feature;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
_createCubes(map, style) {
|
|
85
|
-
//this.layers.forEach(function (layer, index) {
|
|
86
|
-
for (var index = 0; index < this.layers.length; index++) {
|
|
87
|
-
var layer = this.layers[this.layers.length - index - 1];
|
|
88
|
-
var sourceId = "TimeSpaceCubeSource" + index;
|
|
89
|
-
var layerId = "ElsCubeLayer" + index;
|
|
90
|
-
var color = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
|
|
91
|
-
|
|
92
|
-
map.addSource(sourceId, {
|
|
93
|
-
"type": "geojson",
|
|
94
|
-
"data": layer
|
|
95
|
-
});
|
|
96
|
-
|
|
97
|
-
map.addLayer({
|
|
98
|
-
"id": layerId, //id不同重复,否则只绘制一次
|
|
99
|
-
"type": "fill-extrusion",
|
|
100
|
-
"source": sourceId, //必须和上面的geojsonCollections一致
|
|
101
|
-
"paint": {
|
|
102
|
-
"fill-extrusion-color": color, //颜色
|
|
103
|
-
"fill-extrusion-height": style.height, //['get', 'height'], //固定语法,获取属性值height的数值
|
|
104
|
-
"fill-extrusion-base": style.baseheight * index, //基础高度,表示相对水平面的高度
|
|
105
|
-
"fill-extrusion-opacity": 0.8 //透明度
|
|
106
|
-
//"fill-extrusion-pattern":"si-main-3", //线的拉伸图片类型,一定要与对应的样式库的图片名字一一对应
|
|
107
|
-
//"fill-extrusion-translate": [0,0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
|
|
108
|
-
}
|
|
109
|
-
});
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
_getRandomColor() {
|
|
117
|
-
return (function (m, s, c) {
|
|
118
|
-
return (c ? arguments.callee(m, s, c - 1) : '#') +
|
|
119
|
-
s[m.floor(m.random() * 16)]
|
|
120
|
-
})(Math, '0123456789abcdef', 5)
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
mapboxgl.zondy.ElsCubeLayer = ElsCubeLayer;
|
package/overlay/MapvLayer.js
DELETED
|
@@ -1,298 +0,0 @@
|
|
|
1
|
-
import mapboxgl from 'mapbox-gl';
|
|
2
|
-
import '../core/Base';
|
|
3
|
-
import {
|
|
4
|
-
MapvBaseLayer
|
|
5
|
-
} from "./mapv/MapvBaseLayer";
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* @origin author kyle / http://nikai.us/
|
|
9
|
-
* @author 基础平台/创新中心 潘卓然 ParnDeedlit
|
|
10
|
-
* @class mapboxgl.zondy.MapvLayer
|
|
11
|
-
* @classdesc 基于mapboxgl的Layer对象进行的拓展
|
|
12
|
-
* @param map - {Object} 传入的mapboxgl的地图对象
|
|
13
|
-
* @param dataset - {MapvDataSet} 传入的mapv的属性。 <br>
|
|
14
|
-
* @param mapvoption - {MapvOption} 可选参数。<br>
|
|
15
|
-
*/
|
|
16
|
-
export class MapvLayer {
|
|
17
|
-
|
|
18
|
-
constructor(map, dataSet, mapVOptions) {
|
|
19
|
-
this.map = map;
|
|
20
|
-
this.layerID = mapVOptions.layerID;
|
|
21
|
-
delete mapVOptions["layerID"];
|
|
22
|
-
this.mapvBaseLayer = new MapvBaseLayer(map, dataSet, mapVOptions, this);
|
|
23
|
-
this.mapVOptions = mapVOptions;
|
|
24
|
-
|
|
25
|
-
this.initDevicePixelRatio();
|
|
26
|
-
|
|
27
|
-
this.canvas = this._createCanvas();
|
|
28
|
-
|
|
29
|
-
this.render = this.render.bind(this);
|
|
30
|
-
|
|
31
|
-
this.bindEvent();
|
|
32
|
-
|
|
33
|
-
this.mapContainer = map.getCanvasContainer();
|
|
34
|
-
this.mapContainer.appendChild(this.canvas);
|
|
35
|
-
this.mapContainer.style.perspective = this.map.transform.cameraToCenterDistance + 'px';
|
|
36
|
-
|
|
37
|
-
this._reset();
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
initDevicePixelRatio() {
|
|
41
|
-
this.devicePixelRatio = window.devicePixelRatio || 1;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
//-----------------------------------Event Methods----------------------------------------
|
|
45
|
-
bindEvent() {
|
|
46
|
-
var map = this.map;
|
|
47
|
-
//下面几个是mapboxgl专属事件,clickEvent和mousemoveEvent是mapv内部自带的方法不放出来
|
|
48
|
-
this.innerMoveStart = this.moveStartEvent.bind(this);
|
|
49
|
-
this.innerMoveEnd = this.moveEndEvent.bind(this);
|
|
50
|
-
|
|
51
|
-
this.innnerZoomStart = this.zoomStartEvent.bind(this);
|
|
52
|
-
this.innnerZoomEnd = this.zoomEndEvent.bind(this);
|
|
53
|
-
|
|
54
|
-
this.innnerRotateStart = this.rotateStartEvent.bind(this);
|
|
55
|
-
this.innnerRotateEnd = this.rotateEndEvent.bind(this);
|
|
56
|
-
|
|
57
|
-
this.innerResize = this.resizeEvent.bind(this);
|
|
58
|
-
|
|
59
|
-
this.innerRemove = this.removeEvent.bind(this);
|
|
60
|
-
|
|
61
|
-
map.on('resize', this.innerResize);
|
|
62
|
-
|
|
63
|
-
map.on('zoomstart', this.innnerZoomStart);
|
|
64
|
-
map.on('zoomend', this.innnerZoomEnd);
|
|
65
|
-
|
|
66
|
-
map.on('rotatestart', this.innnerRotateStart);
|
|
67
|
-
map.on('rotateend', this.innnerRotateEnd);
|
|
68
|
-
|
|
69
|
-
map.on('movestart', this.innerMoveStart);
|
|
70
|
-
map.on('moveend', this.innerMoveEnd);
|
|
71
|
-
|
|
72
|
-
this.map.on('remove', this.innerRemove);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
unbindEvent() {
|
|
76
|
-
var map = this.map;
|
|
77
|
-
map.off('resize', this.innerResize);
|
|
78
|
-
|
|
79
|
-
map.off('zoomstart', this.innnerZoomStart);
|
|
80
|
-
map.off('zoomend', this.innnerZoomEnd);
|
|
81
|
-
|
|
82
|
-
map.off('rotatestart', this.innnerRotateStart);
|
|
83
|
-
map.off('rotateend', this.innnerRotateEnd);
|
|
84
|
-
|
|
85
|
-
map.off('movestart', this.innerMoveStart);
|
|
86
|
-
map.off('moveend', this.innerMoveEnd);
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
moveStartEvent() {
|
|
90
|
-
this.mapvBaseLayer.animatorMovestartEvent();
|
|
91
|
-
this._unvisiable();
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
moveEndEvent() {
|
|
95
|
-
this.mapvBaseLayer.animatorMoveendEvent();
|
|
96
|
-
this._reset();
|
|
97
|
-
this._visiable();
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
zoomStartEvent() {
|
|
101
|
-
this._unvisiable();
|
|
102
|
-
}
|
|
103
|
-
zoomEndEvent() {
|
|
104
|
-
this._unvisiable();
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
rotateStartEvent() {
|
|
108
|
-
this.mapvBaseLayer.animatorMovestartEvent();
|
|
109
|
-
this._unvisiable();
|
|
110
|
-
}
|
|
111
|
-
rotateEndEvent() {
|
|
112
|
-
this.mapvBaseLayer.animatorMoveendEvent();
|
|
113
|
-
this._reset();
|
|
114
|
-
this._visiable();
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
resizeEvent() {
|
|
118
|
-
this._reset();
|
|
119
|
-
this._visiable();
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
removeEvent() {
|
|
123
|
-
this.mapContainer.removeChild(this.canvas);
|
|
124
|
-
}
|
|
125
|
-
//-----------------------------------Event Methods----------------------------------------
|
|
126
|
-
|
|
127
|
-
//-----------------------------------Start Data Operation---------------------------------
|
|
128
|
-
/**
|
|
129
|
-
* 增加数据
|
|
130
|
-
* @function mapboxgl.zondy.MapVLayer.prototype.addData
|
|
131
|
-
*
|
|
132
|
-
* @param data - {Array} 数据.
|
|
133
|
-
* @param options - {Object} 只做额外增加的字段作用
|
|
134
|
-
*/
|
|
135
|
-
addData(data, options) {
|
|
136
|
-
this.mapvBaseLayer.addData(data, options);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
/**
|
|
140
|
-
* 更新数据
|
|
141
|
-
* @function mapboxgl.zondy.MapVLayer.prototype.addData
|
|
142
|
-
*
|
|
143
|
-
* @param data - {Array} 数据.
|
|
144
|
-
* @param options - {Object} 只做额外增加的字段作用
|
|
145
|
-
*/
|
|
146
|
-
updateData(data, options) {
|
|
147
|
-
this.mapvBaseLayer.updateData(data, options);
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
getData() {
|
|
151
|
-
if (this.mapvBaseLayer) {
|
|
152
|
-
this.dataSet = this.mapvBaseLayer.getData();
|
|
153
|
-
}
|
|
154
|
-
return this.dataSet;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
removeData(filter) {
|
|
158
|
-
this.mapvBaseLayer && this.mapvBaseLayer.removeData(filter);
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
removeAllData() {
|
|
162
|
-
this.mapvBaseLayer.clearData();
|
|
163
|
-
}
|
|
164
|
-
//-----------------------------------End Data Operation---------------------------------
|
|
165
|
-
|
|
166
|
-
_visiable() {
|
|
167
|
-
this.canvas.style.display = 'block';
|
|
168
|
-
return this;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
_unvisiable() {
|
|
172
|
-
this.canvas.style.display = 'none';
|
|
173
|
-
return this;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
_createCanvas() {
|
|
177
|
-
var canvas = document.createElement('canvas');
|
|
178
|
-
canvas.id = this.layerID;
|
|
179
|
-
canvas.style.position = 'absolute';
|
|
180
|
-
canvas.style.top = "0px";
|
|
181
|
-
canvas.style.left = "0px";
|
|
182
|
-
canvas.width = parseInt(this.map.getCanvas().style.width);
|
|
183
|
-
canvas.height = parseInt(this.map.getCanvas().style.height);
|
|
184
|
-
canvas.style.width = this.map.getCanvas().style.width;
|
|
185
|
-
canvas.style.height = this.map.getCanvas().style.height;
|
|
186
|
-
var devicePixelRatio = this.devicePixelRatio;
|
|
187
|
-
if (this.mapVOptions.context == '2d') {
|
|
188
|
-
canvas.getContext(this.mapVOptions.context).scale(devicePixelRatio, devicePixelRatio);
|
|
189
|
-
}
|
|
190
|
-
return canvas;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
_reset() {
|
|
194
|
-
if(this.canvas == null){
|
|
195
|
-
return;
|
|
196
|
-
}
|
|
197
|
-
this.resizeCanvas();
|
|
198
|
-
this.fixPosition();
|
|
199
|
-
this.onResize();
|
|
200
|
-
this.render();
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
draw() {
|
|
204
|
-
return this._reset();
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
/**
|
|
208
|
-
* 显示图层
|
|
209
|
-
* @function mapboxgl.zondy.MapVLayer.prototype.show
|
|
210
|
-
*/
|
|
211
|
-
show() {
|
|
212
|
-
this._visiable();
|
|
213
|
-
}
|
|
214
|
-
/**
|
|
215
|
-
* 隐藏图层
|
|
216
|
-
* @function mapboxgl.zondy.MapVLayer.prototype.hide
|
|
217
|
-
*/
|
|
218
|
-
hide() {
|
|
219
|
-
this._unvisiable();
|
|
220
|
-
}
|
|
221
|
-
/**
|
|
222
|
-
* 更新图层
|
|
223
|
-
* @function mapboxgl.zondy.MapVLayer.prototype.update
|
|
224
|
-
*/
|
|
225
|
-
update(opt) {
|
|
226
|
-
if(opt == undefined) { return; }
|
|
227
|
-
this.updateData(opt.data, opt.options);
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
resizeCanvas() {
|
|
231
|
-
this.mapContainer.style.perspective = this.map.transform.cameraToCenterDistance + 'px';
|
|
232
|
-
var canvas = this.canvas;
|
|
233
|
-
canvas.style.position = 'absolute';
|
|
234
|
-
canvas.style.top = "0px";
|
|
235
|
-
canvas.style.left = "0px";
|
|
236
|
-
canvas.width = parseInt(this.map.getCanvas().style.width);
|
|
237
|
-
canvas.height = parseInt(this.map.getCanvas().style.height);
|
|
238
|
-
canvas.style.width = this.map.getCanvas().style.width;
|
|
239
|
-
canvas.style.height = this.map.getCanvas().style.height;
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
fixPosition() {
|
|
243
|
-
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
onResize() {
|
|
247
|
-
|
|
248
|
-
}
|
|
249
|
-
|
|
250
|
-
originPosition(){
|
|
251
|
-
this.originPitch = this.map.getPitch();
|
|
252
|
-
this.originBearing = this.map.getBearing();
|
|
253
|
-
var origin = this.map.project(new mapboxgl.LngLat(0, 0));
|
|
254
|
-
this.originX = origin.x;
|
|
255
|
-
this.originY = origin.y
|
|
256
|
-
}
|
|
257
|
-
|
|
258
|
-
render() {
|
|
259
|
-
this.mapvBaseLayer._canvasUpdate();
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
moveTo(layerID, before) {
|
|
263
|
-
var layer = document.getElementById(this.layerID);
|
|
264
|
-
before = before !== undefined ? before : true;
|
|
265
|
-
if (before) {
|
|
266
|
-
var beforeLayer = document.getElementById(layerID);
|
|
267
|
-
if (layer && beforeLayer) {
|
|
268
|
-
beforeLayer.parentNode.insertBefore(layer, beforeLayer);
|
|
269
|
-
}
|
|
270
|
-
return;
|
|
271
|
-
}
|
|
272
|
-
var nextLayer = document.getElementById(layerID);
|
|
273
|
-
if (layer) {
|
|
274
|
-
if (nextLayer.nextSibling) {
|
|
275
|
-
nextLayer.parentNode.insertBefore(layer, nextLayer.nextSibling);
|
|
276
|
-
return;
|
|
277
|
-
}
|
|
278
|
-
nextLayer.parentNode.appendChild(layer);
|
|
279
|
-
}
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
remove(){
|
|
283
|
-
this.removeAllData();
|
|
284
|
-
this.unbindEvent();
|
|
285
|
-
this.mapContainer.removeChild(this.canvas);
|
|
286
|
-
this.disposeFlag = true;
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
destroy(){
|
|
290
|
-
this.removeAllData();
|
|
291
|
-
this.unbindEvent();
|
|
292
|
-
this.mapContainer.removeChild(this.canvas);
|
|
293
|
-
this.disposeFlag = true;
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
mapboxgl.zondy.MapvLayer = MapvLayer;
|