gridviz 3.0.35 → 3.0.37
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 +129 -129
- package/dist/gridviz.js +21056 -17487
- package/dist/gridviz.min.js +2 -2
- package/package.json +74 -74
- package/src/button/Button.js +67 -67
- package/src/button/FullscreenButton.js +121 -121
- package/src/button/ZoomButtons.js +103 -103
- package/src/core/Dataset.js +232 -154
- package/src/core/Drawable.js +78 -78
- package/src/core/GeoCanvas.js +443 -443
- package/src/core/Layer.js +23 -23
- package/src/core/Legend.js +108 -108
- package/src/core/Map.js +650 -568
- package/src/core/MultiResolutionDataset.js +93 -93
- package/src/core/Style.js +98 -98
- package/src/core/Tooltip.js +182 -182
- package/src/dataset/COGeo.js +25 -25
- package/src/dataset/CSVGrid.js +112 -112
- package/src/dataset/GeoTIFF.js +122 -122
- package/src/dataset/JSGrid.js +55 -55
- package/src/dataset/TiledGrid.js +311 -302
- package/src/dataset/worker.js +18 -18
- package/src/index.js +79 -79
- package/src/layer/BackgroundLayer.js +173 -173
- package/src/layer/BackgroundLayerImage.js +81 -81
- package/src/layer/BackgroundLayerWMS.js +104 -104
- package/src/layer/GeoJSONLayer.js +276 -276
- package/src/layer/GridLayer.js +166 -166
- package/src/layer/LabelLayer.js +194 -194
- package/src/legend/ColorCategoryLegend.js +109 -109
- package/src/legend/ColorDiscreteLegend.js +100 -100
- package/src/legend/ColorLegend.js +115 -115
- package/src/legend/OrientationLegend.js +89 -89
- package/src/legend/SizeLegend.js +224 -224
- package/src/legend/TernaryLegend.js +302 -302
- package/src/style/CompositionStyle.js +291 -291
- package/src/style/DotDensityStyle.js +133 -133
- package/src/style/ImageStyle.js +100 -100
- package/src/style/Interpolator.js +258 -258
- package/src/style/IsoFenceStyle.js +217 -217
- package/src/style/JoyPlotStyle.js +180 -180
- package/src/style/LegoStyle.js +132 -132
- package/src/style/MosaicStyle.js +99 -99
- package/src/style/NinjaStarStyle.js +102 -102
- package/src/style/PillarStyle.js +207 -207
- package/src/style/SegmentStyle.js +105 -105
- package/src/style/ShadingRayStyle.js +280 -280
- package/src/style/ShadingStyle.js +72 -72
- package/src/style/ShapeColorSizeStyle.js +147 -147
- package/src/style/SideCategoryStyle.js +112 -112
- package/src/style/SideStyle.js +217 -217
- package/src/style/SideTanakaStyle.js +154 -154
- package/src/style/SquareColorCategoryWebGLStyle.js +311 -294
- package/src/style/SquareColorWebGLStyle.js +126 -126
- package/src/style/StrokeStyle.js +135 -135
- package/src/style/TextStyle.js +110 -110
- package/src/style/TimeSeriesStyle.js +222 -222
- package/src/utils/WebGLRectangleColoring.js +106 -106
- package/src/utils/WebGLSquareColoring.js +114 -118
- package/src/utils/WebGLSquareColoringAdvanced.js +223 -227
- package/src/utils/WebGLSquareColoringKS.js +153 -153
- package/src/utils/scale.js +255 -255
- package/src/utils/stretching.js +120 -120
- package/src/utils/ternary.js +208 -208
- package/src/utils/utils.js +125 -125
- package/src/utils/webGLUtils.js +178 -73
- package/src/utils/zoomUtils.js +142 -142
package/src/layer/GridLayer.js
CHANGED
|
@@ -1,166 +1,166 @@
|
|
|
1
|
-
//@ts-check
|
|
2
|
-
'use strict'
|
|
3
|
-
|
|
4
|
-
import { Layer } from '../core/Layer.js'
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* A layer, which specifies a dataset to be shown with specified styles.
|
|
8
|
-
*
|
|
9
|
-
* @module layer
|
|
10
|
-
* @author Joseph Davies, Julien Gaffuri
|
|
11
|
-
*/
|
|
12
|
-
export class GridLayer extends Layer {
|
|
13
|
-
/**
|
|
14
|
-
* @param {import("../core/Dataset").Dataset|import("../core/MultiResolutionDataset").MultiResolutionDataset} dataset The dataset to show.
|
|
15
|
-
* @param {Array.<import("../core/Style").Style>} styles The styles, ordered in drawing order.
|
|
16
|
-
* @param {{visible?:function(number):boolean,alpha?:function(number):number,blendOperation?:function(number):GlobalCompositeOperation,minPixelsPerCell?:number,cellInfoHTML?:'none'|function(import("../core/Dataset").Cell):string}} opts
|
|
17
|
-
*/
|
|
18
|
-
constructor(dataset, styles, opts = {}) {
|
|
19
|
-
super(opts)
|
|
20
|
-
opts = opts || {}
|
|
21
|
-
|
|
22
|
-
/** @type {import("../core/Dataset").Dataset|import("../core/MultiResolutionDataset").MultiResolutionDataset} */
|
|
23
|
-
this.dataset = dataset
|
|
24
|
-
|
|
25
|
-
/** @type {Array.<import("../core/Style").Style>} */
|
|
26
|
-
this.styles = styles
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* This parameter is used when the dataset is a MultiResolutionDataset.
|
|
30
|
-
* It defines the minimum number of pixels a grid cell should have to select the dataset to display based on its resolution.
|
|
31
|
-
* A low value, means that the map will be more detailled (smaller cells).
|
|
32
|
-
* A high value, means that the map will be less detailled (larger cells).
|
|
33
|
-
* This value should be higher than 1, otherwise it means a grid cell is smaller than the screen resolution.
|
|
34
|
-
* For more complex cell representations that require some more map space, this value should be higher.
|
|
35
|
-
* @type {number} */
|
|
36
|
-
this.minPixelsPerCell = opts.minPixelsPerCell || 3
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* The function returning cell information as HTML.
|
|
40
|
-
* This is typically used for tooltip information.
|
|
41
|
-
* Set to 'none' to disable cell info.
|
|
42
|
-
* @type {'none'|function(import("../core/Dataset").Cell, number):string} */
|
|
43
|
-
this.cellInfoHTML = opts.cellInfoHTML || GridLayer.defaultCellInfoHTML
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
/** */
|
|
47
|
-
draw(geoCanvas, legend) {
|
|
48
|
-
//get zoom level
|
|
49
|
-
const z = geoCanvas.view.z
|
|
50
|
-
const ctx = geoCanvas.offscreenCtx
|
|
51
|
-
|
|
52
|
-
//get layer dataset component
|
|
53
|
-
/** @type {import('../core/Dataset.js').Dataset|undefined} */
|
|
54
|
-
const dsc = this.getDataset(z)
|
|
55
|
-
if (!dsc) return
|
|
56
|
-
|
|
57
|
-
//launch data download, if necessary
|
|
58
|
-
dsc.getData(geoCanvas.extGeo)
|
|
59
|
-
|
|
60
|
-
//update dataset view cache
|
|
61
|
-
dsc.updateViewCache(geoCanvas.extGeo)
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
//set layer alpha and blend mode
|
|
65
|
-
if (this.alpha || this.blendOperation) {
|
|
66
|
-
ctx.save()
|
|
67
|
-
if (this.alpha) ctx.globalAlpha = this.alpha(z)
|
|
68
|
-
if (this.blendOperation) ctx.globalCompositeOperation = this.blendOperation(z)
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
//draw cells, style by style
|
|
72
|
-
for (const s of this.styles) {
|
|
73
|
-
//check if style is visible
|
|
74
|
-
if (s.visible && !s.visible(z)) continue
|
|
75
|
-
|
|
76
|
-
// set style alpha and blend mode
|
|
77
|
-
//TODO: multiply style alpha by layer alpha ?
|
|
78
|
-
if (s.alpha || s.blendOperation) {
|
|
79
|
-
ctx.save()
|
|
80
|
-
if (s.alpha) ctx.globalAlpha = s.alpha(z)
|
|
81
|
-
if (s.blendOperation) ctx.globalCompositeOperation = s.blendOperation(z)
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
//set affin transform to draw with geographical coordinates
|
|
85
|
-
geoCanvas.setCanvasTransform()
|
|
86
|
-
|
|
87
|
-
//draw with style
|
|
88
|
-
s.draw(dsc.getViewCache(), geoCanvas, dsc.getResolution())
|
|
89
|
-
|
|
90
|
-
//draw style filter
|
|
91
|
-
if (s.filterColor) s.drawFilter(geoCanvas)
|
|
92
|
-
|
|
93
|
-
//restore default alpha and blend operation - before style change
|
|
94
|
-
if (s.alpha || s.blendOperation) ctx.restore()
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
//restore default alpha and blend operation - before layer change
|
|
98
|
-
if (this.alpha || this.blendOperation) ctx.restore()
|
|
99
|
-
|
|
100
|
-
//add legend element
|
|
101
|
-
if (legend) {
|
|
102
|
-
for (const s of this.styles) {
|
|
103
|
-
//check if style is visible
|
|
104
|
-
if (s.visible && !s.visible(z)) continue
|
|
105
|
-
GridLayer.addLegends(legend, s.legends)
|
|
106
|
-
|
|
107
|
-
//case for styles of styles, like kernel smoothing
|
|
108
|
-
//TODO do better
|
|
109
|
-
if (s['styles']) {
|
|
110
|
-
for (const s2 of s['styles']) {
|
|
111
|
-
if (s2.visible && !s2.visible(z)) continue
|
|
112
|
-
GridLayer.addLegends(legend, s2.legends)
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
/** @private */
|
|
120
|
-
static addLegends(legendComp, lg) {
|
|
121
|
-
if (Array.isArray(lg)) for (const lg_ of lg) this.addLegends(legendComp, lg_)
|
|
122
|
-
else legendComp.node().append(lg.div.node())
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
/**
|
|
126
|
-
* Return the relevant dataset component for a specified zoom.
|
|
127
|
-
*
|
|
128
|
-
* @param {number} z
|
|
129
|
-
* @returns {import("../core/Dataset").Dataset|undefined}
|
|
130
|
-
* */
|
|
131
|
-
getDataset(z) {
|
|
132
|
-
return this.dataset.getDataset(z, this.minPixelsPerCell)
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
/**
|
|
136
|
-
* Set/get style stack.
|
|
137
|
-
*
|
|
138
|
-
* @param {undefined|import("../core/Style").Style|Array.<import("../core/Style").Style>} styles
|
|
139
|
-
* @returns { this | Array.<import("../core/Style").Style> }
|
|
140
|
-
*/
|
|
141
|
-
styles_(styles) {
|
|
142
|
-
if (arguments.length === 0) return this.styles
|
|
143
|
-
if (arguments.length === 1)
|
|
144
|
-
if (Array.isArray(styles)) this.styles = styles
|
|
145
|
-
else this.styles = [styles]
|
|
146
|
-
else this.styles = arguments
|
|
147
|
-
return this
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
/**
|
|
151
|
-
* The default function returning cell information as HTML.
|
|
152
|
-
* This is typically used for tooltip information.
|
|
153
|
-
*
|
|
154
|
-
* @param {import("../core/Dataset").Cell} cell
|
|
155
|
-
* @returns {string}
|
|
156
|
-
*/
|
|
157
|
-
static defaultCellInfoHTML(cell) {
|
|
158
|
-
const buf = []
|
|
159
|
-
for (const key of Object.keys(cell)) {
|
|
160
|
-
if (key === 'x') continue
|
|
161
|
-
if (key === 'y') continue
|
|
162
|
-
buf.push('<b>', key, '</b>', ' : ', cell[key], '<br>')
|
|
163
|
-
}
|
|
164
|
-
return buf.join('')
|
|
165
|
-
}
|
|
166
|
-
}
|
|
1
|
+
//@ts-check
|
|
2
|
+
'use strict'
|
|
3
|
+
|
|
4
|
+
import { Layer } from '../core/Layer.js'
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* A layer, which specifies a dataset to be shown with specified styles.
|
|
8
|
+
*
|
|
9
|
+
* @module layer
|
|
10
|
+
* @author Joseph Davies, Julien Gaffuri
|
|
11
|
+
*/
|
|
12
|
+
export class GridLayer extends Layer {
|
|
13
|
+
/**
|
|
14
|
+
* @param {import("../core/Dataset").Dataset|import("../core/MultiResolutionDataset").MultiResolutionDataset} dataset The dataset to show.
|
|
15
|
+
* @param {Array.<import("../core/Style").Style>} styles The styles, ordered in drawing order.
|
|
16
|
+
* @param {{visible?:function(number):boolean,alpha?:function(number):number,blendOperation?:function(number):GlobalCompositeOperation,minPixelsPerCell?:number,cellInfoHTML?:'none'|function(import("../core/Dataset").Cell):string}} opts
|
|
17
|
+
*/
|
|
18
|
+
constructor(dataset, styles, opts = {}) {
|
|
19
|
+
super(opts)
|
|
20
|
+
opts = opts || {}
|
|
21
|
+
|
|
22
|
+
/** @type {import("../core/Dataset").Dataset|import("../core/MultiResolutionDataset").MultiResolutionDataset} */
|
|
23
|
+
this.dataset = dataset
|
|
24
|
+
|
|
25
|
+
/** @type {Array.<import("../core/Style").Style>} */
|
|
26
|
+
this.styles = styles
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* This parameter is used when the dataset is a MultiResolutionDataset.
|
|
30
|
+
* It defines the minimum number of pixels a grid cell should have to select the dataset to display based on its resolution.
|
|
31
|
+
* A low value, means that the map will be more detailled (smaller cells).
|
|
32
|
+
* A high value, means that the map will be less detailled (larger cells).
|
|
33
|
+
* This value should be higher than 1, otherwise it means a grid cell is smaller than the screen resolution.
|
|
34
|
+
* For more complex cell representations that require some more map space, this value should be higher.
|
|
35
|
+
* @type {number} */
|
|
36
|
+
this.minPixelsPerCell = opts.minPixelsPerCell || 3
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* The function returning cell information as HTML.
|
|
40
|
+
* This is typically used for tooltip information.
|
|
41
|
+
* Set to 'none' to disable cell info.
|
|
42
|
+
* @type {'none'|function(import("../core/Dataset").Cell, number):string} */
|
|
43
|
+
this.cellInfoHTML = opts.cellInfoHTML || GridLayer.defaultCellInfoHTML
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/** */
|
|
47
|
+
draw(geoCanvas, legend) {
|
|
48
|
+
//get zoom level
|
|
49
|
+
const z = geoCanvas.view.z
|
|
50
|
+
const ctx = geoCanvas.offscreenCtx
|
|
51
|
+
|
|
52
|
+
//get layer dataset component
|
|
53
|
+
/** @type {import('../core/Dataset.js').Dataset|undefined} */
|
|
54
|
+
const dsc = this.getDataset(z)
|
|
55
|
+
if (!dsc) return
|
|
56
|
+
|
|
57
|
+
//launch data download, if necessary
|
|
58
|
+
dsc.getData(geoCanvas.extGeo)
|
|
59
|
+
|
|
60
|
+
//update dataset view cache
|
|
61
|
+
dsc.updateViewCache(geoCanvas.extGeo)
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
//set layer alpha and blend mode
|
|
65
|
+
if (this.alpha || this.blendOperation) {
|
|
66
|
+
ctx.save()
|
|
67
|
+
if (this.alpha) ctx.globalAlpha = this.alpha(z)
|
|
68
|
+
if (this.blendOperation) ctx.globalCompositeOperation = this.blendOperation(z)
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
//draw cells, style by style
|
|
72
|
+
for (const s of this.styles) {
|
|
73
|
+
//check if style is visible
|
|
74
|
+
if (s.visible && !s.visible(z)) continue
|
|
75
|
+
|
|
76
|
+
// set style alpha and blend mode
|
|
77
|
+
//TODO: multiply style alpha by layer alpha ?
|
|
78
|
+
if (s.alpha || s.blendOperation) {
|
|
79
|
+
ctx.save()
|
|
80
|
+
if (s.alpha) ctx.globalAlpha = s.alpha(z)
|
|
81
|
+
if (s.blendOperation) ctx.globalCompositeOperation = s.blendOperation(z)
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
//set affin transform to draw with geographical coordinates
|
|
85
|
+
geoCanvas.setCanvasTransform()
|
|
86
|
+
|
|
87
|
+
//draw with style
|
|
88
|
+
s.draw(dsc.getViewCache(), geoCanvas, dsc.getResolution())
|
|
89
|
+
|
|
90
|
+
//draw style filter
|
|
91
|
+
if (s.filterColor) s.drawFilter(geoCanvas)
|
|
92
|
+
|
|
93
|
+
//restore default alpha and blend operation - before style change
|
|
94
|
+
if (s.alpha || s.blendOperation) ctx.restore()
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
//restore default alpha and blend operation - before layer change
|
|
98
|
+
if (this.alpha || this.blendOperation) ctx.restore()
|
|
99
|
+
|
|
100
|
+
//add legend element
|
|
101
|
+
if (legend) {
|
|
102
|
+
for (const s of this.styles) {
|
|
103
|
+
//check if style is visible
|
|
104
|
+
if (s.visible && !s.visible(z)) continue
|
|
105
|
+
GridLayer.addLegends(legend, s.legends)
|
|
106
|
+
|
|
107
|
+
//case for styles of styles, like kernel smoothing
|
|
108
|
+
//TODO do better
|
|
109
|
+
if (s['styles']) {
|
|
110
|
+
for (const s2 of s['styles']) {
|
|
111
|
+
if (s2.visible && !s2.visible(z)) continue
|
|
112
|
+
GridLayer.addLegends(legend, s2.legends)
|
|
113
|
+
}
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/** @private */
|
|
120
|
+
static addLegends(legendComp, lg) {
|
|
121
|
+
if (Array.isArray(lg)) for (const lg_ of lg) this.addLegends(legendComp, lg_)
|
|
122
|
+
else legendComp.node().append(lg.div.node())
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* Return the relevant dataset component for a specified zoom.
|
|
127
|
+
*
|
|
128
|
+
* @param {number} z
|
|
129
|
+
* @returns {import("../core/Dataset").Dataset|undefined}
|
|
130
|
+
* */
|
|
131
|
+
getDataset(z) {
|
|
132
|
+
return this.dataset.getDataset(z, this.minPixelsPerCell)
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/**
|
|
136
|
+
* Set/get style stack.
|
|
137
|
+
*
|
|
138
|
+
* @param {undefined|import("../core/Style").Style|Array.<import("../core/Style").Style>} styles
|
|
139
|
+
* @returns { this | Array.<import("../core/Style").Style> }
|
|
140
|
+
*/
|
|
141
|
+
styles_(styles) {
|
|
142
|
+
if (arguments.length === 0) return this.styles
|
|
143
|
+
if (arguments.length === 1)
|
|
144
|
+
if (Array.isArray(styles)) this.styles = styles
|
|
145
|
+
else this.styles = [styles]
|
|
146
|
+
else this.styles = arguments
|
|
147
|
+
return this
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
/**
|
|
151
|
+
* The default function returning cell information as HTML.
|
|
152
|
+
* This is typically used for tooltip information.
|
|
153
|
+
*
|
|
154
|
+
* @param {import("../core/Dataset").Cell} cell
|
|
155
|
+
* @returns {string}
|
|
156
|
+
*/
|
|
157
|
+
static defaultCellInfoHTML(cell) {
|
|
158
|
+
const buf = []
|
|
159
|
+
for (const key of Object.keys(cell)) {
|
|
160
|
+
if (key === 'x') continue
|
|
161
|
+
if (key === 'y') continue
|
|
162
|
+
buf.push('<b>', key, '</b>', ' : ', cell[key], '<br>')
|
|
163
|
+
}
|
|
164
|
+
return buf.join('')
|
|
165
|
+
}
|
|
166
|
+
}
|