mirror of https://gitee.com/antv-l7/antv-l7
56 lines
1.2 KiB
Markdown
56 lines
1.2 KiB
Markdown
---
|
|||
title: 天地图
|
|||
order: 2
|
|||
---
|
|||
|
|||
`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);
|
|||
});
|
|||
|
|||
```
|
