「AntV」全球AQI数据获取与L7可视化
1. 引言
L7 地理空间数据可视分析引擎是一种基于 WebGL 技术的地理空间数据可视化引擎，可以用于实现各种地理空间数据可视化应用。L7 引擎支持多种数据源和数据格式，包括 GeoJSON、CSV等，可以快速加载和渲染大规模地理空间数据。L7 引擎还提供了丰富的可视化效果和交互功能，包括热力图、等高线图、鼠标交互等，可以帮助用户更好地理解和分析地理空间数据。
L7 官网：蚂蚁地理空间数据可视化 | AntV (antgroup.com)
L7 GitHub 仓库：antvis/L7: Large-scale WebGL-powered Geospatial Data Visualization analysis engine (github.com)
L7 官方教程：简介 | L7 (antgroup.com)
L7 官方示例：所有图表 | L7 (antgroup.com)
L7 API文档：场景 Scene | L7 (antgroup.com)
本文描述使用L7对全球AQI数据进行可视化
2. 数据获取
全球AQI数据可从这个网站获取：World's Air Pollution: Real-time Air Quality Index (waqi.info)
进入这个网站后打开控制台，刷新网页重新加载，找到000.json
在000.json上右键并在新标签页中打开：
在新标签页中右键并另存为：
即可获得JSON数据
3. L7可视化
可参考官方散点图样例：简单点 | L7 (antgroup.com)
3.1 加载底图
加载高德地图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='https://unpkg.com/@antv/l7'></script>
<style>
body,
#map {
height: 100vh;
width: 100vw;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const scene = new L7.Scene({
id: 'map',
map: new L7.GaodeMap({
center: [116.3956, 39.9392],
zoom: 2,
style: 'light'
})
});
</script>
</body>
</html>
3.2 加载数据并解析
根据数据内容，将经纬度数组转置以符合L7的数据格式：
scene.on('loaded', () => {
fetch('./000.json')
.then(res => res.json())
.then(data => {
data = data.stations
data.forEach(item => {
item.g.reverse()
})
console.log(data);
})
});
3.3 绘制样式
绘制点图层，并设置样式：
const layer = new L7.PointLayer()
.source(data, {
parser: {
type: 'json',
coordinates: 'g'
}
})
.shape('circle')
.color('a', (value) => {
// 大于0小于50的绿色
if (value > 0 && value < 50) {
return '#00ff00'
} else if (value > 50 && value < 100) {
// 大于50小于100的蓝色
return '#0000ff'
} else if (value > 100) {
// 大于100的红色
return '#ff0000'
}
})
.size('a', (value) => {
// 根据value值设置点的大小
let a = value / 100 + 2;
return a;
})
.active(true);
scene.addLayer(layer);
3.4 完整代码
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src='https://unpkg.com/@antv/l7'></script>
<style>
body,
#map {
height: 100vh;
width: 100vw;
margin: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const scene = new L7.Scene({
id: 'map',
map: new L7.GaodeMap({
center: [116.3956, 39.9392],
zoom: 2,
style: 'light'
})
});
scene.on('loaded', () => {
fetch('./000.json')
.then(res => res.json())
.then(data => {
data = data.stations
data.forEach(item => {
item.g.reverse()
})
// console.log(data);
const layer = new L7.PointLayer()
.source(data, {
parser: {
type: 'json',
coordinates: 'g'
}
})
.shape('circle')
.color('a', (value) => {
// 大于0小于50的绿色
if (value > 0 && value < 50) {
return '#00ff00'
} else if (value > 50 && value < 100) {
// 大于50小于100的蓝色
return '#0000ff'
} else if (value > 100) {
// 大于100的红色
return '#ff0000'
}
})
.size('a', (value) => {
// 根据value值设置点的大小
let a = value / 100 + 2;
return a;
})
.active(true);
scene.addLayer(layer);
});
});
</script>
</body>
</html>
4. 参考资料
[3] 场景 Scene | L7 (antgroup.com)
「AntV」全球AQI数据获取与L7可视化的更多相关文章
- DataPipeline丨「自定义」数据源，解决复杂请求逻辑外部数据获取难题
A公司专注为各种规模和复杂程度的金融投资机构提供一体化投资管理系统,系统主要由投资组合管理.交易执行管理.实时监控管理.风险管理等功能模块构成.随着企业管理产品数量的不断增多,大量数据分散在各券商系统 ...
- 一个「学渣」从零开始的Web前端自学之路
从 13 年专科毕业开始,一路跌跌撞撞走了很多弯路,做过餐厅服务员,进过工厂干过流水线,做过客服,干过电话销售可以说经历相当的“丰富”. 最后的机缘巧合下,走上了前端开发之路,作为一个非计算机专业且低 ...
- 36氪首发 | 「myShape」完成千万级人民币 Pre-A轮融资，推出 AI 智能健身私教
无需任何可穿戴设备. 36氪获悉,myShape(原Shapejoy)已于近期完成千万级人民币的Pre-A轮融资,由天奇阿米巴领投,远洋集团.七熹资本以及老股东跟投.过去 myShape 曾获得元迅资 ...
- 「案例」让房东在 Airbnb 上展示他们的热情好客
如何才能让房东准确的描述自己的房源,如何才能让房东充分的展示自己的房源.Airbnb 在这次更新里尝试去解决了这两个问题,让我们跟随作者的文笔去了解一下整个项目的经过. 关于本文 原文作者:Cecil ...
- 「Azure」数据分析师有理由爱Azure之一-Azure能带给我们什么？
前面我们以相同的方式从数据分析师的视角介绍了Sqlserver,本系列亦同样地延续下去,同样是挖掘数据分析师值得使用的Azure云平台的功能.因云平台功能太多,笔者所接触的面也十分有限,有更专业的读者 ...
- 「MoreThanJava」当大学选择了计算机之后应该知道的
「MoreThanJava」 宣扬的是 「学习,不止 CODE」,本系列 Java 基础教程是自己在结合各方面的知识之后,对 Java 基础的一个总回顾,旨在 「帮助新朋友快速高质量的学习」. 当然 ...
- 面试都在问的「微服务」「RPC」「服务治理」「下一代微服务」一文带你彻底搞懂！
❝ 文章每周持续更新,各位的「三连」是对我最大的肯定.可以微信搜索公众号「 后端技术学堂 」第一时间阅读(一般比博客早更新一到两篇) ❞ 单体式应用程序 与微服务相对的另一个概念是传统的「单体式应用程 ...
- 「MoreThanJava」计算机系统概述
「MoreThanJava」 宣扬的是 「学习,不止 CODE」,本系列 Java 基础教程是自己在结合各方面的知识之后,对 Java 基础的一个总回顾,旨在 「帮助新朋友快速高质量的学习」. 当然 ...
- 10月1日之后，你新建的GitHub库默认分支不叫「master」了
从 2020 年 10 月 1 日开始,GitHub 上的所有新库都将用中性词「main」命名,取代原来的「master」,因为后者是一个容易让人联想到奴隶制的术语. 这个决定并不是最近才做出的.今年 ...
- 「译」JUnit 5 系列：条件测试
原文地址:http://blog.codefx.org/libraries/junit-5-conditions/ 原文日期:08, May, 2016 译文首发:Linesh 的博客:「译」JUni ...
随机推荐
- CF739A Alyona and mex 题解
题目传送门 前置知识 贪心 | 构造 解法 从贪心的角度分析,最小的 \(\operatorname{mex}\) 仅会与长度最小的区间有关:另外为使得 \(\operatorname{mex}\) ...
- GCC项目的文件组织和编译步骤分解
C项目的文件组织和编译 C项目的代码, 由头文件(.h后缀)和C文件(.c后缀)组成 C语言的函数和变量, 分声明和定义两个阶段 头文件和C文件是等价的, 相当于C文件的一部分, 其功能由人为划分, ...
- Swoole从入门到入土(23)——多进程[进程池Process\Pool]
Swoole提供的进程池为Process\Pool,基于 Swoole\Server 的 Manager 管理进程模块实现.可管理多个工作进程.该模块的核心功能为进程管理,相比 Process 实现多 ...
- 我们在SqlSugar开发框架中，用到的一些设计模式
我们在<SqlSugar开发框架>中,有时候都会根据一些需要引入一些设计模式,主要的目的是为了解决问题提供便利和代码重用等目的.而不是为用而用,我们的目的是解决问题,并在一定的场景下以水到 ...
- 开源大语言模型作为 LangChain 智能体
概要 开源大型语言模型 (LLMs) 现已达到一种性能水平,使它们适合作为推动智能体工作流的推理引擎: Mixtral 甚至在我们的基准测试中 超过了 GPT-3.5,并且通过微调,其性能可以轻易的得 ...
- Direct2D 另一种与D3D创建类似的方法
在进行D2D学习的时候,发现了这样一篇文档, Direct2D Quickstart for Windows 8 只有这么一小段介绍, Direct2D is a native-code, immed ...
- 尝试通过uniapp仿微信页面
最近一直想弄一个app,然后刚好看到Uniapp这个技术,然后最近就用几个晚上琢磨了下: 先看下成果: 1.通讯页面,这个是通过插件uni-indexed-list 索引列表 进行改造过后:改造过程还 ...
- 【LeetCode二叉树#19】有序数组转换为二叉搜索树（构造二叉树）
将有序数组转换为二叉搜索树 力扣题目链接(opens new window) 将一个按照升序排列的有序数组,转换为一棵高度平衡二叉搜索树. 本题中,一个高度平衡二叉树是指一个二叉树每个节点 的左右两个 ...
- ubantu18.04使用APT安装go环境指令报错解决方案
在ubantu下使用sudo apt install golang-go指令安装go环境,安装过程没有报错,在使用时无法识别指令,报错如下: root@sh001:~# go env -w GOPRO ...
- pip相关知识
正常安装语法 # 安装单个 pip install some-package # 安装指定版本 pip install some-package==版本号 # 查看当前模块版本号 pip instal ...