AntV L7 快速入门示例

最新推荐文章于 2024-04-24 09:54:19 发布
最新推荐文章于 2024-04-24 09:54:19 发布
阅读量1.3k 收藏 5
点赞数 4
文章标签： java
原文链接：https://www.cnblogs.com/jiujiubashiyi/p/17444013.html
版权

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>

结果如下：

image-20230530160526639

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 坐标系

结果如下：

image-20230530164635434
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>

结果如下：

image-20230530174539998
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>

结果如下：

image-20230530170134233
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>

结果如下：

image-20230530165325005
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>

结果如下：

image-20230530173837195
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>

结果如下：

image-20230530175039617
3. 参考资料

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

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

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

快乐无限出发
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
AntV L7的控件
热爱WebGIS的博客
03-09 1173
本案例使用L7库和Mapbox GL JS创建 L7 的控件，包括 Logo 控件、比例尺控件、图层显隐控件、全屏控件、地图主题以及鼠标位置控件。
【antvl7】antvl7入门
不忘初心，坚定道路！
12-07 8004
前言 最近玩玩antvl7，很多时候，都需要整个地图之类的，让人觉得系统高大上，所以这玩意也是没法避免不写的。 申请账号 官方说不支持独立引擎，需要引入第三方，推荐高德。那么就先注册高德。 https://lbs.amap.com/api/javascript-api/guide/abc/prepare l7-react和l7 l7react是对l7封装的jsx，这个想法很好，可惜目前不成熟，特别是官网上文档还有很多没有，所以如果是简单用法可以用用，需要用复杂的用法建议直接放弃l7-react，使
项目中使用AntV L7地图（四）使用初始化地图并添加地图底图
最新发布
weixin_46561899的博客
04-24 433
官网地址https://l7.antv.antgroup.com/examples/map/map/#gaodemap。官网地址：https://www.tianditu.gov.cn/
vue3-mapboxgl-antv-L7开发（一）项目的搭建
ycc211215的博客
08-31 847
随着科技的飞速发展，智慧地球，智慧城市等一些名词不断的出现在我们的日常生活中，智慧化的完成离不开地理信息的，它们要获取到我们的位置信息，进而完成一些智能化的决策。
antV L7 控制不同图层的显隐
Working_hard_111的博客
08-29 807
antV L7 多选框控制图层的显隐
AntV L7初体验
热爱WebGIS的博客
03-06 1344
本案例使用 L7 库和 Mapbox GL JS 创建的简单地图可视化示例，加载点数据。
Antv L7 + mapbox 实现简单地图场景
07-18
在构建Web GIS应用时，Antv L7与Mapbox的结合使用可以创建出丰富的地图场景。Antv L7是阿里云推出的一款基于地图渲染库，主要用于大数据可视化的地图组件，而Mapbox则是一个强大的地图服务提供商，提供自定义地图...
antv l7 实现自定义地图 以及地图抬高图层 以及散点轮播显示弹窗 鼠标悬浮弹窗
10-31
文件列表中的`antv`可能包含了示例代码、配置文件或者数据文件，用于展示上述功能的实现。 总的来说，antv L7 提供了丰富的工具和方法，使得开发者能够方便地创建具有高级交互和视觉效果的地图应用。通过学习和掌握...
antv-l7地图可视化，全国地图支持省级下钻、悬浮预警、时间区间搜索
07-15
antv-l7地图可视化，全国地图支持省级下钻、悬浮预警、时间区间搜索
在Vue中使用antv的示例代码
10-15
在Vue中集成AntV图表库可以极大地提升数据可视化的能力。AntV是阿里巴巴推出的一套数据可视化解决方案，提供了多种图表类型，如柱状图、折线图、饼图等。本文将详细介绍如何在Vue项目中使用AntV的G2库进行数据图表的...
VisitorMapV:基于地理可视化的 AntV L7
07-24
VisitorMapV地理可视化，基于Antv的L7，访客数据来自个人博客：Project setupnpm installCompiles and hot-reloads for developmentnpm run devCompiles and minifies for productionnpm run build:prodRun your ...
Antv L7地图可视化
UncleDong的博客
05-10 6660
Antv是一款阿里开发的可视化框架，实例数据如https://antv-l7.gitee.io/zh/examples/point/bubble所示。由于官方教程需要配置npm的环境来import相应的包，本人对这个不太熟悉…因此就探索出了更加简单的方式。 参照例子仍是官方教程，不过代码有所修改。原文地址为https://l7.antv.vision/zh/docs/tutorial/map/amap，使用的是高德底图，demo代码如下： 画框的地方只要修改成https://gw.alipayobject
vue3使用AntV7|L7的平面区域标注图时出现警告:Canvas2D: Multiple readback operations using getImageData are faster...
m0_71683629的博客
10-19 5929
vsc工具、node16.20、vue3,解决方法,替换为旧版本
antvL7地图绘制
小小迎的博客
07-09 2558
antv/L7地图在线绘制 先下载依赖 npm install @antv/l7 @antv/l7-draw @antv/l7-maps --save 开始绘制 <template> <div id="map" class="map-contain"></div> </template> <script> import { Scene } from '@antv/l7'; import { GaodeMap } fro
项目中使用AntV L7地图（一）创建地图
weixin_46561899的博客
01-10 682
下载网址：https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4。代码中的四川地图数据。
antdesign 地图_“炫酷狂拽”的 AntV - L7 地图可视化设计
weixin_29240343的博客
01-14 1195
导读随着多媒体技术的发展，数据可视化呈现越来越丰富的多维度表达，尤其三维技术的成熟，给了可视化更多的想象空间，呈现出百花齐放的地理可视化景象，各类模拟城市应用则是在地理可视化领域的强劲运用，在惊叹空间维度下呈现的数据可视化之美的同时，基于 Ant Design 的价值观下，我们也期望 L7 地图可视化时刻呈现数据可视化的系统性与合理性。「知源，致远」不忘初心，方致千里，L7 从「心」出发，知设计体...
antV L7地图 自定义Popup弹窗 setHTML
Working_hard_111的博客
11-14 988
使用antV L7 绘制面图层、线图层、点图层以及自定义弹窗Popup的setHTML使用方法
AntV L7的城市建筑层组件
热爱WebGIS的博客
03-08 985
本案例使用L7库和Mapbox GL JS添加城市建筑层组件（CityBuildingLayer）。
antv l7 vue
07-27
AntV L7是一个基于WebGL的地理信息可视化开发库，可以在Vue项目中使用。要在Vue项目中使用AntV L7，首先需要在HTML文件中引入L7的脚本文件。可以使用CDN方式引入，例如： ```html <head> <!-- 引入最新版的L7 --> <script src='https://unpkg.com/@antv/l7'></script> <!-- 指定版本号引入L7 --> <script src='https://unpkg.com/@antv/l7@2.0.11'></script> </head> ``` 接下来，在Vue组件中安装AntV L7以及相关的组件引用。可以使用npm或yarn安装AntV L7，然后在Vue组件中引入所需的组件。例如，在data中创建一个变量来接收地图实例和组件： ```javascript import { Scene } from '@antv/l7'; export default { data() { return { scene: null, // 其他变量 } }, // 其他生命周期钩子函数 } ``` 在mounted钩子函数中生成地图实例，并加载数据生成地图。可以根据需求进行异步操作数据。例如： ```javascript mounted() { this.scene = new Scene({ // 地图配置 }); // 加载数据生成地图 this.loadDataAndCreateMap(); }, methods: { async loadDataAndCreateMap() { const data = await this.loadData(); // 异步加载数据 // 根据数据生成地图 // this.scene.addLayer(...) // 其他操作 }, // 其他方法 } ``` 最后，可以在Vue组件中渲染地图的DOM元素。例如，在HTML模板中添加一个div元素来渲染地图： ```html <template> <div id="mapContainer"></div> </template> ``` 这样就可以在Vue项目中使用AntV L7进行地图可视化开发了。请注意，具体的代码实现可能会根据项目需求有所不同，以上只是一个简单的示例。 #### 引用[.reference_title] - *1* [【Antv/Vue3】vue项目中使用antv/L7制作地图](https://blog.csdn.net/weixin_52378152/article/details/125429250)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [在vue项目中使用AntV L7地图下钻，异步调用不重复生成](https://blog.csdn.net/Grupass/article/details/127103298)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [antvl7绘制地图以及vue项目中使用多线程worker](https://blog.csdn.net/Mr__proto__/article/details/128975829)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值