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

Home Page:https://sakitam-fdd.github.io/wind-layer/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

在 Vue 中使用 amap-wind 出现风向图突然消失的情况

martinadamsdev opened this issue · comments

数据来源

https://sakitam-fdd.github.io/wind-layer/data/wind.json

版本

"amap-wind": "^1.0.0-alpha.10",

出现状况

当可见区域出现太平洋时,风向图整体消失

正常

异常

代码

async initMapWind() {
    await import('amap-wind').then(({WindLayer}) => {
      d3.json('https://sakitam-fdd.github.io/wind-layer/data/wind.json')
        .then((res) => {
          const windLayer = new WindLayer(res, {
            windOptions: {
              // minVelocity: 4, // 粒子强度最小的速度 (m/s)
              // maxVelocity: 10, // 粒子强度最大的速度 (m/s)
              velocityScale: 1 / 20, // 风速的比例
              // particleAge: 90, // 重绘之前生成的离子数量的最大帧数
              lineWidth: 2, // 绘制粒子的线宽
              paths: () => { // can be number or function
                return this.map.getZoom() * 1000;
              },
              opacity: 0.2,
              // eslint-disable-next-line no-unused-vars
              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)"
              ],
            },
            // map: this.map,
            // projection: 'EPSG:4326'
          });
          windLayer.appendTo(this.map)
        }).catch(error => console.log(error))
    })

@martinageradams 我这边并没有复现,你这边最好提供一个最小可运行的示例

@martinageradams 你好,想问下在vue中使用amap-wind怎么实现风场效果