# 瓦片地图
使用瓦片地图可以在三维场景中加载互联网地图或天信CAD瓦片地图。
注意
使用瓦片地图需要引入 @tx3d/tilemap 包；
当前互联网地图只支持局部范围的加载调度，不支持全球范围。
# 构建瓦片地图
使用 @tx3d/tilemap 包中的MapView类构建瓦片地图。
import { RenderOrder } from '@tx3d/core';
import {
DebugImageryProvider,
DefaultImageryProvider,
MapView,
TencentImageryProvider,
TerrainProvider
} from '@tx3d/tilemap';
// 构建瓦片地图
const mapView = new MapView( engine, {
extend: [ 50000, 50000 ], // 地图范围
longitude: 116.39712799999998, // 地图中心点经度值
latitude: 39.90968029312864, // 地图中心点纬度值
clipping: true, // 是否裁剪地图边界
renderOrder: RenderOrder.Default - 1, // 设置瓦片地图渲染顺序，可选，默认RenderOrder.Default
// 腾讯卫星影像数据“供应商”
imageryProvider: new TencentImageryProvider( {
url: 'https://{subdomain}.map.gtimg.com/sateTiles/{z}/{floorX}/{floorY}/{x}_{y}.jpg?version=240', // 数据服务地址
subdomains: [ 'p0', 'p1', 'p2', 'p3' ], // 子域名数组
minZoom: 8, // 最小缩放等级
maxZoom: 18 // 最大缩放等级
} ),
// 覆盖物数据“供应商”数组
overlayProviders: [
// 腾讯路网数据“供应商”
new DefaultImageryProvider( {
url: 'https://{subdomain}.map.gtimg.com/tile?z={z}&x={x}&y={y}&styleid=2&version=821', // 数据服务地址
flipY: true, // 由于腾讯地图瓦片坐标原点在左下角，需要反转Y坐标
subdomains: [ 'rt0', 'rt1', 'rt2', 'rt3' ], // 子域名数组
minZoom: 8, // 最小缩放等级
maxZoom: 18 // 最大缩放等级
} ),
// 调试数据“供应商”，用于真渲染片信息
//new DebugImageryProvider()
],
// 地形数据“供应商”，可选
// terrainProvider: new TerrainProvider()
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
# 地图边界裁剪
在构建瓦片地图时如果开启地图边界裁剪功能（即将clipping设置为true）。如果指定了裁剪边界（即clippingBounds属性不为空）渲染时会使用该边界进行裁剪，如果未指定则会使用地图范围进行裁剪。裁剪边界由type和bounds两部分数据组成，如下所示：
{
type: string,
bounds: (number[] | Vector2)[][]
}
1
2
3
4
2
3
4
🌏 type，边界坐标类型，可选 Geographic（经纬度坐标）、Geodetic（地测坐标）、Mercator（墨卡托投影坐标）；
🌏 bounds，边界数组，支持多条边界但不支持带孔洞的边界。
// 构建瓦片地图
const mapView = new MapView( engine, {
......,
clipping: true,
clippingBounds: {
type: 'Geographic',
bounds: [ [
[117.348611, 40.581141],
[117.389879, 40.561593],
[117.429915, 40.576141],
[117.412669, 40.605226],
......,
[117.348611, 40.581141]
] ]
},
......
} );
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
提示
瓦片地图初始化参数，详见MapViewParameters。
注意
开启地图边界裁剪功能，需要在初始化渲染器时开启模板缓冲，否则边界裁剪不会生效，如下所示：
import { Engine } from '@tx3d/core';
const engine = new Engine( {
sceneRenderer: {
stencil: true // 开启模板缓冲
}
} );
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
注意
影像数据、覆盖物数据、地形数据的坐标系需要一致。
# 瓦片地图属性
🌏 visible 可见性控制
// 获取瓦片地图可见性
const visible = mapView.visible;
// 设置瓦片地图可见性
mapView.visible = false;
1
2
3
4
5
2
3
4
5
🌏 opacity 透明度
// 获取瓦片地图透明度
const opacity = mapView.opacity;
// 设置瓦片地图透明度
mapView.opacity = 0.5;
1
2
3
4
5
2
3
4
5
🌏 renderOrder 渲染顺序
import { RenderOrder } from '@tx3d/core';
// 获取瓦片地图渲染顺序
const renderOrder = mapView.renderOrder;
// 设置瓦片地图渲染顺序
mapView.renderOrder = RenderOrder.Default - 1;
1
2
3
4
5
6
7
2
3
4
5
6
7
# 瓦片地图接口
🌏 refresh 刷新瓦片地图
// 刷新瓦片地图
mapView.refresh();
1
2
2
提示
刷新瓦片地图时会先销毁当前瓦片地图，然后重新创建，一般在数据供应商发生改变后调用。
🌏 destroy 销毁瓦片地图
// 销毁瓦片地图
mapView.destroy();
1
2
2