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>
|