Skip to content

Commit 56525c3

Browse files
zakjanzakjan
committed
First version
1 parent 3bb3622 commit 56525c3

20 files changed

+3800
-0
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
/node_modules
2+
/dist

‎CHANGELOG.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Changelog
2+
3+
## 1.0.4
4+
5+
- fix low zoom levels
6+
7+
## 1.0.3
8+
9+
- support rendering multiple copies of the map at low zoom levels #3 (previous implementation was incorrect)
10+
11+
## 1.0.2
12+
13+
- support rendering multiple copies of the map at low zoom levels #2 (previous implementation was incorrect)
14+
15+
## 1.0.1
16+
17+
- support rendering multiple copies of the map at low zoom levels
18+
- ignore mouse events on deck.gl layer (temporary until picking support is implemented)
19+
20+
## 1.0.0
21+
22+
- initial release

‎LICENSE

Lines changed: 373 additions & 0 deletions
Large diffs are not rendered by default.

‎babel.config.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"presets": [
3+
"@babel/preset-env"
4+
],
5+
"plugins": [
6+
"@babel/plugin-proposal-class-properties",
7+
"@babel/plugin-transform-runtime"
8+
]
9+
}

‎docs/config.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
export function initConfig() {
2+
return {
3+
rotate: false,
4+
raster: {
5+
opacity: 0.2,
6+
},
7+
particle: {
8+
numParticles: 5000,
9+
maxAge: 30,
10+
speedFactor: 10,
11+
color: [255, 255, 255],
12+
width: 2,
13+
opacity: 0.01,
14+
animate: true,
15+
},
16+
};
17+
}
18+
19+
export function initGuiSimple(config, update, { globe } = {}) {
20+
const gui = new dat.GUI();
21+
gui.width = 300;
22+
23+
if (globe) {
24+
gui.add(config, 'rotate').onChange(update);
25+
}
26+
27+
return gui;
28+
}
29+
30+
export function initGui(config, update, { deckgl, globe } = {}) {
31+
const gui = initGuiSimple(config, update, { globe });
32+
33+
const raster = gui.addFolder('RasterLayer');
34+
raster.add(config.raster, 'opacity', 0, 1, 0.01).onChange(update);
35+
raster.open();
36+
37+
const particle = gui.addFolder('ParticleLayer');
38+
particle.add(config.particle, 'numParticles', 0, 100000, 1).onFinishChange(update);
39+
particle.add(config.particle, 'maxAge', 1, 255, 1).onFinishChange(update);
40+
particle.add(config.particle, 'speedFactor', 0.1, 20, 0.1).onChange(update);
41+
particle.addColor(config.particle, 'color').onChange(update);
42+
particle.add(config.particle, 'width', 0.5, 5, 0.5).onChange(update);
43+
particle.add(config.particle, 'opacity', 0, 1, 0.01).onChange(update);
44+
particle.add(config.particle, 'animate').onChange(update);
45+
particle.add({ step: () => deckgl.props.layers.find(x => x.id === 'particle')?.step() }, 'step');
46+
particle.add({ clear: () => deckgl.props.layers.find(x => x.id === 'particle')?.clear() }, 'clear');
47+
particle.open();
48+
}
49+
50+
export function initFpsMeter() {
51+
const stats = new Stats();
52+
stats.showPanel(0);
53+
stats.dom.style.top = '';
54+
stats.dom.style.left = '';
55+
stats.dom.style.right = '0';
56+
stats.dom.style.bottom = '0';
57+
document.body.appendChild(stats.dom);
58+
window.requestAnimationFrame(function updateFps() {
59+
stats.update();
60+
window.requestAnimationFrame(updateFps);
61+
});
62+
}

‎docs/deck.gl-raster.min.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/globe.html

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>deck-gl.particle</title>
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
8+
<script src="https://unpkg.com/[email protected]/build/stats.min.js"></script>
9+
<script src="https://unpkg.com/[email protected]/dist.min.js"></script>
10+
<script src="https://unpkg.com/@luma.gl/[email protected]/dist/dist.min.js"></script>
11+
<script src="./deck.gl-raster.min.js"></script>
12+
<!-- <script src="https://unpkg.com/[email protected]/dist/deck.gl-particle.min.js"></script> -->
13+
<script src="../dist/deck.gl-particle.min.js"></script>
14+
<style>
15+
body {
16+
margin: 0;
17+
background: #000;
18+
}
19+
20+
#deck {
21+
width: 100vw;
22+
height: 100vh;
23+
}
24+
</style>
25+
</head>
26+
27+
<body>
28+
<div id="deck"></div>
29+
30+
<script type="module">
31+
import { initConfig, initGui, initFpsMeter } from './config.js';
32+
33+
const landUrl = 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_land.geojson';
34+
const colormapUrl = 'wind_colormap.png';
35+
const particleUrl = 'wind_data.png';
36+
const rasterUrl = 'wind_data.png';
37+
38+
window.addEventListener('DOMContentLoaded', () => {
39+
const config = initConfig();
40+
41+
const deckgl = new deck.Deck({
42+
parent: document.getElementById('deck'),
43+
initialViewState: {
44+
longitude: -100,
45+
latitude: 30,
46+
zoom: 1.4,
47+
},
48+
controller: true,
49+
views: [
50+
new deck._GlobeView(),
51+
],
52+
layers: [],
53+
_animate: true,
54+
});
55+
56+
// animation
57+
const rotateAnimation = new DeckGlParticle.Animation(() => {
58+
deckgl.setProps({
59+
initialViewState: {
60+
...deckgl.props.initialViewState,
61+
longitude: deckgl.props.initialViewState.longitude + 0.3,
62+
},
63+
});
64+
});
65+
66+
// config
67+
function update() {
68+
deckgl.setProps({
69+
layers: [
70+
new deck.SolidPolygonLayer({
71+
id: 'background',
72+
data: [[[-180, 90], [0, 90], [180, 90], [180, -90], [0, -90], [-180, -90]]],
73+
getPolygon: d => d,
74+
stroked: false,
75+
filled: true,
76+
getFillColor: [26, 26, 26],
77+
}),
78+
new deck['gl-raster'].RasterLayer({
79+
id: 'raster',
80+
images: {
81+
imageRgba: {
82+
data: rasterUrl,
83+
format: luma.GL.RGB,
84+
parameters: {
85+
[luma.GL.TEXTURE_MIN_FILTER]: luma.GL.LINEAR,
86+
[luma.GL.TEXTURE_MAG_FILTER]: luma.GL.LINEAR,
87+
},
88+
},
89+
imageColormap: {
90+
data: colormapUrl,
91+
format: luma.GL.RGBA,
92+
parameters: {
93+
[luma.GL.TEXTURE_MIN_FILTER]: luma.GL.LINEAR,
94+
[luma.GL.TEXTURE_MAG_FILTER]: luma.GL.LINEAR,
95+
},
96+
},
97+
imageMask: {
98+
data: rasterUrl,
99+
format: luma.GL.ALPHA,
100+
parameters: {
101+
[luma.GL.TEXTURE_MIN_FILTER]: luma.GL.LINEAR,
102+
[luma.GL.TEXTURE_MAG_FILTER]: luma.GL.LINEAR,
103+
},
104+
},
105+
},
106+
modules: [
107+
deck['gl-raster'].rgbaImage,
108+
deck['gl-raster'].linearRescale,
109+
deck['gl-raster'].vectorLength,
110+
deck['gl-raster'].colormap,
111+
deck['gl-raster'].maskImage,
112+
],
113+
moduleProps: {
114+
linearRescaleScaler: 2,
115+
linearRescaleOffset: -1,
116+
colormapScaler: 1,
117+
colormapOffset: 0,
118+
},
119+
opacity: config.raster.opacity,
120+
bounds: [-180, -90, 180, 90],
121+
_imageCoordinateSystem: deck.COORDINATE_SYSTEM.LNGLAT,
122+
}),
123+
new deck.GeoJsonLayer({
124+
id: 'land',
125+
data: landUrl,
126+
stroked: true,
127+
filled: false,
128+
getLineColor: [255, 255, 255, 127],
129+
getLineWidth: 1,
130+
lineWidthUnits: 'pixels',
131+
}),
132+
new DeckGlParticle.ParticleLayer({
133+
id: 'particle',
134+
image: particleUrl,
135+
numParticles: config.particle.numParticles,
136+
maxAge: config.particle.maxAge,
137+
speedFactor: config.particle.speedFactor,
138+
getColor: config.particle.color,
139+
getWidth: config.particle.width,
140+
opacity: config.particle.opacity,
141+
animate: config.particle.animate,
142+
}),
143+
],
144+
_animate: config.particle.animate,
145+
});
146+
rotateAnimation.toggle(config.rotate);
147+
}
148+
update();
149+
initGui(config, update, { deckgl, globe: true });
150+
initFpsMeter();
151+
});
152+
</script>
153+
</body>
154+
155+
</html>

‎docs/index.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>deck.gl-particle</title>
7+
<style>
8+
body {
9+
font-family: 'Lucida Grande', sans-serif;
10+
font-size: 12px;
11+
}
12+
</style>
13+
</head>
14+
15+
<body>
16+
<h1>deck.gl-particle</h1>
17+
<ul>
18+
<li><a href="./map.html">Map</a></li>
19+
<li><a href="./globe.html">Globe</a></li>
20+
</ul>
21+
</body>
22+
23+
</html>

0 commit comments

Comments
 (0)