地图 Map

简介

L7 专注数据可视化层数据表达，目前 L7 还不支持独立的地图引擎，需要引入第三方引擎，目前支持 高德地图和 MapBox 两种。=L7 在内部解决了不同底图地图直接的差异，同时 L7 层面统一管理地图的操作方法。

Map

引入 Map

  1.    import { GaodeMap } from '@antv/l7-maps';
  3.    import { Mapbox } from '@antv/l7-maps';

实例化

⚠️ 使用地图申请地图 token，L7 内部设置了默认 token，仅供测试使用

高德地图实例化

高德地图 API 配置参数

  • token注册高德 API token
  • plugin {array} ['AMap.ElasticMarker','AMap.CircleEditor']

加载高德地图插件

  1. const L7AMap = new GaodeMap({
  2.   pitch: 35.210526315789465,
  3.   style: 'dark',
  4.   center: [104.288144, 31.239692],
  5.   zoom: 4.4,
  6.   token: 'xxxx - token',
  7.   plugin: [], // 可以不设置
  8. });

Mapbox 地图实例化

  1. const scene = new Scene({
  2.   id: 'map',
  3.   map: new Mapbox({
  4.     style: 'dark',
  5.     center: [103.83735604457024, 1.360253881403068],
  6.     pitch: 4.00000000000001,
  7.     zoom: 10.210275860702593,
  8.     rotation: 19.313180925794313,
  9.     token: 'xxxx - token',
  10.   }),
  11. });

传入外部实例

为了支持已有地图项目快速接入 L7 的能力，L7 提供传入地图实例的方法。如果你是新项目推荐使用 Scene 初始化地图

⚠️ scene id 参数需要地图的 Map 实例是同个容器。

⚠️ 传入地图实例需要自行引入相关地图的 API

⚠️ viewMode 设置为 3D 模式

传入高德地图实例

  1. const map = new AMap.Map('map', {
  2.   viewMode: '3D',
  3.   resizeEnable: true, // 是否监控地图容器尺寸变化
  4.   zoom: 11, // 初始化地图层级
  5.   center: [116.397428, 39.90923], // 初始化地图中心点
  6. });
  7. const scene = new Scene({
  8.   id: 'map',
  9.   map: new GaodeMap({
  10.     mapInstance: map,
  11.   }),
  12. });

示例地址代码地址

传入 Mapbox 地图实例

  1. mapboxgl.accessToken =
  2.   'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ';
  3. const map = new mapboxgl.Map({
  4.   container: 'map', // container id
  5.   style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
  6.   center: [-74.5, 40], // starting position [lng, lat]
  7.   zoom: 9, // starting zoom
  8. });
  10. const scene = new Scene({
  11.   id: 'map',
  12.   map: new Mapbox({
  13.     mapInstance: map,
  14.   }),
  15. });