Skip to content

Commit

Permalink
Merge branch 'master' into master
Browse files Browse the repository at this point in the history
  • Loading branch information
sakitam-fdd authored Feb 29, 2024
2 parents df33c7c + 846ad79 commit 7f3d51a
Show file tree
Hide file tree
Showing 106 changed files with 5,685 additions and 1,951 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,5 @@ coverage
*.log
.cache
.DS_Store

cache/
7 changes: 6 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,10 @@ extension to show wind field。
- [x] 色斑图渲染,支持瓦片和单张。
- [x] 多数据源支持(geotiff、灰度图-可解析带 exif 信息、png-多通道浮点数压缩)。
- [x] TimelineSource(时序数据源)支持。
- [ ] 粒子渲染,支持瓦片和单张。
- [x] 粒子渲染,支持瓦片和单张。
- [x] 箭头图层,支持瓦片和单张(矢量数据:风或洋流)。
- [x] 图层拾取。
- [x] 图层掩膜。

https://github.com/sakitam-fdd/wind-layer/assets/19517451/b36b7eea-c647-42ed-91a4-e1f182d0343c

Expand All @@ -40,6 +43,8 @@ https://github.com/sakitam-fdd/wind-layer/assets/19517451/bf27d98e-68ed-4f9c-b1e

https://sakitam-fdd.github.io/wind-layer/particles.mp4

https://sakitam-fdd.github.io/wind-layer/arrow.mp4

https://github.com/sakitam-fdd/wind-layer/assets/19517451/064f0ea4-f72f-4e9a-80e7-7a0097f60013

https://sakitam-fdd.github.io/wind-layer/particles-poc.mp4
Expand Down
Binary file added docs/public/arrow.mp4
Binary file not shown.
1 change: 1 addition & 0 deletions examples/data/china.geojson

Large diffs are not rendered by default.

5 changes: 2 additions & 3 deletions examples/mapbox-tile.html
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@
});

map.on('click', () => {
// imageSource.setUrl('http://localhost:5000/jpeg/1/0/0.jpeg');
// imageSource.update({ url: 'http://localhost:5000/jpeg/1/0/0.jpeg' });
});

const fillLayer = new mapboxWind.Layer('temp', imageSource, {
Expand All @@ -140,7 +140,6 @@
widthSegments: 1,
heightSegments: 1,
displayRange: [-80, 80],
hasMask: false,
picking: true,
renderType: 1,
});
Expand All @@ -156,4 +155,4 @@
});
</script>
</body>
</html>
</html>
132 changes: 39 additions & 93 deletions examples/maptalks-fill.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,9 @@
<script src="https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.js"></script>
<script src="https://cdn.jsdelivr.net/npm//axios/dist/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/dat.gui.js"></script>
<script src="../packages/maptalks/dist/maptalks-wind.js"></script>
<!--<script src="../packages/maptalks/dist/maptalks-wind.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/@sakitam-gis/maptalks-wind/dist/maptalks-wind.js"></script>-->
<script src="maptalks-wind.js"></script>
<script>
const map = new maptalks.Map('map', {
// center: [113.53450137499999, 34.44104525],
Expand Down Expand Up @@ -88,116 +89,61 @@
[77,[205,202,112,255]],
[104,[128,128,128,255]]
],
RAIN: [
[0, [255, 255, 255, 0]],
[1, [255, 255, 255, 0]],
[1, [166, 242, 143, 1]],
[1.5, [166, 242, 143, 1]],
[1.5, [61, 186, 61, 1]],
[7, [61, 186, 61, 1]],
[7, [97, 184, 255, 1]],
[15, [0, 0, 225, 1]],
[40, [250, 0, 250, 1]],
[50, [128, 0, 64, 1]],
]
};

const windInterpolateColor = color.wind.reduce((result, item, key) => result.concat(item[0], 'rgba(' + item[1].join(',') + ')'), []);
const tempInterpolateColor = color.temp.reduce((result, item, key) => result.concat(item[0] - 273.15, 'rgba(' + item[1].join(',') + ')'), []);
const QWInterpolateColor = color.RAIN.reduce((result, item, key) => result.concat(item[0], 'rgba(' + item[1].join(',') + ')'), []);

const image = new maptalks.ImageLayer('id', [{
url : './data/tp1.png',
extent: [109.4, 20, 118, 25.7],
opacity : 1
}])

map.addLayer(image)

const scalarLayer = new MaptalksWind.ScalarLayer('scalar', {
// "type": "jsonArray",
// "data": res,
"type": "image",
"url": "./data/var_ugrd-var_vgrd.png",
"url": "./data/tp1.png",
"extent": [
[-180, 85.051129],
[-180, -85.051129],
[180, 85.051129],
[180, -85.051129],
[109.4, 25.7],
[109.4, 20],
[118, 25.7],
[118, 20],
],
// "width": res[0]['header']['nx'],
// "height": res[0]['header']['ny'] - 1,
// max: 42.25002441406252,
// min: -50.84996643066404,
// "uMin": res[0]['header']['min'],
// "uMax": res[0]['header']['max'],
// "vMin": res[1]['header']['min'],
// "vMax": res[1]['header']['max'],
"width": 1440,
"height": 720,
"uMin": -21.34380340576172,
"uMax": 30.7261962890625,
"vMin": -23.916271209716797,
"vMax": 24.693727493286133,
}, {
styleSpec: {
'fill-color': [
'interpolate',
['linear'],
['get', 'value'],
...windInterpolateColor
],
'opacity': [
'interpolate',
['exponential', 0.5],
['zoom'],
5,
0.5,
8,
1
],
},
renderForm: 'rg',
// colorScale: [
// 'rgba(36, 104, 180, 0.5)',
// 'rgba(60, 157, 194, 0.5)',
// 'rgba(128, 205, 193, 0.5)',
// 'rgba(151, 218, 168, 0.5)',
// 'rgba(198, 231, 181, 0.5)',
// 'rgba(238, 247, 217, 0.5)',
// 'rgba(255, 238, 159, 0.5)',
// 'rgba(252, 217, 125, 0.5)',
// 'rgba(255, 182, 100, 0.5)',
// 'rgba(252, 150, 75, 0.5)',
// 'rgba(250, 112, 52, 0.5)',
// 'rgba(245, 64, 32, 0.5)',
// 'rgba(237, 45, 28, 0.5)',
// 'rgba(220, 24, 32, 0.5)',
// 'rgba(180, 0, 35, 0.5)',
// ],
});
"width": 861,
"height": 571,
"min": 0,
"max": 2.553428,

const tempLayer = new MaptalksWind.ScalarLayer('temp', {
// "type": "jsonArray",
// "data": res,
"type": "image",
"url": "./data/var_tmp.png",
"extent": [
[-180, 85.051129],
[-180, -85.051129],
[180, 85.051129],
[180, -85.051129],
],
"width": 1440,
"height": 720,
"min": -50.84996643066404,
"max": 42.25002441406252,
}, {
styleSpec: {
'fill-color': [
'interpolate',
['linear'],
['get', 'value'],
...tempInterpolateColor
],
'opacity': [
'interpolate',
['exponential', 0.5],
['zoom'],
5,
1,
8,
1
...QWInterpolateColor
],
'opacity': 1,
},
wrapX: true,
renderForm: 'r',
widthSegments: 180,
heightSegments: 180,
// widthSegments: 1,
// heightSegments: 1,
// displayRange: [0, 80],
mappingRange: [0, 20000],
// mappingRange: [0, 0],
widthSegments: 1,
heightSegments: 1,
mappingRange: [0, 0],
wireframe: false,
});

Expand Down Expand Up @@ -242,8 +188,8 @@

}

map.addLayer(tempLayer);
// map.addLayer(scalarLayer);
// map.addLayer(tempLayer);
map.addLayer(scalarLayer);

initGui();
});
Expand Down
94 changes: 77 additions & 17 deletions examples/maptalks-particles-layer.html
Original file line number Diff line number Diff line change
Expand Up @@ -39,23 +39,31 @@

window.map = map;

mtkWind.configDeps(['https://unpkg.com/geotiff/dist-browser/geotiff.js', 'https://unpkg.com/exifr/dist/full.umd.js']);
mtkWind.configDeps(['https://unpkg.com/geotiff/dist-browser/geotiff.js']);

const source = new mtkWind.ImageSource('temp', {
type: 'image',
const source = new mtkWind.TileSource('temp', {
tileSize: 256,
// minZoom: 0,
// maxZoom: 0,
// roundZoom: false,
decodeType: 3,
decodeType: mtkWind.DecodeType.imageWithExif,
wrapX: false,
url: 'http://localhost:5000/2023111700/2023111703/{z}/{x}/{y}/wind-surface.jpeg',
});
const source1 = new mtkWind.ImageSource('temp', {
tileSize: 256,
// minZoom: 0,
// maxZoom: 0,
// roundZoom: false,
decodeType: mtkWind.DecodeType.imageWithExif,
coordinates: [
[-180, 85.051129],
[180, 85.051129],
[180, -85.051129],
[-180, -85.051129],
],
wrapX: true,
url: 'http://localhost:5000/processed/2023042600/2023042601/0/0/0/wind-surface.jpeg',
url: 'http://localhost:5000/2023111700/2023111703/0/0/0/wind-surface.jpeg',
});

window.source = source;
Expand Down Expand Up @@ -98,7 +106,46 @@

const interpolateColor = color.wind.reduce((result, item, key) => result.concat(item[0] - 0/*273.15*/, 'rgba(' + item[1].join(',') + ')'), []);

const layer = new mtkWind.Layer('wind', source, {
const fill = new mtkWind.Layer('fill', source, {
wireframe: true,
styleSpec: {
'fill-color': [
'interpolate',
['step', 1],
['get', 'value'],
...interpolateColor
],
'opacity': [
'interpolate',
['exponential', 1],
['zoom'],
1,
1,
10,
0
]
},
renderFrom: mtkWind.RenderFrom.rg,
widthSegments: 64,
heightSegments: 64,
displayRange: [0, 104],
renderType: mtkWind.RenderType.colorize,
picking: true,
// mask: {
// data: clip,
// // type: mapboxWind.MaskType.outside,
// type: mapboxWind.MaskType.inside, // 默认是 inside,即只显示范围内的
// }
});

const particlesConfig = {
speedFactor: 0.5,
fadeOpacity: 0.93,
dropRate: 0.003,
dropRateBump: 0.002,
}

const layer = new mtkWind.Layer('wind', source1, {
wireframe: false,
styleSpec: {
'fill-color': [
Expand All @@ -117,22 +164,35 @@
2,
1
],
numParticles: 1024,
speedFactor: 1,
fadeOpacity: 0.93,
dropRate: 0.003,
dropRateBump: 0.002,
numParticles: [
'interpolate',
['exponential', 0.5],
['zoom'],
0, // zoom
65535 / 8, // numParticles
8, // zoom
65535 / 16 // numParticles
],
...particlesConfig,
},
renderFrom: 'rg',
renderFrom: mtkWind.RenderFrom.rg,
widthSegments: 1,
heightSegments: 1,
displayRange: [0, 104],
hasMask: false,
renderType: 2,
picking: true
renderType: mtkWind.RenderType.particles,
// picking: true
});

fetch('./data/china.geojson').then(res => res.json()).then(clip => {
fill.setClipMask({
data: clip,
// type: mtkWind.MaskType.outside,
type: mtkWind.MaskType.inside, // 默认是 inside,即只显示范围内的
})
});

map.addLayer(layer);
map.addLayer(fill);
// map.addLayer(layer);
</script>
</body>
</html>
</html>
Loading

0 comments on commit 7f3d51a

Please sign in to comment.