使用最新版本的cesium写一个h5页面
时间: 2023-12-17 15:03:57 浏览: 116
Cesium-1.86最新版本,可供初学者使用
好的,下面是一个简单的使用最新版Cesium.js创建一个H5页面的示例代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cesium H5 Page</title>
<script src="https://cesiumjs.org/releases/1.83/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="https://cesiumjs.org/releases/1.83/Build/Cesium/Widgets/widgets.css">
<style>
#cesiumContainer {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
// 创建 Cesium Viewer 对象
var viewer = new Cesium.Viewer('cesiumContainer');
// 创建一个球体
var entity = viewer.entities.add({
name: '球体',
position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
ellipsoid: {
radii: new Cesium.Cartesian3(5000000.0, 5000000.0, 5000000.0),
material: Cesium.Color.RED
}
});
// 将相机定位到球体位置
viewer.zoomTo(entity);
</script>
</body>
</html>
```
这段代码创建了一个包含一个球体的Cesium Viewer对象,并将相机定位到球体位置。你可以在自己的电脑上保存这段代码为一个html文件并在浏览器中打开该文件,以查看效果。注意,由于Cesium需要加载一些静态资源,初次加载可能会比较慢,请耐心等待。
阅读全文