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：

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

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

npm install @antv/l7

2.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>

</head>

<body>

  <div id="map"></div>

  <script>

    const scene = new L7.Scene({

      id: 'map',

      map: new L7.GaodeMap({

        style: 'dark',

        center: [110.770672, 34.159869]

      }),

    });

  </script>

</body>

</html>

结果如下：

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

2.2 加载底图

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

<!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.Map({

        center: [110.770672, 34.159869],

        zoom: 4

      }),

    });

    const url1 =

      'https://t0.tianditu.gov.cn/img_w/wmts?tk=b72aa81ac2b3cae941d1eb213499e15e&';

    const layer1 = new L7.RasterLayer({

      zIndex: 1,

    }).source(url1, {

      parser: {

        type: 'rasterTile',

        tileSize: 256,

        wmtsOptions: {

          layer: 'img',

          tileMatrixset: 'w',

          format: 'tiles',

        },

      },

    });

    scene.on('loaded', () => {

      scene.addLayer(layer1);

    });

  </script>

</body>

</html>
  • 注意：L7目前只支持 3857 坐标系

结果如下：

2.3 加载矢量数据

L7支持 GeoJSON数据

<!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: 10,

        style: 'dark'

      })

    });

    scene.on('loaded', () => {

      fetch(

        'https://gw.alipayobjects.com/os/basement_prod/0d2f0113-f48b-4db9-8adc-a3937243d5a3.json'

      )

        .then(res => res.json())

        .then(data => {

          const layer = new L7.LineLayer({})

            .source(data)

          scene.addLayer(layer);

        });

    });

  </script>

</body>

</html>

结果如下：

2.4 Marker标注

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

<!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>

</head>

<body>

  <div id="map"></div>

  <script>

    const scene = new L7.Scene({

      id: 'map',

      map: new L7.GaodeMap({

        style: 'light',

        center: [110.770672, 34.159869]

      }),

    });

    const marker = new L7.Marker({

      color: '#f00'

    }).setLnglat([110.770672, 34.159869]);

    scene.addMarker(marker);

  </script>

</body>

</html>

结果如下：

2.5 Popup弹窗

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

<!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>

</head>

<body>

  <div id="map"></div>

  <script>

    const scene = new L7.Scene({

      id: 'map',

      map: new L7.GaodeMap({

        style: 'light',

        center: [110.770672, 34.159869]

      }),

    });

    const popup = new L7.Popup({

      title: '自定义标题',

      html: '<p>Popup 示例的自定义内容</p>',

      lngLat: {

        lng: 110.770672,

        lat: 34.159869,

      },

    });

    scene.addPopup(popup);

  </script>

</body>

</html>

结果如下：

2.6 事件监听

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

<!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>

</head>

<body>

  <div id="map"></div>

  <script>

    const scene = new L7.Scene({

      id: 'map',

      map: new L7.GaodeMap({

        style: 'light',

        center: [110.770672, 34.159869]

      }),

    });

    setTimeout(() => {

      scene.on('click', (e) => {

        console.log(e) // 鼠标左键点击事件

        const marker = new L7.Marker({

          color: '#f00'

        }).setLnglat([e.lnglat.lng, e.lnglat.lat]);

        scene.addMarker(marker);

      });

    }, 1000);

    // scene.on('click', (e) => {console.log(e)}); // 直接监听click事件会报错

  </script>

</body>

</html>

结果如下：

2.7 地图控件

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

<!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: 10,

        style: 'light'

      })

    });

    scene.on('loaded', () => {

      const zoom = new L7.Zoom();

      scene.addControl(zoom);

      const scale = new L7.Scale();

      scene.addControl(scale);

    });

  </script>

</body>

</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. 微软wsl2启用天父行程systemd

    默认情况下 微软wsl2的天父行程是init,没办法使用systemctl相关指令,所以想使用天父行程 systemd. 本文以Wsl2 Alma Linux为例,启用systemd 上帝与你同在,阿 ...

  2. MyBatis 源码

    一.准备工作 MyBatis 工作流程:应用程序首先加载 mybatis-config.xml 配置文件,并根据配置文件的内容创建 SqlSessionFactory 对象:然后,通过 SqlSess ...

  3. 多线程基础之CAS、AQS、ABA辨析

    这三个单词算是多线程面试常见的问题了,也是很多小白不太懂的问题,这里给出我的理解来. 一.CAS J.U.C 并发包中的很多类都涉及到了 CAS,可以说没有 CAS 和 volatile 就没有 J. ...

  4. instanceof 的原理

    涉及面试题: instanceof 的原理是什么? instanceof 可以正确的判断对象的类型,因为内部机制是通过判断对象的原型链中是不是 能找到类型的 prototype 实现一下 instan ...

  5. 怎么在php7项目中安装event扩展

    今天就跟大家聊聊有关怎么在php7项目中安装event扩展,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获. 安装支持库libevent wget ...

  6. MySQL 8.0：无锁可扩展的 WAL 设计

    这篇文章整理自MySQL官方文档,介绍了8.0在预写式日志上实现上的修改,观点总结如下: 在8.0以前,为了保证flush list的顺序,redo log buffer写入过程需要加锁,无法实现并行 ...

  7. Python之进程管理

    使用python创建进程 from multiprocessing import Process # 导入进程模块 import time # 定义一个函数,测试创建进程使用 def task(nam ...

  8. 免费，小巧好用的pdf阅读器以及护眼模式颜色代码

    免费,迷你,小巧pdf阅读器 https://www.sumatrapdfreader.org/downloadafter 网络上流行的眼神RGB值和颜色代码 绿色豆沙可以有效减轻长时间使用电脑的眼睛 ...

  9. pysimplegui之运行多个窗口

    运行多个窗口 这就是 PySimpleGUI 继续简单的地方,但问题空间刚刚进入"复杂"领域. 如果您希望在事件循环中运行多个窗口,那么有两种方法可以做到这一点. 当第二个窗口可见 ...

  10. [Linux]U盘启动盘安装CentOS7系统(LiveGNOME版)

    1 准备:工具 U盘 容量:视CentOS具体版本需要而定.推荐4G+ UltraISO(软碟通) ISO制作工具 / U盘启动盘刻录工具 2 制作:U盘启动盘 step1 下载CentOS镜像 Ce ...