---
title: "天地图"
description: "天地图"
language: "zh"
canonical: "https://l7.antv.antgroup.com/zh/tutorial/map/tianditu/"
---

[资料索引](/llms.txt)

`L7` 支持通过瓦片图层的方式来加载天地图瓦片。

<div>
  <div style="width:60%;float:left; margin: 10px;">
    <img  width="80%" alt="案例" src='https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*2_vQT6N8Ug8AAAAAAAAAAAAADmJ7AQ/original'>
  </div>
</div>

### 实现

下面我们来介绍如何快速创建天地图地图。

```js
import { Scene, RasterLayer } from '@antv/l7';
import { Map } from '@antv/l7-maps';

const scene = new Scene({
  id: 'map',
  map: new Map({
    center: [90.268, 40.3628],
    zoom: 3,
  }),
});
scene.on('loaded', () => {
  // 底图服务
  const baseLayer = new RasterLayer({ zIndex: 1 }).source(
    'https://t1.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=6557fd8a19b09d6e91ae6abf9d13ccbd',
    {
      parser: {
        type: 'rasterTile',
        tileSize: 256,
      },
    },
  );
  // 注记服务
  const annotionLayer = new RasterLayer({ zIndex: 2 }).source(
    'https://t1.tianditu.gov.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=6557fd8a19b09d6e91ae6abf9d13ccbd',
    {
      parser: {
        type: 'rasterTile',
        tileSize: 256,
      },
    },
  );
  scene.addLayer(baseLayer);
  scene.addLayer(annotionLayer);
});
```