sakitam-fdd / wind-layer

:flags: :rocket: wind-layer | a openlayers && maptalks && amap && bmap && leaflet && mapbox-gl && maplibre-gl extension like windy.com for weather visualization
https://sakitam-fdd.github.io/wind-layer/
Other
542 stars 145 forks source link

风场在跨东经180度时断开 #193

Closed wangxiaogang94 closed 7 months ago

wangxiaogang94 commented 11 months ago

问题如下

20231108152532

但是文档里示例图没有这个问题 20231108152119

sakitam-fdd commented 7 months ago

@wangxiaogang94 这是两个问题哈:

  1. 你使用的应该旧版 @sakitam-gis/mapbox-wind@1.1.2 之前的版本,这个版本是基于 canvas 渲染的,早期版本有个 bug,你可以更新到 1.1.2,新增了fieldOptions参数,需要指定fieldOptions.wrapXtrue
npm i @sakitam-gis/mapbox-wind@1.1.2

示例如下:

window.windLayer = new mapboxWind.WindLayer('wind', data, {
    windOptions: {
      // colorScale: (m) => {
      //   // console.log(m);
      //   return '#fff';
      // },
      colorScale: [
        "rgb(36,104, 180)",
        "rgb(60,157, 194)",
        "rgb(128,205,193 )",
        "rgb(151,218,168 )",
        "rgb(198,231,181)",
        "rgb(238,247,217)",
        "rgb(255,238,159)",
        "rgb(252,217,125)",
        "rgb(255,182,100)",
        "rgb(252,150,75)",
        "rgb(250,112,52)",
        "rgb(245,64,32)",
        "rgb(237,45,28)",
        "rgb(220,24,32)",
        "rgb(180,0,35)"
      ],
      // velocityScale: 1 / 20,
      // paths: 5000,
      frameRate: 16,
      maxAge: 60,
      globalAlpha: 0.9,
      velocityScale: 0.01,
      // velocityScale: () => {
      //    const zoom = map.getZoom();
      //    return velocityScales[zoom] || 0.01
      // },
      // paths: 10000,
      paths: 3782,
    },
+    fieldOptions: {
+      wrapX: true,
+    },
  });
  console.log(map, window.windLayer);
  // map.addLayer(window.windLayer);
  window.windLayer.addTo(map);
  1. 文档示例图的时 2.0 版本,基于 webgl 渲染的,需要的数据与 1.x 版本不一样,具体示例可以查看