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