创建app.js文件,在页面引用该文件
<!DOCTYPE html>
<html>
<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>
<style type="text/css">
@import url(lib/Cesium1.4.7/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="lib/Cesium1.4.7/Cesium.js"></script>
<script src="js/app.js"></script>
</body>
</html>
app.js文件代码如下:
//创建cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer', {
//是否创建动画小器件,左下角仪表
animation: true,
//是否显示图层选择器
baseLayerPicker: false,
//是否显示时间轴
timeline: true,
//是否显示geocoder小器件,右上角查询按钮
geocoder: false,
//是否显示Home按钮
homeButton: false,
//是否显示3D/2D选择器
sceneModePicker: false,
//是否显示右上角的帮助按钮
navigationHelpButton: false,
globe: false,
skyAtmosphere: false,
skyBox: false,
//设置全屏
fullscreenElement: 'cesiumContainer'
});
var scene=viewer.scene;
//设置场景背景色
scene.backgroundColor = Cesium.Color.GRAY;
scene.renderError.addEventListener(function() {
//If a model fails to load, restart render loop.
scene.primitives.removeAll();
viewer.useDefaultRenderLoop = true;
});
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(120.62898254394531, 30.02804946899414, -10.0));
var model = scene.primitives.add(Cesium.Model.fromGltf({
//模型文件相对路径
url : 'model/abuilding.gltf',
modelMatrix : modelMatrix,
//调整模型在地图中的大小
scale : 0.001
}));
viewer.camera.flyTo({//设置视角
destination : Cesium.Cartesian3.fromDegrees(120.62898254394531, 30.02804946899414, 100.0)
});