antv-l7/docs/api/map.en.md

---
title: 地图 Map
order: 2
---

# 简介

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

## Map

### 引入Map

```javascropt

   import { GaodeMap } from '@antv/l7-maps';

   import { Mapbox } from '@antv/l7-maps';
```

### 实例化

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

#### 高德地图实例化

```javascript

 const L7AMap = new GaodeMap({
    pitch: 35.210526315789465,
    style: 'dark',
    center: [ 104.288144, 31.239692 ],
    zoom: 4.4,
    token:'xxxx - token'
  })

```

#### Mapbox 地图实例化

```javascript
const scene = new Scene({
  id: 'map',
  map: new Mapbox({
    style: 'dark',
    center: [ 103.83735604457024, 1.360253881403068 ],
    pitch: 4.00000000000001,
    zoom: 10.210275860702593,
    rotation: 19.313180925794313
    token:'xxxx - token'
  })
});
```

### 传入外部实例

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

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

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

#### 传入高德地图实例

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

```

#### 传入Mapbox 地图实例

```javascript

 mapboxgl.accessToken =
      'pk.eyJ1IjoibHp4dWUiLCJhIjoiYnhfTURyRSJ9.Ugm314vAKPHBzcPmY1p4KQ';
    const map = new mapboxgl.Map({
      container: 'map', // container id
      style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
      center: [-74.5, 40], // starting position [lng, lat]
      zoom: 9, // starting zoom
    });

    const scene = new Scene({
      id: 'map',
      map: new Mapbox({
        mapInstance: map,
      }),
    });
```