maptalks wind
npm install @sakitam-gis/maptalks-windmaptalks-wind> maptalks wind layer adapter
``bash`
pnpm i @sakitam-gis/maptalks-wind -S
`vue
`
`js
const source = new mtkWind.TileSource('carto', {
tileSize: 256,
minZoom: 0,
maxZoom: 22,
roundZoom: true,
subdomains: ['a', 'b', 'c', 'd'],
// coordinates: [
// [-180, 85.051129],
// [180, 85.051129],
// [180, -85.051129],
// [-180, -85.051129],
// ],
url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',
wrapX: true,
});
const layer = new mtkWind.Layer('carto', source, {
styleSpec: {
'opacity': [
'interpolate',
['exponential', 0.5],
['zoom'],
1,
1,
2,
1
],
},
renderType: mtkWind.RenderType.image,
});
map.addLayer(layer);
`
`js
const tileSource = new mtkWind.TileSource('wind', {
tileSize: 256,
minZoom: 0,
maxZoom: 4,
roundZoom: true,
decodeType: mtkWind.DecodeType.imageWithExif,
wrapX: true,
// tileBounds: [-78.120282611, -75.191804486, 132.453327310, 68.846393966],
url: 'http://localhost:5000/2023111700/2023111703/{z}/{x}/{y}/wind-surface.jpeg',
});
const layer = new mtkWind.Layer('wind', tileSource, {
styleSpec: {
'fill-color': [
'interpolate',
['step', 1],
['get', 'value'],
...interpolateColor
],
'opacity': 1,
},
renderFrom: mtkWind.RenderFrom.rg,
widthSegments: 1,
heightSegments: 1,
displayRange: [0, 104],
renderType: mtkWind.RenderType.colorize,
picking: true,
// mask: {
// data: clip,
// // type: mapboxWind.MaskType.outside,
// type: mapboxWind.MaskType.inside, // 默认是 inside，即只显示范围内的
// }
});
map.addLayer(layer);
`
`js
const tileSource = new mtkWind.TileSource('wind', {
tileSize: 256,
minZoom: 0,
maxZoom: 4,
roundZoom: true,
decodeType: mtkWind.DecodeType.imageWithExif,
wrapX: true,
// tileBounds: [-78.120282611, -75.191804486, 132.453327310, 68.846393966],
url: 'http://localhost:5000/2023111700/2023111703/{z}/{x}/{y}/wind-surface.jpeg',
});
const layer = new mtkWind.Layer('wind', tileSource, {
styleSpec: {
'fill-color': [
'interpolate',
['step', 1],
['get', 'value'],
0, '#fff',
104, '#fff',
],
'opacity': [
'interpolate',
['exponential', 0.5],
['zoom'],
1,
1,
2,
1
],
numParticles: [
'interpolate',
['exponential', 0.5],
['zoom'],
0, // zoom
65535 / 8, // numParticles
8, // zoom
65535 / 16 // numParticles
],
...particlesConfig,
},
renderFrom: mtkWind.RenderFrom.rg,
displayRange: [0, 104],
renderType: mtkWind.RenderType.particles,
// mask: {
// data: clip,
// // type: mapboxWind.MaskType.outside,
// type: mapboxWind.MaskType.inside, // 默认是 inside，即只显示范围内的
// }
});
map.addLayer(layer);
`
`js
const tileSource = new mtkWind.TileSource('wind', {
tileSize: 256,
minZoom: 0,
maxZoom: 4,
roundZoom: true,
decodeType: mtkWind.DecodeType.imageWithExif,
wrapX: true,
// tileBounds: [-78.120282611, -75.191804486, 132.453327310, 68.846393966],
url: 'http://localhost:5000/2023111700/2023111703/{z}/{x}/{y}/wind-surface.jpeg',
});
const layer = new mtkWind.Layer('wind', tileSource, {
styleSpec: {
'fill-color': [
'interpolate',
['step', 1],
['get', 'value'],
...interpolateColor
// 0, '#fff',
// 104, '#fff',
],
'opacity': 1,
space: 20,
size: [12, 10],
},
renderFrom: mtkWind.RenderFrom.rg,
displayRange: [0, 104],
renderType: mtkWind.RenderType.arrow,
// mask: {
// data: clip,
// // type: mapboxWind.MaskType.outside,
// type: mapboxWind.MaskType.inside, // 默认是 inside，即只显示范围内的
// }
});
map.addLayer(layer);
``