结合d3.js实现气象数据的可视化

概述

本文将结合d3.js实现在mapboxGL中格点气象数据的展示。

效果

效果

实现

1.数据格式说明

需要将格点气象数据实现前端的展示,数据传输的方式有三种:1、json;2、二进制;3、灰度图。三种方式各有优劣,这个需要在实际的项目中去酌情选择,本文为方便理解,选用json的格式,数据格式如下:

{
    "header": {
        "la1": 54,
        "lo1": 73,
        "la2": 18,
        "lo2": 136,
        "nx": 630,
        "ny": 360
    },
    "data": [
        ......
    ]
}

说明

  1. header节点为头文件,用以说明数据的信息,其中:la1为左上,lo1为左下,la2为右下,lo2为右上,nx为行数,ny为列数。
  2. data节点为数据,数据是从左上开始逐行将格点的气象数据转换为一个一维数组。
2. 实现代码
var url = '../data/aqi.json';
console.time('timer');
$.ajax({
    type : "get",
    url : url,
    async : false,
    success : function(res){
        res = res[0];
        var header = res.header,
            data = res.data;
        var width = header.nx;
        var height = header.ny;
        if (!canvas) {
            canvas = document.createElement('canvas');
            canvas.setAttribute('id', 'canvas-layer');
            map.getCanvasContainer().appendChild(canvas);
            context = canvas.getContext('2d');
            //设置canvas透明度
            canvas.width = width;
            canvas.height = height;
            context.clearRect(0, 0, width, height);
        }
        canvas.style.display = 'block';
        var d3Path = d3.geoPath(null, context); //绘图笔
        //绘图登高线图
        var contours = d3.contours()
            .size([header.nx, header.ny])
            .thresholds(d3.range(0, 300, 5))(data);
        contours.forEach(function(geometry) {
            context.beginPath();
            d3Path(geometry);
            var v = geometry.value;
            var acolor = that.getColor(v);
            context.fillStyle = acolor;
            context.fill();
            context.strokeStyle = acolor;
            context.stroke();
        });
        var source = map.getSource('canvas-source');
        if(source) {
            map.removeLayer('canvas-layer');
            map.removeSource('canvas-source');
        }
        map.addSource('canvas-source', {
            type: 'canvas',
            canvas: 'canvas-layer',
            coordinates: [
                [header.lo1, header.la1],
                [header.lo2, header.la1],
                [header.lo2, header.la2],
                [header.lo1, header.la2]
            ],
            animate: true
        });
        map.addLayer({
            id: 'canvas-layer',
            type: 'raster',
            source: 'canvas-source',
            'paint': {
                'raster-opacity': 0.65,
                'raster-fade-duration': 0
            }
        });
        canvas.style.display = 'none';
        console.timeEnd('timer');
    }
});
好的,以下是一个使用d3d3-contour绘制等高线的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 Contour Example</title> <script src="https://d3js.org/d3.v5.min.js"></script> <script src="https://d3js.org/d3-cont.v1.min.js"></script> </head> <body> <svg width="800" height="600"></svg> <script> // 定义数据 const data = [ [0, 0, 1, 2, 2, 1, 0, 0], [0, 2, 5, 5, 4, 2, 0, 0], [1, 3, 5, 6, 5, 3, 1, 0], [1, 3, 5, 7, 6, 4, 1, 0], [0, 2, 4, 6, 5, 3, 0, 0], [0, 1, 3, 4, 3, 2, 0, 0], [0, 0, 1, 2, 2, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0] ]; // 定义颜色比例尺 const color = d3.scaleSequential(d3.interpolateGreys).domain([0, 10]); // 创建等高线生成器 const contour = d3.contour() .size([data[0].length, data.length]) .thresholds(d3.range(0, 10, 1)); // 生成等高线数据 const contours = contour(data); // 创建SVG元素 const svg = d3.select("svg"); // 创建路径元素,绘制等高线 svg.selectAll("path") .data(contours) .enter().append("path") .attr("d", d3.geoPath(d3.geoIdentity().scale(80))) .attr("fill", d => color(d.value)) .attr("stroke", "none"); </script> </body> </html> ``` 在上述示例代码中,我们首先定义了一个8x8的数据矩阵,然后定义了一个颜色比例尺和一个等高线生成器,最后使用d3.geoPath和d3.geoIdentity来绘制等高线路径,并使用颜色比例尺为等高线填充颜色。你可以根据实际需求修改数据和配置参数来绘制不同的等高线。
评论 32
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

牛老师讲GIS

感谢老板支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值