@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/StreamLayer.js
DELETED
|
@@ -1,86 +0,0 @@
|
|
|
1
|
-
import mapboxgl from 'mapbox-gl'
|
|
2
|
-
import '../core/Base'
|
|
3
|
-
import { SocketService } from "../service/socket/SocketService"
|
|
4
|
-
|
|
5
|
-
import {
|
|
6
|
-
SubscribeEvent,
|
|
7
|
-
LayerEvent
|
|
8
|
-
} from "../../common/service/socket/SocketEvent"
|
|
9
|
-
|
|
10
|
-
import { MapvStreamLayer } from "./stream/MapvStreamLayer"
|
|
11
|
-
import { GeojsonStreamLayer } from "./stream/GeojsonStreamLayer"
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* @author 基础平台/创新中心 潘卓然 ParnDeedlit
|
|
15
|
-
* @class L.zondy.StreamLayer
|
|
16
|
-
* @classdesc 基于leaflet的Layer对象进行的拓展
|
|
17
|
-
* @extends {L.LayerGroup}
|
|
18
|
-
* @param {string} url - 数据流图层服务地址
|
|
19
|
-
* @param {Object} options - 设置图层参数
|
|
20
|
-
* @param {Object} [options.render='normal'] - 渲染方式。可选值为'geojson', 'mapv', 'echarts'
|
|
21
|
-
*/
|
|
22
|
-
export class StreamLayer {
|
|
23
|
-
constructor(map, url, options) {
|
|
24
|
-
this.options = options || {}
|
|
25
|
-
this.map = map
|
|
26
|
-
this.url = url
|
|
27
|
-
|
|
28
|
-
this.layer = undefined
|
|
29
|
-
|
|
30
|
-
this.socketService = new SocketService(this.url, this.options)
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
addTo(map) {
|
|
34
|
-
this.map = map
|
|
35
|
-
|
|
36
|
-
this.bindEvent()
|
|
37
|
-
|
|
38
|
-
if (this.options.render === "mapv") {
|
|
39
|
-
this.layer = new MapvStreamLayer(this.map, this.url, this.options)
|
|
40
|
-
} else {
|
|
41
|
-
this.layer = new GeojsonStreamLayer(this.map, this.url, this.options)
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
bindEvent() {
|
|
46
|
-
this.socketService.createSubscribe()
|
|
47
|
-
|
|
48
|
-
this.socketService.on(SubscribeEvent.OPEN, e =>
|
|
49
|
-
this.fire(SubscribeEvent.OPEN, e)
|
|
50
|
-
)
|
|
51
|
-
this.socketService.on(SubscribeEvent.MESSAGE, msg => this.onMessage(msg))
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
unbindEvent() {
|
|
55
|
-
if (!this.socketService) return
|
|
56
|
-
|
|
57
|
-
this.socketService.on(SubscribeEvent.OPEN, e =>
|
|
58
|
-
this.fire(SubscribeEvent.OPEN, e)
|
|
59
|
-
)
|
|
60
|
-
this.socketService.on(SubscribeEvent.MESSAGE, msg => this.onMessage(msg))
|
|
61
|
-
|
|
62
|
-
this.socketService && this.socketService.closeSubscribe()
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
remove() {
|
|
66
|
-
this.unbindEvent()
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
fire(type, event) {
|
|
70
|
-
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
onMessage(msg) {
|
|
74
|
-
this.layer.onMessage(msg)
|
|
75
|
-
/* this.fire(LayerEvent.UPDATE, {
|
|
76
|
-
layer: this.layer,
|
|
77
|
-
data: msg.feature
|
|
78
|
-
}) */
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
export var streamLayer = function (map, url, options) {
|
|
83
|
-
return new StreamLayer(map, url, options)
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
mapboxgl.zondy.StreamLayer = streamLayer
|
|
@@ -1,135 +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 TimeSpaceCubeLayer {
|
|
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.TimeSpaceCubeLayer.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, options.space, options.index, options.style);
|
|
43
|
-
|
|
44
|
-
this.layers.push(layer);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
_prepareLayerCubes(layer, spaceRange, indexRange, styleOption) {
|
|
50
|
-
var item = {};
|
|
51
|
-
var xlength = (spaceRange.endx - spaceRange.startx) / (indexRange.cols);
|
|
52
|
-
var ylength = (spaceRange.endy - spaceRange.starty) / (indexRange.rows);
|
|
53
|
-
for (var col = 0; col < indexRange.cols; col++) {
|
|
54
|
-
for (var row = 0; row < indexRange.rows; row++) {
|
|
55
|
-
if (styleOption && styleOption.radio) {
|
|
56
|
-
var centerx = spaceRange.endx + (col + 1) * xlength / 2;
|
|
57
|
-
var centery = spaceRange.endy + (row + 1) * ylength / 2;
|
|
58
|
-
item.minx = centerx - styleOption.radio;
|
|
59
|
-
item.maxx = centerx + styleOption.radio;
|
|
60
|
-
item.miny = centery - styleOption.radio;
|
|
61
|
-
item.maxy = centery + styleOption.radio;
|
|
62
|
-
} else {
|
|
63
|
-
item.minx = spaceRange.startx + col * xlength;
|
|
64
|
-
item.maxx = spaceRange.endx + (col + 1) * xlength;
|
|
65
|
-
item.miny = spaceRange.starty + row * ylength;
|
|
66
|
-
item.maxy = spaceRange.endy + (row + 1) * ylength;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
layer.features.push(this._createCubeItem(item.minx, item.maxx, item.miny, item.maxy));
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
_createCubeItem(minx, maxx, miny, maxy, properties) {
|
|
75
|
-
var feature = {
|
|
76
|
-
"type": "Feature",
|
|
77
|
-
"geometry": {
|
|
78
|
-
"type": "Polygon",
|
|
79
|
-
"coordinates": [
|
|
80
|
-
[
|
|
81
|
-
[minx, maxy],
|
|
82
|
-
[maxx, maxy],
|
|
83
|
-
[maxx, miny],
|
|
84
|
-
[minx, miny],
|
|
85
|
-
[minx, maxy]
|
|
86
|
-
]
|
|
87
|
-
]
|
|
88
|
-
},
|
|
89
|
-
"properties": properties
|
|
90
|
-
};
|
|
91
|
-
return feature;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
_createCubes(map, style) {
|
|
95
|
-
//this.layers.forEach(function (layer, index) {
|
|
96
|
-
for (var index = 0; index < this.layers.length; index++) {
|
|
97
|
-
var layer = this.layers[this.layers.length - index - 1];
|
|
98
|
-
var sourceId = "TimeSpaceCubeSource" + index;
|
|
99
|
-
var layerId = "TimeSpaceCubeLayer" + index;
|
|
100
|
-
var color = '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
|
|
101
|
-
|
|
102
|
-
map.addSource(sourceId, {
|
|
103
|
-
"type": "geojson",
|
|
104
|
-
"data": layer
|
|
105
|
-
});
|
|
106
|
-
|
|
107
|
-
map.addLayer({
|
|
108
|
-
"id": layerId, //id不同重复,否则只绘制一次
|
|
109
|
-
"type": "fill-extrusion",
|
|
110
|
-
"source": sourceId, //必须和上面的geojsonCollections一致
|
|
111
|
-
"paint": {
|
|
112
|
-
"fill-extrusion-color": color, //颜色
|
|
113
|
-
"fill-extrusion-height": style.height, //['get', 'height'], //固定语法,获取属性值height的数值
|
|
114
|
-
"fill-extrusion-base": style.baseheight * index, //基础高度,表示相对水平面的高度
|
|
115
|
-
"fill-extrusion-opacity": 0.8 //透明度
|
|
116
|
-
//"fill-extrusion-pattern":"si-main-3", //线的拉伸图片类型,一定要与对应的样式库的图片名字一一对应
|
|
117
|
-
//"fill-extrusion-translate": [0,0] //表示显示位置基于原始位置上,再按照屏幕坐标进行偏移,这个应该绝大部分都用不上
|
|
118
|
-
}
|
|
119
|
-
});
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
_getRandomColor() {
|
|
127
|
-
return (function (m, s, c) {
|
|
128
|
-
return (c ? arguments.callee(m, s, c - 1) : '#') +
|
|
129
|
-
s[m.floor(m.random() * 16)]
|
|
130
|
-
})(Math, '0123456789abcdef', 5)
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
mapboxgl.zondy.TimeSpaceCubeLayer = TimeSpaceCubeLayer;
|
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
import mapboxgl from 'mapbox-gl';
|
|
2
|
-
import echarts from 'echarts';
|
|
3
|
-
|
|
4
|
-
export function MapCoordSys (MapboxGLMap, api) {
|
|
5
|
-
this._MapboxGLMap = MapboxGLMap
|
|
6
|
-
this.dimensions = ['lng', 'lat']
|
|
7
|
-
this._mapOffset = [0, 0]
|
|
8
|
-
|
|
9
|
-
this._api = api
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
MapCoordSys.prototype.dimensions = ['lng', 'lat']
|
|
13
|
-
|
|
14
|
-
MapCoordSys.prototype.setMapOffset = function (mapOffset) {
|
|
15
|
-
this._mapOffset = mapOffset
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
MapCoordSys.prototype.getBMap = function () {
|
|
19
|
-
return this._MapboxGLMap
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
MapCoordSys.prototype.dataToPoint = function (data) {
|
|
23
|
-
var px = this._MapboxGLMap.project(data)
|
|
24
|
-
|
|
25
|
-
var mapOffset = this._mapOffset
|
|
26
|
-
|
|
27
|
-
return [px.x - mapOffset[0], px.y - mapOffset[1]]
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
MapCoordSys.prototype.pointToData = function (pt) {
|
|
31
|
-
var mapOffset = this._mapOffset
|
|
32
|
-
var pt = this._MapboxGLMap.project(
|
|
33
|
-
[ pt[0] + mapOffset[0],
|
|
34
|
-
pt[1] + mapOffset[1]]
|
|
35
|
-
)
|
|
36
|
-
return [pt.lng, pt.lat]
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
MapCoordSys.prototype.getViewRect = function () {
|
|
40
|
-
var api = this._api
|
|
41
|
-
return new echarts.graphic.BoundingRect(0, 0, api.getWidth(), api.getHeight())
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
MapCoordSys.prototype.getRoamTransform = function () {
|
|
45
|
-
return echarts.matrix.create()
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
//https://github.com/apache/incubator-echarts/issues/6953
|
|
49
|
-
//https://github.com/apache/incubator-echarts/issues/7789
|
|
50
|
-
MapCoordSys.prototype.prepareCustoms = function (data) {
|
|
51
|
-
var zrUtil = echarts.util;
|
|
52
|
-
|
|
53
|
-
var rect = this.getViewRect();
|
|
54
|
-
return {
|
|
55
|
-
coordSys: {
|
|
56
|
-
// The name exposed to user is always 'cartesian2d' but not 'grid'.
|
|
57
|
-
type: 'mapboxgl',
|
|
58
|
-
x: rect.x,
|
|
59
|
-
y: rect.y,
|
|
60
|
-
width: rect.width,
|
|
61
|
-
height: rect.height
|
|
62
|
-
},
|
|
63
|
-
api: {
|
|
64
|
-
coord: zrUtil.bind(this.dataToPoint, this),
|
|
65
|
-
size: zrUtil.bind(dataToCoordSize, this)
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
function dataToCoordSize(dataSize, dataItem) {
|
|
70
|
-
dataItem = dataItem || [0, 0];
|
|
71
|
-
return zrUtil.map([0, 1], function (dimIdx) {
|
|
72
|
-
var val = dataItem[dimIdx];
|
|
73
|
-
var halfSize = dataSize[dimIdx] / 2;
|
|
74
|
-
var p1 = [];
|
|
75
|
-
var p2 = [];
|
|
76
|
-
p1[dimIdx] = val - halfSize;
|
|
77
|
-
p2[dimIdx] = val + halfSize;
|
|
78
|
-
p1[1 - dimIdx] = p2[1 - dimIdx] = dataItem[1 - dimIdx];
|
|
79
|
-
return Math.abs(this.dataToPoint(p1)[dimIdx] - this.dataToPoint(p2)[dimIdx]);
|
|
80
|
-
}, this);
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
// For deciding which dimensions to use when creating list data
|
|
85
|
-
MapCoordSys.dimensions = MapCoordSys.prototype.dimensions
|
|
86
|
-
|
|
87
|
-
MapCoordSys.create = function (ecModel, api) {
|
|
88
|
-
var coordSys;
|
|
89
|
-
|
|
90
|
-
ecModel.eachComponent('mapboxgl', function (GLMapModel) {
|
|
91
|
-
var viewportRoot = api.getZr().painter.getViewportRoot()
|
|
92
|
-
var MapboxGLMap = echarts.mapboxglMap;
|
|
93
|
-
coordSys = new MapCoordSys(MapboxGLMap, api)
|
|
94
|
-
coordSys.setMapOffset(GLMapModel.__mapOffset || [0, 0])
|
|
95
|
-
GLMapModel.coordinateSystem = coordSys
|
|
96
|
-
})
|
|
97
|
-
|
|
98
|
-
ecModel.eachSeries(function (seriesModel) {
|
|
99
|
-
if (seriesModel.get('coordinateSystem') === 'mapboxgl') {
|
|
100
|
-
seriesModel.coordinateSystem = coordSys
|
|
101
|
-
}
|
|
102
|
-
})
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
export default MapCoordSys;
|
|
File without changes
|
|
File without changes
|
package/overlay/echarts/index.js
DELETED
package/overlay/index.js
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
export {
|
|
2
|
-
EchartsLayer
|
|
3
|
-
}
|
|
4
|
-
from './EchartsLayer'
|
|
5
|
-
|
|
6
|
-
export {
|
|
7
|
-
MapvLayer
|
|
8
|
-
}
|
|
9
|
-
from './MapvLayer'
|
|
10
|
-
|
|
11
|
-
export {
|
|
12
|
-
StreamLayer
|
|
13
|
-
} from './StreamLayer'
|
|
14
|
-
|
|
15
|
-
/* export {
|
|
16
|
-
D3Layer
|
|
17
|
-
}
|
|
18
|
-
from './D3Layer'; */
|
|
19
|
-
|
|
20
|
-
/* export {
|
|
21
|
-
TimeSpaceCubeLayer
|
|
22
|
-
}
|
|
23
|
-
from './TimeSpaceCubeLayer'; */
|
|
24
|
-
|
|
25
|
-
/* export {
|
|
26
|
-
ElsCubeLayer
|
|
27
|
-
}
|
|
28
|
-
from './ElsCubeLayer';
|
|
29
|
-
*/
|
|
30
|
-
//export * from './mapv/index.js';
|
|
31
|
-
//export * from './echarts/index.js';
|
|
@@ -1,299 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
baiduMapLayer,
|
|
3
|
-
DataSet
|
|
4
|
-
} from "mapv";
|
|
5
|
-
import mapboxgl from 'mapbox-gl';
|
|
6
|
-
|
|
7
|
-
var BaseLayer = baiduMapLayer ? baiduMapLayer.__proto__ : Function;
|
|
8
|
-
|
|
9
|
-
/**
|
|
10
|
-
* @private
|
|
11
|
-
* @class MapvBaseLayer
|
|
12
|
-
* @classdesc MapV图层渲染
|
|
13
|
-
* @param map - {string} 地图
|
|
14
|
-
* @param layer -{Object} 图层
|
|
15
|
-
* @param dataSet -{Object} 数据集
|
|
16
|
-
* @param options -{Object} 交互时所需可选参数。
|
|
17
|
-
* @extends BaseLayer
|
|
18
|
-
*
|
|
19
|
-
*/
|
|
20
|
-
export class MapvBaseLayer extends BaseLayer {
|
|
21
|
-
constructor(map, dataSet, options, mapboxLayer) {
|
|
22
|
-
super(map, dataSet, options);
|
|
23
|
-
|
|
24
|
-
if (!BaseLayer) return;
|
|
25
|
-
|
|
26
|
-
this.map = map; //此处的map是外面传入的mapboxgl的map对象
|
|
27
|
-
this.dataSet = dataSet;
|
|
28
|
-
|
|
29
|
-
var self = this;
|
|
30
|
-
var data = null;
|
|
31
|
-
options = options || {};
|
|
32
|
-
|
|
33
|
-
self.init(options);
|
|
34
|
-
self.argCheck(options);
|
|
35
|
-
|
|
36
|
-
this.initDevicePixelRatio();
|
|
37
|
-
|
|
38
|
-
this.canvasLayer = mapboxLayer;
|
|
39
|
-
|
|
40
|
-
this.stopAniamation = false;
|
|
41
|
-
this.animation = options.animation;
|
|
42
|
-
|
|
43
|
-
//this.clickEvent = this.clickEvent.bind(this);
|
|
44
|
-
this.mousemoveEvent = this.mousemoveEvent.bind(this);
|
|
45
|
-
|
|
46
|
-
this.bindEvent();
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
/**
|
|
50
|
-
* @function mapboxgl.zondy.MapvBaseLayer.prototype.initDevicePixelRatio
|
|
51
|
-
* @description window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
|
|
52
|
-
* 公式表示就是:window.devicePixelRatio = 物理像素 / dips,该函数主要应用与移动设备
|
|
53
|
-
*/
|
|
54
|
-
initDevicePixelRatio() {
|
|
55
|
-
this.devicePixelRatio = window.devicePixelRatio || 1;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
/**
|
|
59
|
-
* @function mapboxgl.zondy.MapvBaseLayer.prototype.clickEvent
|
|
60
|
-
* @description 百度mapv原本的事件只有clickEvent和mousemoveEvent
|
|
61
|
-
* @param e 点击事件对象 {latlng, layerPoint, containerPoint, originalEvent}
|
|
62
|
-
* @example
|
|
63
|
-
* //mapv.map.BaseLayer.clickEvent
|
|
64
|
-
* clickEvent(pixel, e) {
|
|
65
|
-
* var dataItem = this.isPointInPath(this.getContext(), pixel);
|
|
66
|
-
* if (dataItem) {
|
|
67
|
-
* this.options.methods.click(dataItem, e);
|
|
68
|
-
* } else {
|
|
69
|
-
* this.options.methods.click(null, e);
|
|
70
|
-
* }
|
|
71
|
-
* }
|
|
72
|
-
*/
|
|
73
|
-
clickEvent(e) {
|
|
74
|
-
var pixel = e.point;
|
|
75
|
-
super.clickEvent(pixel, e);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
/**
|
|
79
|
-
* @function mapboxgl.zondy.MapvBaseLayer.prototype.mousemoveEvent
|
|
80
|
-
* @description 百度mapv原本的事件只有clickEvent和mousemoveEvent
|
|
81
|
-
* @param e 点击事件对象 {latlng, layerPoint, containerPoint, originalEvent}
|
|
82
|
-
* @example
|
|
83
|
-
* //mapv.map.BaseLayer.mousemoveEvent
|
|
84
|
-
* mousemoveEvent(pixel, e) {
|
|
85
|
-
* var dataItem = this.isPointInPath(this.getContext(), pixel);
|
|
86
|
-
* if (dataItem) {
|
|
87
|
-
* this.options.methods.mousemove(dataItem, e);
|
|
88
|
-
* } else {
|
|
89
|
-
* this.options.methods.mousemove(null, e);
|
|
90
|
-
* }
|
|
91
|
-
* }
|
|
92
|
-
*/
|
|
93
|
-
mousemoveEvent(e) {
|
|
94
|
-
var pixel = e.point;
|
|
95
|
-
super.mousemoveEvent(pixel, e);
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
addAnimatorEvent() {
|
|
99
|
-
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
animatorMovestartEvent() {
|
|
103
|
-
var animationOptions = this.options.animation;
|
|
104
|
-
if (this.isEnabledTime() && this.animator) {
|
|
105
|
-
this.steps.step = animationOptions.stepsRange.start;
|
|
106
|
-
//this.animator.stop();
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
animatorMoveendEvent() {
|
|
111
|
-
if (this.isEnabledTime() && this.animator) {
|
|
112
|
-
//this.animator.start();
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
bindEvent() {
|
|
117
|
-
var map = this.map;
|
|
118
|
-
if (this.options.methods) {
|
|
119
|
-
if (this.options.methods.click) {
|
|
120
|
-
map.on('click', this.clickEvent);
|
|
121
|
-
}
|
|
122
|
-
if (this.options.methods.mousemove) {
|
|
123
|
-
map.on('mousemove', this.mousemoveEvent);
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
unbindEvent() {
|
|
129
|
-
var map = this.map;
|
|
130
|
-
|
|
131
|
-
if (this.options.methods) {
|
|
132
|
-
if (this.options.methods.click) {
|
|
133
|
-
map.off('click', this.clickEvent);
|
|
134
|
-
}
|
|
135
|
-
if (this.options.methods.mousemove) {
|
|
136
|
-
map.off('mousemove', this.mousemoveEvent);
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
getContext() {
|
|
142
|
-
return this.canvasLayer.canvas.getContext(this.context);
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
init(options) {
|
|
147
|
-
|
|
148
|
-
var self = this;
|
|
149
|
-
|
|
150
|
-
self.options = options;
|
|
151
|
-
|
|
152
|
-
this.initDataRange(options);
|
|
153
|
-
|
|
154
|
-
this.context = self.options.context || '2d';
|
|
155
|
-
|
|
156
|
-
if (self.options.zIndex) {
|
|
157
|
-
this.canvasLayer && this.canvasLayer.setZIndex(self.options.zIndex);
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
this.initAnimator();
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
_canvasUpdate(time) {
|
|
164
|
-
var map = this.map;
|
|
165
|
-
if (!this.canvasLayer || this.stopAniamation || this.canvasLayer.disposeFlag) {
|
|
166
|
-
return;
|
|
167
|
-
}
|
|
168
|
-
var self = this;
|
|
169
|
-
|
|
170
|
-
var animationOptions = self.options.animation;
|
|
171
|
-
|
|
172
|
-
var context = this.getContext();
|
|
173
|
-
|
|
174
|
-
if (self.isEnabledTime()) {
|
|
175
|
-
if (time === undefined) {
|
|
176
|
-
this.clear(context);
|
|
177
|
-
return;
|
|
178
|
-
}
|
|
179
|
-
if (this.context === '2d') {
|
|
180
|
-
context.save();
|
|
181
|
-
context.globalCompositeOperation = 'destination-out';
|
|
182
|
-
context.fillStyle = 'rgba(0, 0, 0, .1)';
|
|
183
|
-
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
|
|
184
|
-
context.restore();
|
|
185
|
-
}
|
|
186
|
-
} else {
|
|
187
|
-
this.clear(context);
|
|
188
|
-
}
|
|
189
|
-
|
|
190
|
-
if (this.context === '2d') {
|
|
191
|
-
for (var key in self.options) {
|
|
192
|
-
context[key] = self.options[key];
|
|
193
|
-
}
|
|
194
|
-
} else {
|
|
195
|
-
context.clear(context.COLOR_BUFFER_BIT);
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
if (self.options.minZoom && map.getZoom() < self.options.minZoom || self.options.maxZoom && map.getZoom() > self.options.maxZoom) {
|
|
199
|
-
return;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
var dataGetOptions = {
|
|
203
|
-
transferCoordinate: function (coordinate) {
|
|
204
|
-
var point = map.project((new mapboxgl.LngLat(coordinate[0], coordinate[1])));
|
|
205
|
-
return [point.x, point.y];
|
|
206
|
-
}
|
|
207
|
-
};
|
|
208
|
-
|
|
209
|
-
if (time !== undefined) {
|
|
210
|
-
dataGetOptions.filter = function (item) {
|
|
211
|
-
var trails = animationOptions.trails || 10;
|
|
212
|
-
if (time && item.time > (time - trails) && item.time < time) {
|
|
213
|
-
return true;
|
|
214
|
-
} else {
|
|
215
|
-
return false;
|
|
216
|
-
}
|
|
217
|
-
}
|
|
218
|
-
}
|
|
219
|
-
|
|
220
|
-
var data = self.dataSet.get(dataGetOptions);
|
|
221
|
-
|
|
222
|
-
this.processData(data);
|
|
223
|
-
|
|
224
|
-
if (self.options.unit == 'm' && self.options.size) {
|
|
225
|
-
//self.options._size = self.options.size / zoomUnit;
|
|
226
|
-
self.options._size = self.options.size;
|
|
227
|
-
} else {
|
|
228
|
-
self.options._size = self.options.size;
|
|
229
|
-
}
|
|
230
|
-
|
|
231
|
-
var pixel = map.project(new mapboxgl.LngLat(0, 0));
|
|
232
|
-
this.drawContext(context, new DataSet(data), self.options, pixel);
|
|
233
|
-
|
|
234
|
-
self.options.updateCallback && self.options.updateCallback(time);
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
updateData(data, options) {
|
|
238
|
-
var _data = data;
|
|
239
|
-
if (_data && _data.get) {
|
|
240
|
-
_data = _data.get();
|
|
241
|
-
}
|
|
242
|
-
if (_data != undefined) {
|
|
243
|
-
this.dataSet.set(_data);
|
|
244
|
-
}
|
|
245
|
-
|
|
246
|
-
super.update({
|
|
247
|
-
options: options
|
|
248
|
-
});
|
|
249
|
-
|
|
250
|
-
}
|
|
251
|
-
|
|
252
|
-
addData(data, options) {
|
|
253
|
-
var _data = data;
|
|
254
|
-
if (data && data.get) {
|
|
255
|
-
_data = data.get();
|
|
256
|
-
}
|
|
257
|
-
this.dataSet.add(_data);
|
|
258
|
-
this.update({
|
|
259
|
-
options: options
|
|
260
|
-
});
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
getData() {
|
|
264
|
-
return this.dataSet;
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
removeData(filter) {
|
|
268
|
-
if (!this.dataSet) {
|
|
269
|
-
return;
|
|
270
|
-
}
|
|
271
|
-
var newData = this.dataSet.get({
|
|
272
|
-
filter: function (data) {
|
|
273
|
-
return (filter != null && typeof filter === "function") ? !filter(data) : true;
|
|
274
|
-
}
|
|
275
|
-
});
|
|
276
|
-
this.dataSet.set(newData);
|
|
277
|
-
this.update({
|
|
278
|
-
options: null
|
|
279
|
-
});
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
clearData() {
|
|
283
|
-
this.dataSet && this.dataSet.clear();
|
|
284
|
-
this.update({
|
|
285
|
-
options: null
|
|
286
|
-
});
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
draw() {
|
|
291
|
-
this.canvasLayer.draw();
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
//该函数从mapv/canvas/clear中提取
|
|
295
|
-
clear(context) {
|
|
296
|
-
context && context.clearRect && context.clearRect(0, 0, context.canvas.width, context.canvas.height);
|
|
297
|
-
}
|
|
298
|
-
|
|
299
|
-
}
|