antv-l7/packages/site/docs/tutorial/map/tianditu.zh.md

title	order
天地图	2

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

实现

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

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);
});