124 lines
5.0 KiB
HTML
124 lines
5.0 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内存中)
|
||
//加载天地图影像地图，WebMapTileServiceImageryProvider该接口是加载WMTS服务的接口
|
||
imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
|
||
url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=ebf64362215c081f8317203220f133eb',
|
||
layer:'img',
|
||
style:'default',
|
||
tileMatrixSetID:'w',
|
||
format:'tiles',
|
||
maximumLevel: 18
|
||
})
|
||
});
|
||
|
||
// 如果需要叠加路网与注记矢量则添加以下代码
|
||
// viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
|
||
// url: 'http://t1.tianditu.gov.cn/cia_w/wmts?tk=bf156eb3c72350d62b008dc8a4ae1016',
|
||
// layer:'cia',
|
||
// style:'default',
|
||
// tileMatrixSetID:'w',
|
||
// format:'tiles',
|
||
// maximumLevel: 18
|
||
// }))
|
||
//如需要其他图层可参考一下部分（1.需要更改的部分为url的img_c||2.layer的img||3.tileMatrixSetID的c）
|
||
|
||
//影像地图
|
||
//(1)经纬度的影像地图：1.img_c||2.img||3.c
|
||
//(2)经纬度的影像注记：1.cia_c||2.cia||3.c
|
||
//(3)墨卡托的影像地图：1.img_w||2.img||3.w
|
||
//(4)墨卡托的影像注记：1.img_w||2.img||3.w
|
||
|
||
//矢量地图
|
||
//(1)经纬度的矢量地图：1.vec_c||2.vec||3.c
|
||
//(2)经纬度的矢量注记：1.cva_c||2.cva||3.c
|
||
//(3)墨卡托的矢量地图：1.vec_w||2.vec||3.w
|
||
//(4)墨卡托的矢量注记：1.cva_w||2.cva||3.w
|
||
|
||
|
||
//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>
|