Skip to content

Commit f44535e

Browse files
sakitam-fddsakitam-fdd
committed
feat(maplibre): support maplibre-gl
1 parent f2c2fd4 commit f44535e

33 files changed

+2577
-1191
lines changed

‎README.md

+25-86
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ extension to show wind field。
88
[wind-layer](./) 是一个专注于气象格点数据可视的插件，设计之处是参考了 [earth](http://earth.nullschool.net) [cambecc](https://github.com/cambecc/earth) 的一个气象数据的展示，他使用了流体场的方式去展示了全球的风速和风向，富有很强的
99
表现力, 这个插件的早期的很多核心代码也是来源于此。当然现在它不仅仅是做风场的展示，常规的气象数据都可以依赖此插件进行可视化。
1010

11-
## 特性 (相对于原始 [windy.js](https://github.com/Esri/wind-js))
11+
## 特性 (1.x 通用版本相对于原始 [windy.js](https://github.com/Esri/wind-js))
1212

1313
* 易于配置粒子数量，原始 windy.js 只能给定一个系数，会根据地图元素的大小进行计算粒子数量；现在可以支持系数方式和固定粒子数量以及回调函数的的三种方式。
1414
* 颜色配置支持三种方式：
@@ -18,23 +18,28 @@ extension to show wind field。
1818
* 线条宽度支持动态设置。
1919
* 抽离了核心渲染库，便于扩展到其他地图渲染库。
2020

21-
## 关于webgl
21+
## 2.x webgl 版本
2222

23-
其中的大部分代码来自于 [webgl-wind](https://github.com/mapbox/webgl-wind) 和 [windgl](https://github.com/astrosat/windgl),
24-
并且色斑图目前只针对 `mapbox` 和 `maptalks` 做了相关适配。
23+
`gl-core`扩展目前只针对 `mapbox`、`maplibre` 和 `maptalks` 做了相关适配，其他引擎适配欢迎 PR。
2524

2625
目前计划支持的图层如下：
2726

2827
- [x] 常规 raster 图层，为了解决多时次瓦片序列播放问题。
2928
- [x] 常规 Image 图层，单张 raster 图层。
3029
- [x] 色斑图渲染，支持瓦片和单张。
3130
- [x] 多数据源支持（geotiff、灰度图-可解析带 exif 信息、png-多通道浮点数压缩）。
31+
- geotiff 的支持需要配置 `configDeps`, `exif` 默认支持，因为在 `safari` 浏览器下 `configDeps` 有兼容性问题，所以默认打包了 exif 的解析库。
32+
```ts
33+
mapboxWind.configDeps(['https://unpkg.com/geotiff/dist-browser/geotiff.js']);
34+
```
3235
- [x] TimelineSource（时序数据源）支持。
3336
- [x] 粒子渲染，支持瓦片和单张。
3437
- [x] 箭头图层，支持瓦片和单张（矢量数据：风或洋流）。
3538
- [x] 图层拾取。
3639
- [x] 图层掩膜。
3740

41+
TIP: 注意 2.0 之后不再支持 `jsonArray` 数据和 `EPSG:4326` 的图片数据，如果有需求请使用 1.x 版本
42+
3843
https://github.com/sakitam-fdd/wind-layer/assets/19517451/b36b7eea-c647-42ed-91a4-e1f182d0343c
3944

4045
https://github.com/sakitam-fdd/wind-layer/assets/19517451/bf27d98e-68ed-4f9c-b1e4-812764665bff
@@ -60,6 +65,7 @@ https://github.com/sakitam-fdd/wind-layer/assets/19517451/064f0ea4-f72f-4e9a-80e
6065
| [amap-wind](https://github.com/sakitam-fdd/wind-layer/tree/master/packages/amap) | [![Npm package](https://img.shields.io/npm/v/amap-wind.svg)](https://www.npmjs.org/package/amap-wind) | [![NPM downloads](https://img.shields.io/npm/dm/amap-wind.svg)](https://npmjs.org/package/amap-wind) | [![](https://data.jsdelivr.com/v1/package/npm/amap-wind/badge)](https://www.jsdelivr.com/package/npm/amap-wind) | 高德地图风场扩展插件 |
6166
| [bmap-wind](https://github.com/sakitam-fdd/wind-layer/tree/master/packages/bmap) | [![Npm package](https://img.shields.io/npm/v/bmap-wind.svg)](https://www.npmjs.org/package/bmap-wind) | [![NPM downloads](https://img.shields.io/npm/dm/bmap-wind.svg)](https://npmjs.org/package/bmap-wind) | [![](https://data.jsdelivr.com/v1/package/npm/bmap-wind/badge)](https://www.jsdelivr.com/package/npm/bmap-wind) | 百度地图风场扩展插件 |
6267
| [mapbox-wind](https://github.com/sakitam-fdd/wind-layer/tree/master/packages/mapbox-gl) | [![Npm package](https://img.shields.io/npm/v/@sakitam-gis/mapbox-wind.svg)](https://www.npmjs.org/package/@sakitam-gis/mapbox-wind) | [![NPM downloads](https://img.shields.io/npm/dm/@sakitam-gis/mapbox-wind.svg)](https://npmjs.org/package/@sakitam-gis/mapbox-wind) | [![](https://data.jsdelivr.com/v1/package/npm/@sakitam-gis/mapbox-wind/badge)](https://www.jsdelivr.com/package/npm/@sakitam-gis/mapbox-wind) | mapbox-gl 风场扩展插件 |
68+
| [maplibre-wind](https://github.com/sakitam-fdd/wind-layer/tree/master/packages/maplibre-gl) | [![Npm package](https://img.shields.io/npm/v/@sakitam-gis/maplibre-wind.svg)](https://www.npmjs.org/package/@sakitam-gis/maplibre-wind) | [![NPM downloads](https://img.shields.io/npm/dm/@sakitam-gis/maplibre-wind.svg)](https://npmjs.org/package/@sakitam-gis/maplibre-wind) | [![](https://data.jsdelivr.com/v1/package/npm/@sakitam-gis/maplibre-wind/badge)](https://www.jsdelivr.com/package/npm/@sakitam-gis/maplibre-wind) | maplibre-gl 风场扩展插件 |
6369
| [leaflet-wind](https://github.com/sakitam-fdd/wind-layer/tree/master/packages/leaflet) | [![Npm package](https://img.shields.io/npm/v/leaflet-wind.svg)](https://www.npmjs.org/package/leaflet-wind) | [![NPM downloads](https://img.shields.io/npm/dm/leaflet-wind.svg)](https://npmjs.org/package/leaflet-wind) | [![](https://data.jsdelivr.com/v1/package/npm/leaflet-wind/badge)](https://www.jsdelivr.com/package/npm/leaflet-wind) | Leaflet风场扩展插件 |
6470

6571
### 特殊说明
@@ -88,6 +94,7 @@ pnpm install amap-wind
8894
pnpm install bmap-wind
8995
pnpm install leaflet-wind
9096
pnpm install @sakitam-gis/mapbox-wind
97+
pnpm install @sakitam-gis/maplibre-wind
9198

9299
# yarn
93100
yarn add wind-core
@@ -100,6 +107,7 @@ yarn add amap-wind
100107
yarn add bmap-wind
101108
yarn add leaflet-wind
102109
yarn add @sakitam-gis/mapbox-wind
110+
yarn add @sakitam-gis/maplibre-wind
103111
```
104112

105113
### 部分插件亦可以通过浏览器引入
@@ -108,18 +116,19 @@ yarn add @sakitam-gis/mapbox-wind
108116

109117
我们在仓库发布包内的 `dist` 目录下提供了 `xxx.js` 以及 `xxx.min.js`；
110118

111-
| Project | unpkg | jsdelivr |
112-
|---------|---------|-------------|
113-
| [wind-core](https://cdn.jsdelivr.net/npm/wind-core/dist/) | https://unpkg.com/wind-core/dist/wind-core.js | https://cdn.jsdelivr.net/npm/wind-core/dist/wind-core.js |
114-
| [wind-gl-core](https://cdn.jsdelivr.net/npm/wind-gl-core/dist/) | https://unpkg.com/wind-gl-core/dist/wind-gl-core.js | https://cdn.jsdelivr.net/npm/wind-gl-core/dist/wind-gl-core.js |
119+
| Project | unpkg | jsdelivr |
120+
|----------------------------------------------------------------------------------------------------------------------------------------------|---------|-------------|
121+
| [wind-core](https://cdn.jsdelivr.net/npm/wind-core/dist/) | https://unpkg.com/wind-core/dist/wind-core.js | https://cdn.jsdelivr.net/npm/wind-core/dist/wind-core.js |
122+
| [wind-gl-core](https://cdn.jsdelivr.net/npm/wind-gl-core/dist/) | https://unpkg.com/wind-gl-core/dist/wind-gl-core.js | https://cdn.jsdelivr.net/npm/wind-gl-core/dist/wind-gl-core.js |
115123
| [ol-wind](https://cdn.jsdelivr.net/npm/ol-wind/dist/) 因 `ol6` 重构原因，无法直接使用，你可以自行构建<https://cdn.jsdelivr.net/npm/@sakitam-gis/[email protected]/dist/> | https://unpkg.com/ol-wind/dist/ol-wind.js | https://cdn.jsdelivr.net/npm/ol-wind/dist/ol-wind.js |
116-
| [ol5-wind](https://cdn.jsdelivr.net/npm/ol5-wind/dist/) | https://unpkg.com/ol5-wind/dist/ol-wind.js | https://cdn.jsdelivr.net/npm/ol5-wind/dist/ol-wind.js |
117-
| [openlayers-wind](https://cdn.jsdelivr.net/npm/openlayers-wind/dist/) | https://unpkg.com/openlayers-wind/dist/ol-wind.js | https://cdn.jsdelivr.net/npm/openlayers-wind/dist/ol-wind.js |
118-
| [@sakitam-gis/maptalks-wind](https://cdn.jsdelivr.net/npm/@sakitam-gis/maptalks-wind/dist/) | https://unpkg.com/@sakitam-gis/maptalks-wind/dist/maptalks-wind.js | https://cdn.jsdelivr.net/npm/@sakitam-gis/maptalks-wind/dist/maptalks-wind.js |
119-
| [amap-wind](https://cdn.jsdelivr.net/npm/amap-wind/dist/) | https://unpkg.com/amap-wind/dist/amap-wind.js | https://cdn.jsdelivr.net/npm/amap-wind/dist/amap-wind.js |
120-
| [bmap-wind](https://cdn.jsdelivr.net/npm/bmap-wind/dist/) | https://unpkg.com/bmap-wind/dist/bmap-wind.js | https://cdn.jsdelivr.net/npm/bmap-wind/dist/bmap-wind.js |
121-
| [leaflet-wind](https://cdn.jsdelivr.net/npm/leaflet-wind/dist/) | https://unpkg.com/leaflet-wind/dist/leaflet-wind.js | https://cdn.jsdelivr.net/npm/leaflet-wind/dist/leaflet-wind.js |
122-
| [@sakitam-gis/mapbox-wind](https://cdn.jsdelivr.net/npm/@sakitam-gis/mapbox-wind/dist/) | https://unpkg.com/@sakitam-gis/mapbox-wind/dist/mapbox-wind.js | https://cdn.jsdelivr.net/npm/@sakitam-gis/mapbox-wind/dist/mapbox-wind.js |
124+
| [ol5-wind](https://cdn.jsdelivr.net/npm/ol5-wind/dist/) | https://unpkg.com/ol5-wind/dist/ol-wind.js | https://cdn.jsdelivr.net/npm/ol5-wind/dist/ol-wind.js |
125+
| [openlayers-wind](https://cdn.jsdelivr.net/npm/openlayers-wind/dist/) | https://unpkg.com/openlayers-wind/dist/ol-wind.js | https://cdn.jsdelivr.net/npm/openlayers-wind/dist/ol-wind.js |
126+
| [@sakitam-gis/maptalks-wind](https://cdn.jsdelivr.net/npm/@sakitam-gis/maptalks-wind/dist/) | https://unpkg.com/@sakitam-gis/maptalks-wind/dist/maptalks-wind.js | https://cdn.jsdelivr.net/npm/@sakitam-gis/maptalks-wind/dist/maptalks-wind.js |
127+
| [amap-wind](https://cdn.jsdelivr.net/npm/amap-wind/dist/) | https://unpkg.com/amap-wind/dist/amap-wind.js | https://cdn.jsdelivr.net/npm/amap-wind/dist/amap-wind.js |
128+
| [bmap-wind](https://cdn.jsdelivr.net/npm/bmap-wind/dist/) | https://unpkg.com/bmap-wind/dist/bmap-wind.js | https://cdn.jsdelivr.net/npm/bmap-wind/dist/bmap-wind.js |
129+
| [leaflet-wind](https://cdn.jsdelivr.net/npm/leaflet-wind/dist/) | https://unpkg.com/leaflet-wind/dist/leaflet-wind.js | https://cdn.jsdelivr.net/npm/leaflet-wind/dist/leaflet-wind.js |
130+
| [@sakitam-gis/mapbox-wind](https://cdn.jsdelivr.net/npm/@sakitam-gis/mapbox-wind/dist/) | https://unpkg.com/@sakitam-gis/mapbox-wind/dist/mapbox-wind.js | https://cdn.jsdelivr.net/npm/@sakitam-gis/mapbox-wind/dist/mapbox-wind.js |
131+
| [@sakitam-gis/maplibre-wind](https://cdn.jsdelivr.net/npm/@sakitam-gis/maplibre-wind/dist/) | https://unpkg.com/@sakitam-gis/maplibre-wind/dist/maplibre-wind.js | https://cdn.jsdelivr.net/npm/@sakitam-gis/maplibre-wind/dist/maplibre-wind.js |
123132

124133
## 基础
125134

@@ -274,9 +283,6 @@ yarn add @sakitam-gis/mapbox-wind
274283
fetch('data.json')
275284
.then(res => res.json())
276285
.then(res => {
277-
// const range = vectorField.range || [0.02, 28.21618329965979];
278-
// const scale = chroma.scale('OrRd').domain(range);
279-
280286
const windLayer = new MaptalksWind.WindLayer('wind', res, {
281287
windOptions: {
282288
// colorScale: (m) => {
@@ -342,74 +348,7 @@ grib2json -d -n -o current-wind-surface-level-gfs-1.0.json gfs.t00z.pgrb2.1p00.f
342348
cp current-wind-surface-level-gfs-1.0.json <earth-git-repository>/public/data/weather/current
343349
```
344350

345-
## 使用node服务获取数据
346-
347-
> 默认运行在3000端口, 使用koa2构建。
348-
目前仅抓取少量数据, 全部数据数据量过大会造成抓取时间过长和转换失败。
349-
350-
```bash
351-
npm run start // 调试环境启动服务
352-
npm run prd:server // 部署环境启动服务
353-
```
354-
355-
### 目前共暴露7个接口
356-
357-
| url | params | desc |
358-
| :--- | :--- | :---------- |
359-
| `autofetch` | `null` | 无需参数，开启自动抓取程序，默认30分钟抓取一次数据源 |
360-
| `stopautofetch` | `null` | 停止自动抓取程序 |
361-
| `getdata` | `Object` (目前只支持`time` 参数，时间戳) | 获取json数据，存在转换过的直接返回，若只存在元数据则转换后返回，若元数据也不存在则抓取转换后再响应 |
362-
| `gribdata` | `Object` (目前只支持`time` 参数，时间戳) | 获取grib2数据（强制抓取数据） |
363-
| `getSourceTree` | `null` | 无需参数，获取抓取的数据源 `grib2` 源数据。返回一个list，包含文件名和服务器地址。 |
364-
| `getParseTree` | `null` | 无需参数，获取转换后的 `json` 数据。返回一个list，包含文件名和服务器地址。 |
365-
| `getDataByFileName` | `{ filename }` | 通过文件名请求 `json` 数据，文件名可为源数据文件和json文件名 |
366-
367-
## 使用Docker
368-
369-
### 简单运行
370-
371-
> 如果想简单的运行一下看看，可以执行这个命令：
372-
373-
```bash
374-
docker run -d -p 8080:3333 sakitamclone/wind-server:latest
375-
```
376-
377-
启动后就可以通过主机的 8080 端口看到运行结果了，比如用的是本机 Docker 的话，访问：http://localhost:8080 即可。
378-
379-
测试结束后，彻底清除容器可以用命令：
380-
381-
```bash
382-
docker rm -fv <容器ID>
383-
```
384-
385-
这样可以停止、删除容器，并清除数据。
386-
387-
### 使用 DockerCompose
388-
389-
新建文件 ``docker-compose.yml``, 内容如下：
390-
391-
```yaml
392-
version: '3'
393-
394-
services:
395-
wind-server:
396-
image: sakitamclone/wind-server:latest
397-
build:
398-
context: ./
399-
args:
400-
NODE_ENV: development
401-
hostname: wind-server
402-
environment:
403-
- CORS_ORIGIN=****
404-
ports:
405-
- "8080:3333"
406-
407-
volumes:
408-
yarn:
409-
410-
```
411-
412-
然后使用命令 docker-compose up -d 来启动，停止服务使用 docker-compose down。
351+
对于 2.x 版本的数据格式我们可以使用 https://github.com/sakitam-gis/raster-process 来生成所需要的瓦片和单张图片。
413352

414353
## Acknowledgments
415354

0 commit comments

Comments
 (0)