mapbox 叠加canvas渲染风力图

拿到一张UV风速图

其实数据是来源于NOAA 的Grid 格点风力数据,分辨率是1度,全球共360*180 个格点 (总计64,800个). 那么就我之前的了解,风力数据一般都是分为U/V 两个方向,包括NetCDF 数据也是,坐标信息是隐含在grid 的索引中,风力记录在了 U/ V 两个垂直的方向.

把水平U 方向的风力和 垂直V 方向的风力数值分别作为 RGB波段的 R,G 两个数值,合成一张png就如图所示。

由于我没有采用官网的数据下载API,所以没有拿到原始的json 数据,只拿到一张png,所以无法反演出 U/V 数值的符号,只有正值. 所以最后渲染出来只有第一象限的风向,当然作为演示应该没问题。

2016112000 UV风力图
根据UV 图提取出每个格点的
tmpCanvas.width = windImage.width;
    tmpCanvas.height = windImage.height;
    tmpCtx.drawImage(windImage, 0, 0);
    // imageData.data.length: width*height*4
    let imageData = tmpCtx.getImageData(0, 0, tmpCanvas.width, tmpCanvas.height),
        dataLength = imageData.data.byteLength;
    if (compressRatio == undefined || (compressRatio !== undefined && compressRatio < 1)) {
        console.warn("Input compressRatio invalid, use default 1.");
        compressRatio = 1;
    }
for (let i=1;i<tmpCanvas.height-1;i+=compressRatio) {
        // i:0~180, j:0~360
        for (let j=0;j<tmpCanvas.width;j+=compressRatio) {
            let particle = {
                'lon': -180 + j,
                'lat': -90 + i,
            };
            let uIndex = (i * 360 + j) * 4, vIndex = uIndex + 1;
            let uVal = imageData.data[uIndex], vVal = imageData.data[vIndex],
              // 根据UV计算风力,和风向.
                windPow = Math.pow(uVal, 2) + Math.pow(vVal, 2),
                angle = Number(Math.atan(vVal/uVal).toFixed(2)),
                color = 'rgba('+ (windPow/255).toFixed(0) + ', 255, 100, 0.7)';
            // return geojson dataSource for mapboxgl.vector layer.
            if (geojson) {
                particle = { "type": "Feature", 
                    "properties": {
                        "angle": angle,
                        "color": color
                    },
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-180 + j, -90 + i]
                    }
                }
                features.push(particle);
            } else {
                // 如果不用geojson 的数据,就用自定义的canvas 去渲染,为了动画方便,我们采用这种方式.
                particle.color = color;
                particle.angle = angle;
                particle.radius = radius;
                particles.push(particle);
            }
        }
    }

Canvas 渲染风向

当解析出这么多点之后,就可以开始写渲染的函数了,可以用mapbox 原生的 fill layer 来做渲染(基于webgl,效率更高)。但是为了方便动画,这里就采用自己之前写的动画控制器Alex.myTween 和 CanvasOverLayer 扩展来渲染

// genWindTarget 函数其实就是根据风向来模拟一个风粒子的动画效果,产生动画的目标对象,Alex.myTween为根据source 和target 自动计算中间坐标和状态.

objs = windlayer.particles; targets = genWindTarget(objs);
// calc targets depend on its angle, use 6 degree as dist.
Alex.myTween.get(objs).to(targets, 8000, windlayer.redraw);
map.on('moveend', function(){
    windlayer.redraw(objs);
});

渲染的效果如下图:


windy.gif

其实就是做起来好玩,这个项目起源于对动画的实验,API全部采用ES6 + webpack,为了自己写起来方便,采用的给mapbox 叠加自定义CanvasOverlayer的形式 来快速开发自己想要的效果。之后还是打算切换到 webgl,毕竟那个效率才高。 项目中还有些 其他插件,欢迎大家把玩,提issue

Mapbox plugin 项目示例

项目地址 : https://github.com/alex2wong/mapbox-plugins

欢迎Star ❤ ,欢迎PR

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 你说你是人间的四月天;笑音点亮了四面风;轻灵在春的光艳中交舞着变。 ——《你是人间的四月天》 在若干年前的一个睡眼...
    鳗鱼菇凉阅读 316评论 0 4
  • 一名大一的计算机专业学生。各种女生不适合这个专业的话我都不放在耳里 ,但确实感到自己学习编程很被动。成绩不错,但能...
    程序熊阅读 243评论 1 0
  • ❤ 因为得不到所有不想要。 转眼而逝的二十年青春,我已从牙牙学语的小女孩成长为亭亭玉立的女生了,不知道能不能用亭亭...
    玥先森阅读 378评论 0 2
  • Chapter3 分支 参考自 https://git-scm.com/book/zh/v1/Git-%E5%88...
    董哒哒阅读 476评论 0 0