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版本流畅很多

[sakitam-fdd]

v1版本不会继续维护了，精力不够，后面版本得问题主要是为了适配多个地图引擎有大量的胶水代码，这个现在没有办法去优化，有兴趣的话可以考虑抽离出一个mapbox专用的，性能估计会好很多