「AntV」路网数据获取与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对路网数据进行可视化
2. 数据获取
路网数据可以从以下网站下载，数据来源自OSM：Index of /extracts (openstreetmap.fr)
其中，中国的路网数据可以从这个下载：Index of /extracts/asia/china (openstreetmap.fr)
笔者这里下载上海的数据：http://download.openstreetmap.fr/extracts/asia/china/shanghai.osm.pbf
下载好以后可以直接拖入QGIS中：
- 注：这里加载了
Lines，数据量较大，绘制卡顿。且路网质量也欠佳
在图层上右键选择导出：
导出为GeoJSON：
导出的数据尺寸为84 MB，至此数据获取完成
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对于GeoJSON无需额外设置解析器：
scene.on('loaded', () => {
fetch('./lines.geojson')
.then(res => res.json())
.then(data => {
console.log(data);
})
});
3.3 绘制样式
绘制线图层，并设置样式：
const layer = new L7.LineLayer({
zIndex: 2,
})
.source(data)
.size(0.5)
.active(true)
.color('highway', (type) => {
switch (type) {
case "bridleway" :
return '#c81841';
case "bus_guideway" :
return '#39a0cc';
case "bus_stop" :
return '#0d70cc';
case "busway" :
return '#d385dd';
case "construction" :
return '#30e5dc';
case "corridor" :
return '#ca6166';
case "cycleway" :
return '#c94534';
case "elevator" :
return '#c3ee79';
case "footway" :
return '#df7f53';
case "living_street" :
return '#0d2dce';
case "motorway" :
return '#c8659f';
case "motorway_link" :
return '#15d066';
case "path" :
return '#cab646';
case "pedestrian" :
return '#2ddb95';
case "planned" :
return '#36cd25';
case "platform" :
return '#d99b1f';
case "primary" :
return '#75cc53';
case "primary_link" :
return '#e31eb2';
case "proposed" :
return '#4e2bec';
case "raceway" :
return '#c8721c';
case "residential" :
return '#6ced77';
case "road" :
return '#57e079';
case "secondary" :
return '#2063e9';
case "secondary_link" :
return '#7aec1d';
case "service" :
return '#58d9ed';
case "services" :
return '#1fe3b9';
case "steps" :
return '#e010d2';
case "tertiary" :
return '#adca37';
case "tertiary_link" :
return '#d0d32e';
case "track" :
return '#e04684';
case "trunk" :
return '#b232e4';
case "trunk_link" :
return '#822dcd';
case "unclassified" :
return '#a686de';
case "null" :
return '#1f1bef';
case "" :
return '#beb297';
default:
return '#beb297';
}
});
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: 'dark'
})
});
scene.on('loaded', () => {
fetch('./lines.geojson')
.then(res => res.json())
.then(data => {
const layer = new L7.LineLayer({
zIndex: 2,
})
.source(data)
.size(0.5)
.active(true)
.color('highway', (type) => {
switch (type) {
case "bridleway" :
return '#c81841';
case "bus_guideway" :
return '#39a0cc';
case "bus_stop" :
return '#0d70cc';
case "busway" :
return '#d385dd';
case "construction" :
return '#30e5dc';
case "corridor" :
return '#ca6166';
case "cycleway" :
return '#c94534';
case "elevator" :
return '#c3ee79';
case "footway" :
return '#df7f53';
case "living_street" :
return '#0d2dce';
case "motorway" :
return '#c8659f';
case "motorway_link" :
return '#15d066';
case "path" :
return '#cab646';
case "pedestrian" :
return '#2ddb95';
case "planned" :
return '#36cd25';
case "platform" :
return '#d99b1f';
case "primary" :
return '#75cc53';
case "primary_link" :
return '#e31eb2';
case "proposed" :
return '#4e2bec';
case "raceway" :
return '#c8721c';
case "residential" :
return '#6ced77';
case "road" :
return '#57e079';
case "secondary" :
return '#2063e9';
case "secondary_link" :
return '#7aec1d';
case "service" :
return '#58d9ed';
case "services" :
return '#1fe3b9';
case "steps" :
return '#e010d2';
case "tertiary" :
return '#adca37';
case "tertiary_link" :
return '#d0d32e';
case "track" :
return '#e04684';
case "trunk" :
return '#b232e4';
case "trunk_link" :
return '#822dcd';
case "unclassified" :
return '#a686de';
case "null" :
return '#1f1bef';
case "" :
return '#beb297';
default:
return '#beb297';
}
});
scene.addLayer(layer);
});
});
</script>
</body>
</html>
4. 参考资料
[3] 场景 Scene | L7 (antgroup.com)
「AntV」路网数据获取与L7可视化的更多相关文章
- 「福利」Java Swing 编写的可视化算法工程，包含树、图和排序
之前在整理<学习排序算法,结合这个方法太容易理解了>这篇文章时,发现了一个用 Java Swing 编写的可视化算法工程,真心不错!包含了常用数据结构和算法的动态演示,先来张图感受下: 可 ...
- 「工具」Dubbo可视化测试工具的设计和实现
「工具」Dubbo可视化测试工具的设计和实现 学习了:https://blog.csdn.net/qq355667166/article/details/78914453
- DataPipeline丨「自定义」数据源，解决复杂请求逻辑外部数据获取难题
A公司专注为各种规模和复杂程度的金融投资机构提供一体化投资管理系统,系统主要由投资组合管理.交易执行管理.实时监控管理.风险管理等功能模块构成.随着企业管理产品数量的不断增多,大量数据分散在各券商系统 ...
- 一个「学渣」从零开始的Web前端自学之路
从 13 年专科毕业开始,一路跌跌撞撞走了很多弯路,做过餐厅服务员,进过工厂干过流水线,做过客服,干过电话销售可以说经历相当的“丰富”. 最后的机缘巧合下,走上了前端开发之路,作为一个非计算机专业且低 ...
- 一个只需要点 「下一步」就完成监控 Windows
Cloud Insight 此前已然支持 Linux 操作系统,支持20多中数据库中间件等组件,多种操作,多种搭配,服务器监控玩的其乐无穷啊!但想想还有许多 Windows 的小伙伴没有体验过,所以在 ...
- 把虚拟教练带回家，「EuMotus」想用AI实现高精度运动反馈系统
https://36kr.com/p/5089139.html 无需穿戴设备,只需一个红外摄像头和+已安装好EuMotus专利软件的手提电脑 由政府主导的高达2200亿美金的健身与运动支出,15%的健 ...
- 36氪首发 | 「myShape」完成千万级人民币 Pre-A轮融资，推出 AI 智能健身私教
无需任何可穿戴设备. 36氪获悉,myShape(原Shapejoy)已于近期完成千万级人民币的Pre-A轮融资,由天奇阿米巴领投,远洋集团.七熹资本以及老股东跟投.过去 myShape 曾获得元迅资 ...
- 「Python」socket指南
开始 网络中的 Socket 和 Socket API 是用来跨网络的消息传送的,它提供了 进程间通信(IPC) 的一种形式.网络可以是逻辑的.本地的电脑网络,或者是可以物理连接到外网的网络,并且可以 ...
- 「Azure」数据分析师有理由爱Azure之一-Azure能带给我们什么？
前面我们以相同的方式从数据分析师的视角介绍了Sqlserver,本系列亦同样地延续下去,同样是挖掘数据分析师值得使用的Azure云平台的功能.因云平台功能太多,笔者所接触的面也十分有限,有更专业的读者 ...
- 《Offer一箩筐》一份高质量「简历」撰写指南，望打扰！！
「MoreThanJava」 宣扬的是 「学习,不止 CODE」. 如果觉得 「不错」 的朋友,欢迎 「关注 + 留言 + 分享」,文末有完整的获取链接,您的支持是我前进的最大的动力! Hi~ 这里是 ...
随机推荐
- JS leetcode 有多少小于当前数字的数字 解题分析，你应该了解的桶排序
壹 ❀ 引 刷题其实一直没断,只是这两天懒得整理题目...那么今天来记录一道前天做的题,题目本身不难,不过拓展起来还是有些东西可以讲,题目来自leetcode有多少小于当前数字的数字,题目描述如下: ...
- Js模块化导入导出
Js模块化导入导出 CommonJs.AMD.CMD.ES6都是用于模块化定义中使用的规范,其为了规范化模块的引入与处理模块之间的依赖关系以及解决命名冲突问题,并使用模块化方案来使复杂系统分解为代码结 ...
- 微信小程序实现原理
微信小程序实现原理 微信小程序采用wxml.wxss.javascript进行开发,本质是一个单页应用,所有的页面渲染和事件处理,都在一个页面内进行,但又可以通过微信客户端调用原生的各种接口.微信的架 ...
- Spring boot 2.0启动自动执行sql语句
项目地址:https://gitee.com/indexman/spring_boot_in_action 1.准备sql文件 将department.sql放到resources路径下 /* Nav ...
- Windows 进程的一些学习笔记
进程的内存映像是指内核在内存中如何存放可执行程序文件. 在将程序转化为进程的过程中,操作系统将可执行程序由硬盘复制到内存. 可执行程序和内存映像的区别 可执行程序位于磁盘中而内存映像位于内存中: 可执 ...
- git bash 的一些使用
一般使用git bash需要的命令 先打开git bash: git init 可以初始化一个本地的仓库 git status 查看仓库信息 mkdir test 创建一个test的文件夹 cd te ...
- pigz命令
多线程的解压缩文件 语法格式:pigz 参数 文件名 常用参数 -- 显示压缩后的内容 -p 设置线程数 -b 设置文件数据块大小 -q 静默执行模式 -d 将压缩文件恢复为原始文件 -r 递归处理所 ...
- 对find命令结果进行操作
# find匹配到一些文件后,可能希望对其进行一些操作,这时就可以使用-exec选项,exec选项后面跟着所要执行的命令,然后是一对{},一个空格和一个\,最后是一个分号; find . -type ...
- 解读平台工程，DevOps真的死了吗？不，它只是换了个马甲而已，弥补了DevOps空心理论，让DevOps继续发展壮大
最**台工程这个概念越来越火爆,Gartner 的预测,到 2026 年,80% 的软件工程组织将拥有*台工程团队,来提供内部服务.组件和应用程序交付工具,作为可重复使用的资源.本篇文章将带你走进*台 ...
- 【LeetCode回溯算法#11】解数独，这次是真的用回溯法处理二维数组
解数独 力扣题目链接(opens new window) 编写一个程序,通过填充空格来解决数独问题. 一个数独的解法需遵循如下规则: 数字 1-9 在每一行只能出现一次. 数字 1-9 在每一列只能出 ...