1、本地地形加载 使用fromUrl方式
需注意:url写法"./terrain",错误写法"./terrain/layer.json"或"./terrain/"
const localTerrain = await Cesium.CesiumTerrainProvider.fromUrl("./terrain",{
requestWaterMask: false,
requestVertexNormals: true
});
2、在线地形加载 延迟使用createWorldTerrainAsync
const terrain = await Cesium.createWorldTerrainAsync({
requestWaterMask: true,
requestVertexNormals: true
});
初始化加载使用fromWorldTerrain
const viewer = new Cesium.Viewer('cesiumContainer', {
terrain: Cesium.Terrain.fromWorldTerrain(), //在线地形
animation: false,
timeline: false
});
3、完整代码写法
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>terrain地形 Cesium1.141</title>
<style>
#viewer {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
</style>
<!-- 引入cesium -->
<script src="https://cdn.jsdelivr.net/npm/cesium@1.141.0/Build/Cesium/Cesium.js"></script>
<link href="https://cdn.jsdelivr.net/npm/cesium@1.141.0/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="viewer"></div>
<script>
Cesium.Ion.defaultAccessToken = "你的token";
const viewer = new Cesium.Viewer('viewer', {
baseLayerPicker: false,
// 关闭默认在线地形
terrainProvider: Cesium.EllipsoidTerrainProvider
});
viewer.imageryLayers.addImageryProvider(
new Cesium.UrlTemplateImageryProvider({
url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
layer: "tdtAnnoLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
}),
);
const terrainType = "global";
(async function(){
//全球在线地形
const terrain = await Cesium.createWorldTerrainAsync({
requestWaterMask: true,
requestVertexNormals: true
});
//本地局部地形
const localTerrain = await Cesium.CesiumTerrainProvider.fromUrl("./terrain",{
requestWaterMask: false,
requestVertexNormals: true
});
viewer.terrainProvider = terrainType = "global" ? terrain : localTerrain;
// 定位到地形范围中心点
viewer.camera.flyTo({
destination:Cesium.Cartesian3.fromDegrees(116.41,39.90,5000)
})
viewer.scene.debugShowTerrainTiles = true;
})();
</script>
</body>
</html>