mapbox球形状态下绘制风粒子导致页面卡顿

[XiaoTouN]

在mapbox中使用mapbox-wind.js插件绘制风粒子后，将地图切换为球形会导致页面卡顿

[XiaoTouN]

使用json文件为数据源绘制风粒子时，墨卡托投影下正常，切换为球形后页面卡顿

[sakitam-fdd]

@XiaoTouN 你是使用的 mapbox-wind 1.x ？

[XiaoTouN]

@XiaoTouN 你是使用的 mapbox-wind 1.x ？

是的，因为我的数据源为jsonArray，而 2.0 之后不再支持 jsonArray 数据

[XiaoTouN]

@XiaoTouN 你是使用的 mapbox-wind 1.x ？

使用 2.0 后，不支持jsonArray 数据源，需要生成png或tiff图片，在生成png图片数据时有两个疑问，一是数据地理数据范围是动态的如何来指定图片的长和宽，二是png图片的exif 信息如何写入的。

[sakitam-fdd]

@XiaoTouN

1. 其实格点数据你可以认为就是图像，他是有经纬度范围和 cell 大小的 w = (xmax - xmin) / cellSize，高同理
2. png 是写不了 exif 的，可以用 jpeg
3. 如果想方便的话 gdal 这一套都可以做，包括格点数据解析、图像处理，重投影、写 exif...

[XiaoTouN]

@XiaoTouN

1. 其实格点数据你可以认为就是图像，他是有经纬度范围和 cell 大小的 w = (xmax - xmin) / cellSize，高同理
2. png 是写不了 exif 的，可以用 jpeg
3. 如果想方便的话 gdal 这一套都可以做，包括格点数据解析、图像处理，重投影、写 exif...

多谢，再请教一下，无效值写入图片的rgb通道时如何处理？

[XiaoTouN]

下面第一张图片为包含uv速度的jpeg格式数据源图片，第二张图片为风速色斑图与粒子图层的叠加图，可以看出粒子速度与方向并不与数据相匹配，请问可能是什么原因？

[XiaoTouN]

下面是部分代码：

export const addParticle = async (data) => {
    if (data) {
        particleData = data
    }
    const { lo1, la1, lo2, la2, uMax, uMin, vMax, vMin, content } =
        particleData.data
    const url = 'data:image/png;base64,' + content
    console.log('url', url)
    const coordinates = [
        [lo2, la2],
        [lo1, la2],
        [lo1, la1],
        [lo2, la1]
    ]
    console.log('coordinate', coordinates)
    const imageSource = new mapboxWind.ImageSource('wind1', {
        dataRange: [uMin, uMax, vMin, vMax],
        // decodeType: mapboxWind.DecodeType.image,
        wrapX: false,
        coordinates,
        url
    })
    window.imageSource = imageSource
    console.log(imageSource)
    const wind = new mapboxWind.Layer('windParticle', imageSource, {
        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
            ],
            speedFactor: [
                'interpolate',
                ['exponential', 0.5],
                ['zoom'],
                0,
                1,
                15,
                0.01
            ],
            fadeOpacity: 0.93,
            dropRate: 0.003,
            dropRateBump: 0.002
        },
        renderFrom: mapboxWind.RenderFrom.rg,
        renderType: mapboxWind.RenderType.particles
    })

    window.map.addLayer(wind)
}

[sakitam-fdd]

@XiaoTouN 不太确定，可能原因有以下几个：

1. 图片的通道存储的是 uv 数据不是 ws、wd
2. 投影问题
3. 色斑图的展示颜色是风速的大小，大部分情况下应该是会和粒子保持同步的
4. 本插件目前不支持 globe 投影，只能支持墨卡托投影

[echohye]

@sakitam-fdd 大佬，请问mapbox-wind v1版本会计划修复这个只渲染一个世界的问题吗，感觉v1版本流畅很多