Wind Layer API Documentation

website·Indexed 31 days ago

https://blog.sakitam.com/wind-layer

Technical API reference for Wind Layer, featuring components such as leaflet-wind, wind-gl-core, and rbush. Includes documentation for classes like WindLayer, WebglLayer, TileSource, and ImageSource, as well as utility functions for coordinate handling, extent intersection, and data range parsing.

Tokens: 48.2K
Snippets: 341
Records: 479
Agent score: 47%

What's inside Wind Layer

Overview of wind-layer meteorological visualization
wind-layer is a plugin specialized in the visualization of meteorological grid data. It uses fluid field animations to represent global wind speed and direction, inspired by the earth.nullschool.net project. While primarily used for wind fields, it can be used for general meteorological data visualization across various WebGIS libraries including maptalks, mapbox-gl, openlayers, leaflet, Baidu Maps, and Gaode Maps.
https://blog.sakitam.com/wind-layer/guide/getting-started.html
Use ImageSource to manage image tile loading
The ImageSource class provides methods to handle the asynchronous loading and unloading of image tiles. It supports TileJSON compatibility and provides mechanisms to track tile availability and manage tile lifecycles.
https://blog.sakitam.com/wind-layer/api/wind-gl-core/classes/ImageSource.html
Add a single raster image layer in wind-layer
In wind-layer, adding a single raster image provides functionality similar to Mapbox GL's ImageSource, but extends it with advanced capabilities such as time-series playback and layer masking.
https://blog.sakitam.com/wind-layer/playgrounds/mapbox-gl/raster.html
Add raster tile data in wind-layer
Adding raster tile data in wind-layer is functionally equivalent to using a RasterSource in Mapbox GL.
https://blog.sakitam.com/wind-layer/playgrounds/mapbox-gl/raster.html
Implement WebGL-based Tile and Image layers in Leaflet
For developers needing high-performance rendering in Leaflet, WebGL layers can be used to replace standard DOM-based implementations. Specifically, WebGL alternatives are available for:
- TileLayer: A WebGL replacement for the internal Leaflet TileLayer DOM implementation.
- ImageOverlay: A WebGL replacement for the internal Leaflet ImageOverlay implementation.
https://blog.sakitam.com/wind-layer/playgrounds/leaflet/gl-layer.html
Extend Wind Layer to other map rendering libraries
The Wind Layer architecture separates the core rendering library from the map-specific implementation. This decoupling allows developers to extend the wind visualization capabilities to different map rendering libraries beyond the default implementation.
https://blog.sakitam.com/wind-layer/
Check system endianness using littleEndian
The littleEndian constant is a boolean value used to determine if the current system architecture uses little-endian byte order.
```
const isLittleEndian: boolean = littleEndian;
```
https://blog.sakitam.com/wind-layer/api/wind-gl-core/variables/littleEndian.html
Initialize a WebglLayer
The WebglLayer class is used to create a WebGL-powered layer for Leaflet. It extends BaseLayer and requires an ID, data, and an options object during instantiation.
```
const layer = new WebglLayer(id, data, options);
```
https://blog.sakitam.com/wind-layer/api/leaflet-wind/classes/WebglLayer.html
Supported projection codes for OpenLayers map displays
The following projection codes are used for different map display requirements:
- EPSG:3857: Standard Web Mercator projection (Default).
- EPSG:4326: WGS 84 projection (Note: causes deformation at the poles).
- EPSG:3413: Polar Stereographic projection.
- ESRI:53009: Mollweide projection.
https://blog.sakitam.com/wind-layer/playgrounds/ol/particles.html

Install @sakitam-gis/mapbox-wind

The @sakitam-gis/mapbox-wind plugin can be installed via npm, pnpm, yarn, or included as a script tag for browser-based usage.

# Using npm
npm add @sakitam-gis/mapbox-wind

# Using pnpm
pnpm add @sakitam-gis/mapbox-wind

# Using yarn
yarn add @sakitam-gis/mapbox-wind

<!-- Using CDN -->
<script src="https://unpkg.com/@sakitam-gis/mapbox-wind/dist/mapbox-wind.js"></script>

Integrate Wind Layer with OpenLayers Map
The wind layer can be added to an OpenLayers map using appendTo(map) or by using the inherited setMap(map) method.
```
windLayer.appendTo(map);
// OR
windLayer.setMap(map);
```
https://blog.sakitam.com/wind-layer/api/ol5-wind/classes/default.html

Install wind-layer via CDN

Depending on the WebGIS library you are using, you can include the appropriate wind-layer distribution via unpkg or jsdelivr. The core libraries provide the base functionality, while the specific plugins integrate with map engines like maptalks, mapbox-gl, leaflet, and others.

Library	unpkg	jsdelivr
wind-core	`https://unpkg.com/wind-core/dist/wind-core.js`	`https://cdn.jsdelivr.net/npm/wind-core/dist/wind-core.js`
wind-gl-core	`https://unpkg.com/wind-gl-core/dist/wind-gl-core.js`	`https://cdn.jsdelivr.net/npm/wind-gl-core/dist/wind-gl-core.js`
@sakitam-gis/maptalks-wind	`https://unpkg.com/@sakitam-gis/maptalks-wind/dist/maptalks-wind.js`	`https://cdn.jsdelivr.net/npm/@sakitam-gis/maptalks-wind/dist/maptalks-wind.js`
@sakitam-gis/mapbox-wind	`https://unpkg.com/@sakitam-gis/mapbox-wind/dist/mapbox-wind.js`	`https://cdn.jsdelivr.net/npm/@sakitam-gis/mapbox-wind/dist/mapbox-wind.js`
@sakitam-gis/maplibre-wind	`https://unpkg.com/@sakitam-gis/maplibre-wind/dist/maplibre-wind.js`	`https://cdn.jsdelivr.net/npm/@sakitam-gis/maplibre-wind/dist/maplibre-wind.js`
leaflet-wind	`https://unpkg.com/leaflet-wind/dist/leaflet-wind.js`	`https://cdn.jsdelivr.net/npm/leaflet-wind/dist/leaflet-wind.js`
amap-wind	`https://unpkg.com/amap-wind/dist/amap-wind.js`	`https://cdn.jsdelivr.net/npm/amap-wind/dist/amap-wind.js`
bmap-wind	`https://unpkg.com/bmap-wind/dist/bmap-wind.js`	`https://cdn.jsdelivr.net/npm/bmap-wind/dist/bmap-wind.js`
ol5-wind	`https://unpkg.com/ol5-wind/dist/ol-wind.js`	`https://cdn.jsdelivr.net/npm/ol5-wind/dist/ol-wind.js`