概述

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

效果

实现

1.数据格式说明

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

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

说明：

header节点为头文件，用以说明数据的信息，其中：la1为左上，lo1为左下，la2为右下，lo2为右上，nx为行数，ny为列数。
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');}
});

结合d3.js实现气象数据的可视化相关推荐

利用d3.js对大数据资料进行可视化分析
insight-labs · 2013/12/19 18:18 作者: [email protected] [email protected] 0x00 背景对于前段时间流出的QQ群数据大家想必已经 ...
AMap + echarts、google map + d3.js分别实现数据可视化中的飞线图（迁徙图）
首先肯定是给出demo啦: 演示demo 直接到左侧选择框中选择View taxi flow里面随便选个日期总体介绍最近由于工作室项目需要做一个数据可视化平台,这个平台最终是交由国外人使用的.而国 ...
h5 数字变化_前端/h5 D3.js实现根据数据动态更新图形/类似进度实时变化效果
最近接到一个需求,在满足规则下,实现类似这种展示效果,其实就是用图形反映数据(NK,一种干扰值) 运行后,它其实是不断在动的,每格都可能显示灰色或者彩色这里一共是10个格子,每格代表一个范围边界,说 ...
气象数据的可视化展现形式
色斑图很多气象要素都可以使用色斑图来展示,通常有格点数据(如降水.气温等),雷达数据(如反射率.回波顶高.液态水含量等),还有卫星云图.数值预报等. 使用色斑图进行展示时,通常会在某个角落显示色标图 ...
leaflet 结合 d3.js 实现 geojson 数据地形剖面分析(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
python qt gui与数据可视化编程 kindle_Kindle电子书 – D3.js数据可视化实战手册 azw3...
豆瓣评分:7.0 27人评价简介: 如今这个互联网时代,人们每天都产生海量的数据,如果直接面对这些数据,可能让人无从下手.将数据可视化,用形象立体的形式将其展现,有利于分析其中的关联,攫取可能存在的 ...
3、Spark 和 D3.js 分析航班大数据
实验资源 1998.csv airports.csv 实验环境 VMware Workstation Ubuntu 16.04 spark-2.4.5 scala-2.12.10 实验内容 " ...
D3.js 教程: 使用 JavaScript 创建可交互的柱状图
原文链接:D3.js Tutorial: Building Interactive Bar Charts with JavaScript 译者:OFED 最近,我们有幸参与了一个机器学习项目,该项目涉 ...
d3.js 制作简单的俄罗斯方块
d3.js是一个不错的可视化框架,同时对于操作dom也是十分方便的.今天我们使用d3.js配合es6的类来制作一个童年小游戏--俄罗斯方块.话不多说先上图片. 1. js tetris类由于方法拆分 ...

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

概述

效果

实现

1.数据格式说明

2. 实现代码

结合d3.js实现气象数据的可视化相关推荐

最新文章

热门文章