@naivemap/mapbox-gl-echarts-layer 0.4.0-alpha.0 → 0.4.0-alpha.2
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/dist/index.d.ts +2 -2
- package/dist/index.es.js +165 -0
- package/dist/index.umd.js +1 -0
- package/dist/mapbox-gl-echarts-layer/src/EChartsLayer.d.ts +10 -1
- package/dist/mapbox-gl-echarts-layer/src/index.d.ts +1 -1
- package/package.json +7 -7
- package/dist/index.cjs +0 -1
- package/dist/index.js +0 -51
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export * from './mapbox-gl-echarts-layer/src/index'
|
|
2
2
|
export {}
|
|
3
|
-
import
|
|
4
|
-
export default
|
|
3
|
+
import EChartsLayer from './mapbox-gl-echarts-layer/src/index'
|
|
4
|
+
export default EChartsLayer
|
|
5
5
|
export * from './mapbox-gl-echarts-layer/src/index'
|
|
6
6
|
export {}
|
package/dist/index.es.js
ADDED
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
import { getCoordinateSystemDimensions as s, registerCoordinateSystem as a, init as h } from "echarts";
|
|
2
|
+
const d = "gl-layer-echarts";
|
|
3
|
+
class n {
|
|
4
|
+
id;
|
|
5
|
+
dimensions = ["x", "y"];
|
|
6
|
+
_map;
|
|
7
|
+
_mapOffset = [0, 0];
|
|
8
|
+
constructor(e, t) {
|
|
9
|
+
this.id = e, this._map = t;
|
|
10
|
+
}
|
|
11
|
+
create(e) {
|
|
12
|
+
e.eachSeries((t) => {
|
|
13
|
+
t.get("coordinateSystem") === this.id && (t.coordinateSystem = new n(this.id, this._map));
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
dataToPoint(e) {
|
|
17
|
+
const t = this._map.project(e), i = this._mapOffset;
|
|
18
|
+
return [t.x - i[0], t.y - i[1]];
|
|
19
|
+
}
|
|
20
|
+
pointToData(e) {
|
|
21
|
+
const t = this._mapOffset, i = this._map.unproject([e[0] + t[0], e[1] + t[1]]);
|
|
22
|
+
return [i.lng, i.lat];
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
class c {
|
|
26
|
+
_container;
|
|
27
|
+
_map;
|
|
28
|
+
_ec;
|
|
29
|
+
_coordSystemName;
|
|
30
|
+
_ecOption;
|
|
31
|
+
constructor(e) {
|
|
32
|
+
this._coordSystemName = d + "-" + Math.random().toString(16).substring(2), this._ecOption = e;
|
|
33
|
+
}
|
|
34
|
+
onAdd(e) {
|
|
35
|
+
if (this._map = e, this._createLayerContainer(), !s(this._coordSystemName)) {
|
|
36
|
+
const t = new n(this._coordSystemName, this._map);
|
|
37
|
+
a(this._coordSystemName, t);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
onRemove() {
|
|
41
|
+
this._ec?.dispose(), this._removeLayerContainer();
|
|
42
|
+
}
|
|
43
|
+
setOption(e, t) {
|
|
44
|
+
this._ecOption = e, this._ec?.setOption(e, t);
|
|
45
|
+
}
|
|
46
|
+
render() {
|
|
47
|
+
if (this._container || this._createLayerContainer(), !this._ec) {
|
|
48
|
+
this._ec = h(this._container), this._prepareECharts(), this._ec.setOption(this._ecOption);
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
if (this._map.isMoving()) {
|
|
52
|
+
this._ec.clear();
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
this._ec.resize({
|
|
56
|
+
width: this._map.getCanvas().width,
|
|
57
|
+
height: this._map.getCanvas().height
|
|
58
|
+
}), this._prepareECharts(), this._ec.setOption(this._ecOption);
|
|
59
|
+
}
|
|
60
|
+
_prepareECharts() {
|
|
61
|
+
const e = this._ecOption.series;
|
|
62
|
+
if (e)
|
|
63
|
+
for (let t = e.length - 1; t >= 0; t--)
|
|
64
|
+
e[t].coordinateSystem = this._coordSystemName;
|
|
65
|
+
}
|
|
66
|
+
_createLayerContainer() {
|
|
67
|
+
const e = this._map.getCanvasContainer();
|
|
68
|
+
this._container = document.createElement("div"), this._container.style.width = this._map.getCanvas().style.width, this._container.style.height = this._map.getCanvas().style.height, e.appendChild(this._container);
|
|
69
|
+
}
|
|
70
|
+
_removeLayerContainer() {
|
|
71
|
+
this._container && this._container.parentNode?.removeChild(this._container);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
function _(r) {
|
|
75
|
+
if (Array.isArray(r))
|
|
76
|
+
return r;
|
|
77
|
+
const e = r?.defaultProjectionData?.mainMatrix;
|
|
78
|
+
if (e)
|
|
79
|
+
return e;
|
|
80
|
+
throw new Error("Unable to resolve projection matrix from render arguments.");
|
|
81
|
+
}
|
|
82
|
+
function p(r, e) {
|
|
83
|
+
let t;
|
|
84
|
+
return {
|
|
85
|
+
id: e.id,
|
|
86
|
+
type: "custom",
|
|
87
|
+
renderingMode: e.renderingMode ?? "2d",
|
|
88
|
+
onAdd(i, o) {
|
|
89
|
+
t = i, r.onAdd(i, o);
|
|
90
|
+
},
|
|
91
|
+
onRemove(i, o) {
|
|
92
|
+
r.onRemove(i, o), t = void 0;
|
|
93
|
+
},
|
|
94
|
+
render(i, o) {
|
|
95
|
+
if (!t)
|
|
96
|
+
throw new Error("Layer adaptor render invoked before onAdd.");
|
|
97
|
+
r.render({
|
|
98
|
+
map: t,
|
|
99
|
+
gl: i,
|
|
100
|
+
matrix: (e.resolveMatrix ?? _)(o),
|
|
101
|
+
rawArgs: o,
|
|
102
|
+
prepareStencilMask: e.prepareStencilMask ? () => e.prepareStencilMask(t) : void 0
|
|
103
|
+
});
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
const m = p;
|
|
108
|
+
class g {
|
|
109
|
+
id;
|
|
110
|
+
/**
|
|
111
|
+
* @ignore
|
|
112
|
+
*/
|
|
113
|
+
type;
|
|
114
|
+
/**
|
|
115
|
+
* @ignore
|
|
116
|
+
*/
|
|
117
|
+
renderingMode;
|
|
118
|
+
_core;
|
|
119
|
+
_adaptor;
|
|
120
|
+
/**
|
|
121
|
+
* @param id - A unique layer id
|
|
122
|
+
* @param ecOption - The ECharts option object used to configure the visualization.
|
|
123
|
+
* @see https://echarts.apache.org/en/option.html
|
|
124
|
+
*/
|
|
125
|
+
constructor(e, t) {
|
|
126
|
+
this.id = e, this.type = "custom", this.renderingMode = "2d", this._core = new c(t), this._adaptor = m(this._core, {
|
|
127
|
+
id: e,
|
|
128
|
+
renderingMode: this.renderingMode
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
/**
|
|
132
|
+
* @ignore
|
|
133
|
+
*/
|
|
134
|
+
onAdd(e, t) {
|
|
135
|
+
this._adaptor.onAdd(e, t);
|
|
136
|
+
}
|
|
137
|
+
/**
|
|
138
|
+
* @ignore
|
|
139
|
+
*/
|
|
140
|
+
onRemove(e, t) {
|
|
141
|
+
this._adaptor.onRemove(e, t);
|
|
142
|
+
}
|
|
143
|
+
/**
|
|
144
|
+
* Updates the ECharts visualization with a new configuration.
|
|
145
|
+
* This is the primary method for dynamically changing the displayed data or styles.
|
|
146
|
+
*
|
|
147
|
+
* @param option - The new ECharts option object to apply.
|
|
148
|
+
* @param notMerge - If true, the new options will completely replace the existing ones.
|
|
149
|
+
* If false or undefined, the new options will be merged with the old ones.
|
|
150
|
+
* Defaults to `false`.
|
|
151
|
+
* @see https://echarts.apache.org/en/api.html#echartsInstance.setOption
|
|
152
|
+
*/
|
|
153
|
+
setOption(e, t) {
|
|
154
|
+
this._core.setOption(e, t);
|
|
155
|
+
}
|
|
156
|
+
/**
|
|
157
|
+
* @ignore
|
|
158
|
+
*/
|
|
159
|
+
render(e, t) {
|
|
160
|
+
this._adaptor.render(e, t);
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
export {
|
|
164
|
+
g as default
|
|
165
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(n,s){typeof exports=="object"&&typeof module<"u"?module.exports=s(require("echarts")):typeof define=="function"&&define.amd?define(["echarts"],s):(n=typeof globalThis<"u"?globalThis:n||self,n.EChartsLayer=s(n.echarts))})(this,function(n){"use strict";const s="gl-layer-echarts";class a{id;dimensions=["x","y"];_map;_mapOffset=[0,0];constructor(e,t){this.id=e,this._map=t}create(e){e.eachSeries(t=>{t.get("coordinateSystem")===this.id&&(t.coordinateSystem=new a(this.id,this._map))})}dataToPoint(e){const t=this._map.project(e),i=this._mapOffset;return[t.x-i[0],t.y-i[1]]}pointToData(e){const t=this._mapOffset,i=this._map.unproject([e[0]+t[0],e[1]+t[1]]);return[i.lng,i.lat]}}class h{_container;_map;_ec;_coordSystemName;_ecOption;constructor(e){this._coordSystemName=s+"-"+Math.random().toString(16).substring(2),this._ecOption=e}onAdd(e){if(this._map=e,this._createLayerContainer(),!n.getCoordinateSystemDimensions(this._coordSystemName)){const t=new a(this._coordSystemName,this._map);n.registerCoordinateSystem(this._coordSystemName,t)}}onRemove(){this._ec?.dispose(),this._removeLayerContainer()}setOption(e,t){this._ecOption=e,this._ec?.setOption(e,t)}render(){if(this._container||this._createLayerContainer(),!this._ec){this._ec=n.init(this._container),this._prepareECharts(),this._ec.setOption(this._ecOption);return}if(this._map.isMoving()){this._ec.clear();return}this._ec.resize({width:this._map.getCanvas().width,height:this._map.getCanvas().height}),this._prepareECharts(),this._ec.setOption(this._ecOption)}_prepareECharts(){const e=this._ecOption.series;if(e)for(let t=e.length-1;t>=0;t--)e[t].coordinateSystem=this._coordSystemName}_createLayerContainer(){const e=this._map.getCanvasContainer();this._container=document.createElement("div"),this._container.style.width=this._map.getCanvas().style.width,this._container.style.height=this._map.getCanvas().style.height,e.appendChild(this._container)}_removeLayerContainer(){this._container&&this._container.parentNode?.removeChild(this._container)}}function d(r){if(Array.isArray(r))return r;const e=r?.defaultProjectionData?.mainMatrix;if(e)return e;throw new Error("Unable to resolve projection matrix from render arguments.")}function c(r,e){let t;return{id:e.id,type:"custom",renderingMode:e.renderingMode??"2d",onAdd(i,o){t=i,r.onAdd(i,o)},onRemove(i,o){r.onRemove(i,o),t=void 0},render(i,o){if(!t)throw new Error("Layer adaptor render invoked before onAdd.");r.render({map:t,gl:i,matrix:(e.resolveMatrix??d)(o),rawArgs:o,prepareStencilMask:e.prepareStencilMask?()=>e.prepareStencilMask(t):void 0})}}}const p=c;class _{id;type;renderingMode;_core;_adaptor;constructor(e,t){this.id=e,this.type="custom",this.renderingMode="2d",this._core=new h(t),this._adaptor=p(this._core,{id:e,renderingMode:this.renderingMode})}onAdd(e,t){this._adaptor.onAdd(e,t)}onRemove(e,t){this._adaptor.onRemove(e,t)}setOption(e,t){this._core.setOption(e,t)}render(e,t){this._adaptor.render(e,t)}}return _});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ECOption } from '
|
|
1
|
+
import { ECOption } from '@naivemap/echarts-layer-core';
|
|
2
2
|
import { CustomLayerInterface, Map } from 'mapbox-gl';
|
|
3
3
|
/**
|
|
4
4
|
* A custom Mapbox GL JS layer that renders Apache ECharts visualizations.
|
|
@@ -21,7 +21,13 @@ export default class EChartsLayer implements CustomLayerInterface {
|
|
|
21
21
|
* @see https://echarts.apache.org/en/option.html
|
|
22
22
|
*/
|
|
23
23
|
constructor(id: string, ecOption: ECOption);
|
|
24
|
+
/**
|
|
25
|
+
* @ignore
|
|
26
|
+
*/
|
|
24
27
|
onAdd(map: Map, gl: WebGLRenderingContext): void;
|
|
28
|
+
/**
|
|
29
|
+
* @ignore
|
|
30
|
+
*/
|
|
25
31
|
onRemove(map: Map, gl: WebGLRenderingContext): void;
|
|
26
32
|
/**
|
|
27
33
|
* Updates the ECharts visualization with a new configuration.
|
|
@@ -34,5 +40,8 @@ export default class EChartsLayer implements CustomLayerInterface {
|
|
|
34
40
|
* @see https://echarts.apache.org/en/api.html#echartsInstance.setOption
|
|
35
41
|
*/
|
|
36
42
|
setOption(option: ECOption, notMerge?: boolean): void;
|
|
43
|
+
/**
|
|
44
|
+
* @ignore
|
|
45
|
+
*/
|
|
37
46
|
render(gl: WebGLRenderingContext, args: unknown): void;
|
|
38
47
|
}
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@naivemap/mapbox-gl-echarts-layer",
|
|
3
|
-
"version": "0.4.0-alpha.
|
|
3
|
+
"version": "0.4.0-alpha.2",
|
|
4
4
|
"description": "A Mapbox GL JS layer to integrate Apache ECharts' Lines and Scatter charts.",
|
|
5
|
-
"main": "./dist/index.
|
|
6
|
-
"module": "./dist/index.js",
|
|
5
|
+
"main": "./dist/index.umd.js",
|
|
6
|
+
"module": "./dist/index.es.js",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"exports": {
|
|
9
9
|
".": {
|
|
10
10
|
"types": "./dist/index.d.ts",
|
|
11
|
-
"import": "./dist/index.js",
|
|
12
|
-
"require": "./dist/index.
|
|
11
|
+
"import": "./dist/index.es.js",
|
|
12
|
+
"require": "./dist/index.umd.js"
|
|
13
13
|
}
|
|
14
14
|
},
|
|
15
15
|
"files": [
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
},
|
|
31
31
|
"sideEffects": false,
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@naivemap/
|
|
34
|
-
"@naivemap/
|
|
33
|
+
"@naivemap/map-gl-layer-adaptor": "0.2.0-alpha.1",
|
|
34
|
+
"@naivemap/echarts-layer-core": "0.2.0-alpha.1"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
37
37
|
"echarts": "^5.0.0",
|
package/dist/index.cjs
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";const t=require("@naivemap/echarts-layer-core"),o=require("@naivemap/map-gl-layer-adaptor");class s{id;type;renderingMode;_core;_adaptor;constructor(e,r){this.id=e,this.type="custom",this.renderingMode="2d",this._core=new t(r),this._adaptor=o.createMapboxLayerAdaptor(this._core,{id:e,renderingMode:this.renderingMode})}onAdd(e,r){this._adaptor.onAdd(e,r)}onRemove(e,r){this._adaptor.onRemove(e,r)}setOption(e,r){this._core.setOption(e,r)}render(e,r){this._adaptor.render(e,r)}}module.exports=s;
|
package/dist/index.js
DELETED
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import t from "@naivemap/echarts-layer-core";
|
|
2
|
-
import { createMapboxLayerAdaptor as o } from "@naivemap/map-gl-layer-adaptor";
|
|
3
|
-
class s {
|
|
4
|
-
id;
|
|
5
|
-
/**
|
|
6
|
-
* @ignore
|
|
7
|
-
*/
|
|
8
|
-
type;
|
|
9
|
-
/**
|
|
10
|
-
* @ignore
|
|
11
|
-
*/
|
|
12
|
-
renderingMode;
|
|
13
|
-
_core;
|
|
14
|
-
_adaptor;
|
|
15
|
-
/**
|
|
16
|
-
* @param id - A unique layer id
|
|
17
|
-
* @param ecOption - The ECharts option object used to configure the visualization.
|
|
18
|
-
* @see https://echarts.apache.org/en/option.html
|
|
19
|
-
*/
|
|
20
|
-
constructor(e, r) {
|
|
21
|
-
this.id = e, this.type = "custom", this.renderingMode = "2d", this._core = new t(r), this._adaptor = o(this._core, {
|
|
22
|
-
id: e,
|
|
23
|
-
renderingMode: this.renderingMode
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
onAdd(e, r) {
|
|
27
|
-
this._adaptor.onAdd(e, r);
|
|
28
|
-
}
|
|
29
|
-
onRemove(e, r) {
|
|
30
|
-
this._adaptor.onRemove(e, r);
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* Updates the ECharts visualization with a new configuration.
|
|
34
|
-
* This is the primary method for dynamically changing the displayed data or styles.
|
|
35
|
-
*
|
|
36
|
-
* @param option - The new ECharts option object to apply.
|
|
37
|
-
* @param notMerge - If true, the new options will completely replace the existing ones.
|
|
38
|
-
* If false or undefined, the new options will be merged with the old ones.
|
|
39
|
-
* Defaults to `false`.
|
|
40
|
-
* @see https://echarts.apache.org/en/api.html#echartsInstance.setOption
|
|
41
|
-
*/
|
|
42
|
-
setOption(e, r) {
|
|
43
|
-
this._core.setOption(e, r);
|
|
44
|
-
}
|
|
45
|
-
render(e, r) {
|
|
46
|
-
this._adaptor.render(e, r);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
export {
|
|
50
|
-
s as default
|
|
51
|
-
};
|