# cesium-定位到3DTiles对象
这里介绍一下在cesium中定位到某个具体3dTiles的方式
# 核心代码
let tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: '../data/3dtiles/tianjie/tileset.json',
modelMatrix: Cesium.Matrix4.fromArray(
[0.9972458032561666, 0.04372029028528979, 0.05991113506964879, 0,
-0.03623787897545647, 0.9920229449104262, -0.12073646051879428, 0,
-0.06471185374661931, 0.11823287609043515, 0.9908750491338749, 0,
-663.0794944260269, 1211.490494620055, 2974.1003134818748, 1]),
}));
let model = tileset;
/**
* 模型定位
*/
function modelLocate(){
viewer.flyTo(model, {
offset : {
heading : Cesium.Math.toRadians(120.0),//方向
pitch : Cesium.Math.toRadians(-10),//倾斜角度
range : 450
}
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8"/>
<!-- Tell IE to use the latest, best version. -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>模型定位</title>
<script src="../lib/Cesium-1.89/Build/Cesium/Cesium.js"></script>
<style>
@import url(../lib/Cesium-1.89/Build/Cesium/Widgets/widgets.css);
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div style="display: -webkit-flex;display: flex;width: 100%;height: 100%">
<div style="width: 90%;height: 100%">
<div id="cesiumContainer"></div>
</div>
<div style="width: 10%;height: 100%;background-color: #d3d3d3;padding: 30px">
<button onclick="modelLocate()">模型定位</button>
</div>
</div>
<script>
//天地图token
let TDT_tk = "your token";
//Cesium token
let cesium_tk = "your token";
//天地图影像
let TDT_IMG_C = "http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
"&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
"&style=default&format=tiles&tk=" + TDT_tk;
//标注
let TDT_CIA_C = "http://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
"&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
"&style=default&format=tiles&tk=" + TDT_tk;
//初始页面加载
Cesium.Ion.defaultAccessToken = cesium_tk;
let viewer = new Cesium.Viewer('cesiumContainer', {
geocoder: false, // 位置查找工具
baseLayerPicker: false,// 图层选择器（地形影像服务）
timeline: false, // 底部时间线
homeButton: false,// 视角返回初始位置
fullscreenButton: false, // 全屏
animation: false, // 左下角仪表盘（动画器件）
sceneModePicker: false,// 选择视角的模式（球体、平铺、斜视平铺）
navigationHelpButton: false, //导航帮助按钮
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
url: TDT_IMG_C,
layer: "tdtImg_c",
style: "default",
format: "tiles",
tileMatrixSetID: "c",
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tilingScheme: new Cesium.GeographicTilingScheme(),
tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
maximumLevel: 50,
show: false
})
});
//调用影响中文注记服务
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
url: TDT_CIA_C,
layer: "tdtImg_c",
style: "default",
format: "tiles",
tileMatrixSetID: "c",
subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tilingScheme: new Cesium.GeographicTilingScheme(),
tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
maximumLevel: 50,
show: false
}));
// 去除版权信息
viewer._cesiumWidget._creditContainer.style.display = "none";
let tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
url: '../data/3dtiles/tianjie/tileset.json',
modelMatrix: Cesium.Matrix4.fromArray(
[0.9972458032561666, 0.04372029028528979, 0.05991113506964879, 0,
-0.03623787897545647, 0.9920229449104262, -0.12073646051879428, 0,
-0.06471185374661931, 0.11823287609043515, 0.9908750491338749, 0,
-663.0794944260269, 1211.490494620055, 2974.1003134818748, 1]),
}));
let model = tileset;
/**
* 模型定位
*/
function modelLocate(){
viewer.flyTo(model, {
offset : {
heading : Cesium.Math.toRadians(120.0),//方向
pitch : Cesium.Math.toRadians(-10),//倾斜角度
range : 450
}
});
}
</script>
</body>
</html>
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
# 效果展示
