94 lines
3.7 KiB
HTML
94 lines
3.7 KiB
HTML
|
<!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>Learning Cesium!</title>
|
|||
|
|
<script src="./Build/Cesium/Cesium.js"></script>
|
|||
|
|
<style>
|
|||
|
|
@import url(./Build/Cesium/Widgets/widgets.css);
|
|||
|
|
html, body, #cesiumContainer {
|
|||
|
|
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
|
|||
|
|
}
|
|||
|
|
#credit {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="cesiumContainer"></div>
|
|||
|
|
<div id="credit"></div>
|
|||
|
|
<script>
|
|||
|
|
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8';
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Viewer对象
|
|||
|
|
* 用于构建应用程序的基本小部件。它将所有标准的Cesium部件组合到一个可重用的包中。
|
|||
|
|
* 小部件可以通过使用mixin来扩展，来添加对各种应用程序有用的功能
|
|||
|
|
*/
|
|||
|
|
//Initialize the viewer widget with several custom options and mixins.
|
|||
|
|
var viewer = new Cesium.Viewer('cesiumContainer', {
|
|||
|
|
/**
|
|||
|
|
* 场景模式,默认SceneMode.SCENE3D
|
|||
|
|
* SceneMode:指定场景是3D/2D/2.5D,可选值：
|
|||
|
|
* MORPHING：在模式之间变形，如3D转2D
|
|||
|
|
* COLUMBUS_VIEW：2.5D视角，地图会被平铺，高度为非零的对象被绘制在上面。
|
|||
|
|
* SCENE2D:2D模式，地图会被自顶向下正射投影
|
|||
|
|
* SCENE3D：3D模式，一个传统的三维视角的全球。
|
|||
|
|
*/
|
|||
|
|
// sceneMode : Cesium.SceneMode.COLUMBUS_VIEW,
|
|||
|
|
sceneMode : Cesium.SceneMode.SCENE3D,
|
|||
|
|
//指定椭球面提供地形或其他几何图形数据,
|
|||
|
|
terrainProvider : Cesium.createWorldTerrain(),
|
|||
|
|
//指定影像数据的数据源,该选项只有在baseLayerPicker设置为false时生效
|
|||
|
|
imageryProvider : new Cesium.OpenStreetMapImageryProvider({
|
|||
|
|
url : 'https://a.tile.openstreetmap.org/'
|
|||
|
|
}),
|
|||
|
|
//设置背景,如果为false则星星/月亮/太阳都不会渲染
|
|||
|
|
// skyBox : new Cesium.SkyBox({
|
|||
|
|
// sources : {
|
|||
|
|
// positiveX : 'stars/100_BK.jpg',
|
|||
|
|
// negativeX : 'stars/100_BK.jpg',
|
|||
|
|
// positiveY : 'stars/100_BK.jpg',
|
|||
|
|
// negativeY : 'stars/100_BK.jpg',
|
|||
|
|
// positiveZ : 'stars/100_BK.jpg',
|
|||
|
|
// negativeZ : 'stars/100_BK.jpg'
|
|||
|
|
// }
|
|||
|
|
// }),
|
|||
|
|
// Show Columbus View map with Web Mercator projection
|
|||
|
|
mapProjection : new Cesium.WebMercatorProjection(),
|
|||
|
|
|
|||
|
|
geocoder:false,//位置查找
|
|||
|
|
homeButton:false,//视图返回初始位置
|
|||
|
|
sceneModePicker:false,//视角选择器
|
|||
|
|
baseLayerPicker:false,//底图选择器
|
|||
|
|
navigationHelpButton:false,//导航帮助按钮
|
|||
|
|
animation:false,//动画控制器
|
|||
|
|
creditContainer:"credit",//版权显示,指定dom对象的id,再通过id样式可以隐藏CESIUM 版本图标
|
|||
|
|
timeline:false,//时间线
|
|||
|
|
fullscreenButton:false,//全屏控件
|
|||
|
|
vrButton:false,
|
|||
|
|
// infoBox:false
|
|||
|
|
// shouldAnimate:true
|
|||
|
|
|
|||
|
|
scene3DOnly:true,//默认false，若为true,所有几何体实例将仅会在3D模式中渲染(在GPU内存中)
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//Add basic drag and drop functionality
|
|||
|
|
viewer.extend(Cesium.viewerDragDropMixin);
|
|||
|
|
|
|||
|
|
//Show a pop-up alert if we encounter an error when processing a dropped file
|
|||
|
|
viewer.dropError.addEventListener(function(dropHandler, name, error) {
|
|||
|
|
console.log(error);
|
|||
|
|
window.alert(error);
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|