81 lines
3.2 KiB
HTML
81 lines
3.2 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<script src="./Build/Cesium/Cesium.js"></script>
|
|||
|
|
<link href="./Build/Cesium/Widgets/widgets.css" rel="stylesheet" />
|
|||
|
|
<style>
|
|||
|
|
@import url(./Build/Cesium/Widgets/widgets.css);
|
|||
|
|
html,
|
|||
|
|
body,
|
|||
|
|
#cesiumContainer {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
<!-- <script src="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Cesium.js"></script> -->
|
|||
|
|
<!-- <link href="https://cesium.com/downloads/cesiumjs/releases/1.68/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> -->
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="cesiumContainer"></div>
|
|||
|
|
<script>
|
|||
|
|
/**
|
|||
|
|
* 数据主要分为两大类
|
|||
|
|
* 1、地形数据和影像服务
|
|||
|
|
* 2、矢量数据
|
|||
|
|
*
|
|||
|
|
* 地形数据相当于Cesium的骨架，影像地图则是Cesium的外衣，骨架只有一副，外衣可以换。
|
|||
|
|
* 一个项目中通常只有一种地形数据，terrainProvider不支持多种地形数据的叠加。
|
|||
|
|
*
|
|||
|
|
* 使用Cesium的静态方法Cesium.createWorldTerrain()加载Cesium的全球地形数据，这需要一个Cesium Ion账号的token。
|
|||
|
|
* 它包含了地形光照数据，以及水面效果所以的水域数据（开启地形光照需要使用VertextNormals扩展，水体流动效果可以通过请求WaterMask方法设置）
|
|||
|
|
*/
|
|||
|
|
Cesium.Ion.defaultAccessToken =
|
|||
|
|
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8";
|
|||
|
|
var viewer = new Cesium.Viewer("cesiumContainer", {
|
|||
|
|
scene3DOnly: true,
|
|||
|
|
selectionIndicator: false,
|
|||
|
|
baseLayerPicker: false,
|
|||
|
|
//使用Cesium ion 中的高程服务
|
|||
|
|
// terrainProvider: new Cesium.CesiumTerrainProvider({
|
|||
|
|
// url: Cesium.IonResource.fromAssetId(1),
|
|||
|
|
// }),
|
|||
|
|
terrainProvider: Cesium.createWorldTerrain({
|
|||
|
|
requestVertexNormal: true, //添加地形光照
|
|||
|
|
requestWaterMask: true, //添加水面波浪效果
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
viewer.scene.globe.enableLighting = true; //terrain和globe同时设置才会有光照效果
|
|||
|
|
|
|||
|
|
// viewer.camera.setView({
|
|||
|
|
// destination: new Cesium.Cartesian3(318563.80878618505, 5644591.227282946, 2966285.7276969287),
|
|||
|
|
// orientation: {
|
|||
|
|
// heading: 6.134811516839214,
|
|||
|
|
// pitch: -0.25770321622063097,
|
|||
|
|
// roll: 0.000020402764222104963,
|
|||
|
|
// },
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
添加定义地形数据
|
|||
|
|
*/
|
|||
|
|
var rectAngle = new Cesium.Rectangle(
|
|||
|
|
Cesium.Math.toRadians(109.96181),
|
|||
|
|
Cesium.Math.toRadians(19.86912),
|
|||
|
|
Cesium.Math.toRadians(115.23594),
|
|||
|
|
Cesium.Math.toRadians(25.05672)
|
|||
|
|
);
|
|||
|
|
// var customTerrainLayer = new Cesium.CesiumTerrainProvider({
|
|||
|
|
// url:"http://localhost:9000/terrain/911d68d07b9511ecbf80f19916c6cf74",
|
|||
|
|
// requestWaterMask:false,
|
|||
|
|
// credit:"版权信息"
|
|||
|
|
// });
|
|||
|
|
// viewer.terrainProvider = customTerrainLayer;
|
|||
|
|
viewer.camera.flyTo({ destination: rectAngle });
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|