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. 跳出思维的“盒子”，聊聊 RTE 应用创新大赛的那些作品

    由声网Agora 与环信联合主办的"RTE 2021 编程挑战赛"已圆满落幕.在今年的大赛中,来自行业中不同领域的专家参与了决赛评选,包括 Linux 中国技术社区技术负责人 白宦 ...

  2. Django笔记四之字段属性

    这篇笔记介绍的 field options,也就是 字段的选项属性. 首先,关于 model,是数据库与 python 代码里的一个映射关系,每一个 model 是django.db.models.M ...

  3. $\mathcal{Friends\,\,Of\,--Mathic}$

  4. MySQL相关优质文章推荐

    MySQL相关优质文章推荐 文章推荐 文章链接地址 MySQL高性能优化系列 MySQL字符集及校对规则的理解 MySQL InnoDB锁机制全面解析分享 MySQL事务隔离级别和MVCC,MVCC文 ...

  5. 一条SQL语句在MySQL中如何执行

    一条SQL语句在MySQL中如何执行 本篇文章会分析一个 sql 语句在 MySQL 中的执行流程,包括 sql 的查询在 MySQL 内部会怎么流转,sql 语句的更新是怎么完成的. 在分析之前我会 ...

  6. LeeCode链表问题（二）

    LeeCode 19: 删除链表的倒数第n个节点 题目描述: 给你一个链表,删除链表的倒数第 n 个节点,并返回链表的头节点. 标签:链表,双指针 时间复杂度:O(N) 建立模型: 定义虚拟头节点,使 ...

  7. STM32启动分析之main函数是怎样跑起来的

    1.MDK目标文件 1)MDK中C程序编译后的结果,即可执行文件数据分类: RAM ZI bss 存储未初始化的或初始化为0的全局变量和静态变量 heap 堆,系统malloc和free操作的内存 s ...

  8. openwrt开发使用-arping

    前言 IP冲突引起的网络异常,可以通过检查IP是否冲突,排除故障.我们可以用一些工具进行检查,例如arp-scan.arping软件进行查看. 这里使用arping进行检查设备的MAC地址,通过查查看 ...

  9. Java学习笔记02

    1. 运算符和表达式 运算符 ​ 就是对常量或者变量进行操作的符号. ​ 如:+ - * / 表达式 ​ 用运算符把常量或者变量连接起来的,符合Java语法的式子就是表达式. ​ 如:a + b ​ ...

  10. Junit启动测试mybatis xml文件BindingException: Invalid bound statement问题

    背景:1.正常启动,xml文件放在java目录和resource目录下均正常 2.junit启动,xml文件放在resource目录下正常,放在java目录下报BindingException错误 m ...