Cesium完整的ViewToolbar的示例代码,包含html代码
时间: 2024-05-13 19:14:31 浏览: 73
以下是一个完整的ViewToolbar示例代码,包含HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Cesium ViewToolbar Example</title>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.79/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.79/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<style>
#cesiumContainer {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="toolbar">
<button onclick="setHomeView()">Home View</button>
<button onclick="setTopView()">Top View</button>
<button onclick="setSideView()">Side View</button>
<button onclick="setFrontView()">Front View</button>
</div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer');
function setHomeView() {
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 15000.0),
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-90.0),
roll: Cesium.Math.toRadians(0.0)
}
});
}
function setTopView() {
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 15000.0),
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-90.0),
roll: Cesium.Math.toRadians(0.0)
}
});
viewer.camera.rotateDown(Cesium.Math.toRadians(90.0));
}
function setSideView() {
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 15000.0),
orientation: {
heading: Cesium.Math.toRadians(90.0),
pitch: Cesium.Math.toRadians(-90.0),
roll: Cesium.Math.toRadians(0.0)
}
});
}
function setFrontView() {
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 15000.0),
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-90.0),
roll: Cesium.Math.toRadians(90.0)
}
});
}
</script>
</body>
</html>
```
此示例演示了如何在 Cesium 中创建一个包含 ViewToolbar 的地图,其中包含四个按钮,分别是 Home View、Top View、Side View 和 Front View。点击按钮时,将相机视图设置为对应的视图。在 HTML 中,ViewToolbar 可以通过简单的 div 元素和一些按钮来实现。在 JavaScript 中,我们使用 viewer.camera.setView() 方法来设置相机的视图,以及一些其他的方法来调整视图的方向。
阅读全文