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)

2. 快速上手

L7的主要特点是使用WebGL绘制地图数据，此处主要描述的是基础功能使用

通过CDN的方式可以快速引入L7：

  1. <script src = 'https://unpkg.com/@antv/l7'></script>

通过NPM的方式引入L7可参考：

  1. npm install @antv/l7

2.1 加载地图

加载地图：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <script src='https://unpkg.com/@antv/l7'></script>
  10. </head>
  12. <body>
  13.   <div id="map"></div>
  14.   <script>
  15.     const scene = new L7.Scene({
  16.       id: 'map',
  17.       map: new L7.GaodeMap({
  18.         style: 'dark',
  19.         center: [110.770672, 34.159869]
  20.       }),
  21.     });
  22.   </script>
  23. </body>
  25. </html>

结果如下：

L7内置了高德底图和Mapbox底图API，可以直接使用

2.2 加载底图

通常，使用栅格瓦片作为底图，L7 的栅格图层支持加载 TMS、WMS、WMTS 等多种格式的图片瓦片

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <script src='https://unpkg.com/@antv/l7'></script>
  10.   <style>
  11.     body,
  12.     #map {
  13.       height: 100vh;
  14.       width: 100vw;
  15.       margin: 0;
  16.     }
  17.   </style>
  18. </head>
  20. <body>
  21.   <div id="map"></div>
  22.   <script>
  23.     const scene = new L7.Scene({
  24.       id: 'map',
  25.       map: new L7.Map({
  26.         center: [110.770672, 34.159869],
  27.         zoom: 4
  28.       }),
  29.     });
  31.     const url1 =
  32.       'https://t0.tianditu.gov.cn/img_w/wmts?tk=b72aa81ac2b3cae941d1eb213499e15e&';
  33.     const layer1 = new L7.RasterLayer({
  34.       zIndex: 1,
  35.     }).source(url1, {
  36.       parser: {
  37.         type: 'rasterTile',
  38.         tileSize: 256,
  39.         wmtsOptions: {
  40.           layer: 'img',
  41.           tileMatrixset: 'w',
  42.           format: 'tiles',
  43.         },
  44.       },
  45.     });
  47.     scene.on('loaded', () => {
  48.       scene.addLayer(layer1);
  49.     });
  50.   </script>
  51. </body>
  53. </html>
  • 注意：L7目前只支持 3857 坐标系

结果如下：

2.3 加载矢量数据

L7支持 GeoJSON数据

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <script src='https://unpkg.com/@antv/l7'></script>
  10.   <style>
  11.     body,
  12.     #map {
  13.       height: 100vh;
  14.       width: 100vw;
  15.       margin: 0;
  16.     }
  17.   </style>
  18. </head>
  20. <body>
  21.   <div id="map"></div>
  22.   <script>
  23.     const scene = new L7.Scene({
  24.       id: 'map',
  25.       map: new L7.GaodeMap({
  26.         center: [116.3956, 39.9392],
  27.         zoom: 10,
  28.         style: 'dark'
  29.       })
  30.     });
  31.     scene.on('loaded', () => {
  32.       fetch(
  33.         'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'
  34.       )
  35.         .then(res => res.json())
  36.         .then(data => {
  37.           const layer = new L7.LineLayer({})
  38.             .source(data)
  39.           scene.addLayer(layer);
  40.         });
  41.     });
  42.   </script>
  43. </body>
  45. </html>

结果如下：

2.4 Marker标注

Marker标注是地图上用来标记信息的常用组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <script src='https://unpkg.com/@antv/l7'></script>
  10. </head>
  12. <body>
  13.   <div id="map"></div>
  14.   <script>
  15.     const scene = new L7.Scene({
  16.       id: 'map',
  17.       map: new L7.GaodeMap({
  18.         style: 'light',
  19.         center: [110.770672, 34.159869]
  20.       }),
  21.     });
  23.     const marker = new L7.Marker({
  24.       color: '#f00'
  25.     }).setLnglat([110.770672, 34.159869]);
  27.     scene.addMarker(marker);
  28.   </script>
  29. </body>
  31. </html>

结果如下：

2.5 Popup弹窗

Popup弹窗是地图上用来显示信息的常用组件

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <script src='https://unpkg.com/@antv/l7'></script>
  10. </head>
  12. <body>
  13.   <div id="map"></div>
  14.   <script>
  15.     const scene = new L7.Scene({
  16.       id: 'map',
  17.       map: new L7.GaodeMap({
  18.         style: 'light',
  19.         center: [110.770672, 34.159869]
  20.       }),
  21.     });
  23.     const popup = new L7.Popup({
  24.       title: '自定义标题',
  25.       html: '<p>Popup 示例的自定义内容</p>',
  26.       lngLat: {
  27.         lng: 110.770672,
  28.         lat: 34.159869,
  29.       },
  30.     });
  32.     scene.addPopup(popup);
  33.   </script>
  34. </body>
  36. </html>

结果如下：

2.6 事件监听

L7支持事件鼠标点击、双击等事件监听

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <script src='https://unpkg.com/@antv/l7'></script>
  10. </head>
  12. <body>
  13.   <div id="map"></div>
  14.   <script>
  15.     const scene = new L7.Scene({
  16.       id: 'map',
  17.       map: new L7.GaodeMap({
  18.         style: 'light',
  19.         center: [110.770672, 34.159869]
  20.       }),
  21.     });
  23.     setTimeout(() => {
  24.       scene.on('click', (e) => {
  25.         console.log(e) // 鼠标左键点击事件
  26.         const marker = new L7.Marker({
  27.           color: '#f00'
  28.         }).setLnglat([e.lnglat.lng, e.lnglat.lat]);
  29.         scene.addMarker(marker);
  30.       });
  31.     }, 1000);
  32.     // scene.on('click', (e) => {console.log(e)}); // 直接监听click事件会报错
  34.   </script>
  35. </body>
  37. </html>

结果如下：

2.7 地图控件

在使用地图时，常常需要使用缩放、比例尺等控件

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <script src='https://unpkg.com/@antv/l7'></script>
  10.   <style>
  11.     body,
  12.     #map {
  13.       height: 100vh;
  14.       width: 100vw;
  15.       margin: 0;
  16.     }
  17.   </style>
  18. </head>
  20. <body>
  21.   <div id="map"></div>
  22.   <script>
  23.     const scene = new L7.Scene({
  24.       id: 'map',
  25.       map: new L7.GaodeMap({
  26.         center: [116.3956, 39.9392],
  27.         zoom: 10,
  28.         style: 'light'
  29.       })
  30.     });
  32.     scene.on('loaded', () => {
  33.       const zoom = new L7.Zoom();
  34.       scene.addControl(zoom);
  35.       const scale = new L7.Scale();
  36.       scene.addControl(scale);
  37.     });
  39.   </script>
  40. </body>
  42. </html>

结果如下：

3. 参考资料

[1] 简介 | L7 (antgroup.com)

[2] 所有图表 | L7 (antgroup.com)

[3] 场景 Scene | L7 (antgroup.com)

AntV L7 快速入门示例的更多相关文章

  1. hibernate快速入门示例

    hibernate概述 hibernate是一个java的全自动ORM框架,它可以自动生成SQL语句.自动建表.自动执行,使用者可以不使用SQL完成数据的CRUD操作,同时它也是基于JPA规则的一种实 ...

  2. 【原创】SpringBoot & SpringCloud 快速入门学习笔记(完整示例)

    [原创]SpringBoot & SpringCloud 快速入门学习笔记(完整示例) 1月前在系统的学习SpringBoot和SpringCloud,同时整理了快速入门示例,方便能针对每个知 ...

  3. Castle IOC容器快速入门

    主要内容 1．为什么要IOC 2．什么是Castle IOC容器 3．快速入门示例 4．几个重要的概念 一,为什么要IOC IOC(控制反转或者叫依赖注入)Martin Fowler大师在他的文章中已 ...

  4. Mybatis学习（一） - 快速入门

    MyBatis是支持普通SQL查询,存储过程和高级映射的优秀持久层框架. MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装. MyBatis可以使用简单的XML或注解用 ...

  5. kafka快速入门（官方文档）

    第1步:下载代码 下载 1.0.0版本并解压缩. > tar -xzf kafka_2.11-1.0.0.tgz > cd kafka_2.11-1.0.0 第2步:启动服务器 Kafka ...

  6. Quartz.NET 快速入门

    官网:http://www.quartz-scheduler.net/ API:http://www.quartz-scheduler.net/documentation/index.html 快速入 ...

  7. 【翻译】WPF应用程序模块化开发快速入门（使用Prism+MEF）

    编译并运行快速入门 需要在VisualStudio 2010上运行此快速入门示例 代码下载:ModularityWithMef.zip 先重新生成解决方案 再按F5运行此示例 说明: 在此快速入门示例 ...

  8. mybatis框架快速入门

    通过快速入门示例,我们发现使用mybatis 是非常容易的一件事情,因为只需要编写 Dao 接口并且按照 mybatis要求编写两个配置文件,就可以实现功能.远比我们之前的jdbc方便多了.(我们使用 ...

  9. 【第四篇】ASP.NET MVC快速入门之完整示例（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  10. AngularJS快速入门指南19：示例代码

    本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...

随机推荐

  1. 详解ResNet 网络，如何让网络变得更“深”了

    摘要:残差网络(ResNet)的提出是为了解决深度神经网络的"退化"(优化)问题.ResNet 通过设计残差块结构,调整模型结构,让更深的模型能够有效训练更训练. 本文分享自华为云 ...

  2. 获得New Bing资格后，在Ubuntu环境下使用New Bing

    技术背景 如今基于GPT-4的New Bing,结合搜索引擎的功能,可以说已经达到了非常高的智力水平.虽说ChatGPT的出现打击了很多的行业,但是对我们来说也未必不是一种机遇.合理的使用ChatGP ...

  3. 美团面试：熟悉哪些JVM调优参数？

    本文已经收录到Github仓库,该仓库包含计算机基础.Java基础.多线程.JVM.数据库.Redis.Spring.Mybatis.SpringMVC.SpringBoot.分布式.微服务.设计模式 ...

  4. 快收藏！最全GO语言实现设计模式

    https://segmentfault.com/a/1190000042859564

  5. Service Mesh之Istio部署bookinfo

    前文我们了解了service mesh.分布式服务治理和istio部署相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/17281541.html:今天我 ...

  6. Docker容器中使用GPU

    背景 容器封装了应用程序的依赖项,以提供可重复和可靠的应用程序和服务执行,而无需整个虚拟机的开销.如果您曾经花了一天的时间为一个科学或 深度学习 应用程序提供一个包含大量软件包的服务器,或者已经花费数 ...

  7. python入门教程之十九cgi编程

    什么是CGI CGI 目前由NCSA维护,NCSA定义CGI如下: CGI(Common Gateway Interface),通用网关接口,它是一段程序,运行在服务器上如:HTTP服务器,提供同客户 ...

  8. [ORACLE]Oracle客户端SQLPlus安装与运用

    简述 sqlplus :oracle公司提供用户操作oracle数据库的工具. sqlplus是oracle原始数据操作的客户端,这种命令行的格式有着强大的逻辑性,如果经常使用会对数据库的理解加深很多 ...

  9. [数据库]MySQL之备份与恢复【未完待续】

    1 恢复 方式一 source sqlFile.sql 登陆MySQL 创建数据库db (create database db;) 进入/使用 数据库db (use db;) 将要导入的sql文件放到 ...

  10. 【KFC】JZ408 Koufu Contest 3 题解

    甲:ABC214 F - Substrings 乙:ARC117 C - Tricolor Pyramid 丙1:ARC110 E - Shorten ABC 丙2:AGC027 E - ABBrev ...