341 lines
13 KiB
HTML
341 lines
13 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>
|
||
|
||
<!-- 引入样式 -->
|
||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||
<!-- 引入组件库 -->
|
||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||
<script src="https://unpkg.com/element-ui/lib/index.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;
|
||
}
|
||
|
||
#btnContainer {
|
||
position: absolute;
|
||
top: 50px;
|
||
left: 150px;
|
||
z-index: 99999999;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="cesiumContainer"></div>
|
||
<div id="credit"></div>
|
||
<div id="btnContainer">
|
||
<el-row>
|
||
<el-button @click="setView">setView</el-button>
|
||
<el-button @click="flyTo">flyTo</el-button>
|
||
<el-button @click="flyToPosition">flyToPosition</el-button>
|
||
<el-button @click="flyToRectangle">flyToRectangle</el-button>
|
||
<el-button @click="flyToEasing">flyToEasing</el-button>
|
||
<el-button @click="lookAt">lookAt</el-button>
|
||
<el-button @click="lookAtTransform">lookAtTransform</el-button>
|
||
</el-row>
|
||
</div>
|
||
<script>
|
||
/**
|
||
三维的GIS中移动视域范围不仅要确定视点的位置，还要确定视线的方向
|
||
Cesium通过相机控制场景中的视域（旋转、缩放、平移）
|
||
主要用两个参数设置相机的状态：
|
||
1.position位置：使用一个三维的笛卡尔空间坐标点（x,y,z）
|
||
2.orientation方向：(heading水平方向、pitch俯仰角、roll翻滚角)欧拉角
|
||
|
||
操作相机的常用方法有：
|
||
1.setView:通过定义相机的位置和实现方向来控制，没有过渡动画，适合快速切换视角。
|
||
2.viewBoundingSphere:也没有过渡动画，区别在于该方法必须设定模型的外接圆，适合室内浏览，因为室内空间较小，相机移动的幅度不易控制
|
||
视点位于外接球的球心，可以设置偏移。
|
||
3.flyTo:具有空中飞行的过渡动画效果，可以设置飞行时间。如果场景secne中添加了矢量数据（模型或几何对象），可以使用该方法进行聚焦，如Entity, EntityCollection, DataSource, Cesium3DTilset, and much more.
|
||
4.lookAt:将视角固定在所设置的目的点上，用户可以通过鼠标任意旋转视角方向，但不会改变其位置，同时缩放会失效，中轮滚动事件也会失效。
|
||
5.lookAtTransform:将相机锁定在某个点上
|
||
*/
|
||
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI5ZjRjNTZkNC01NDYxLTRhMjQtOGEwZC1kZjA3YzQ5YTJlZDkiLCJpZCI6MjYwODQsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1ODcxOTMwODN9.prGsSKyAW_9Ow5zHYPhbm3LsQL-ApQw5-5PNJkDaHi8';
|
||
new Vue({
|
||
el: '#btnContainer',
|
||
data: function () {
|
||
return {
|
||
viewer: null,
|
||
directions:{
|
||
forward:false,
|
||
backward:false,
|
||
up:false,
|
||
down:false,
|
||
left:false,
|
||
right:false,
|
||
twistLeft:false,
|
||
twistRight:false
|
||
}
|
||
}
|
||
},
|
||
mounted:function(){
|
||
this.initCesium();
|
||
this.initEvent();
|
||
},
|
||
methods:{
|
||
initCesium:function(){
|
||
/**
|
||
* Viewer对象
|
||
* 用于构建应用程序的基本小部件。它将所有标准的Cesium部件组合到一个可重用的包中。
|
||
* 小部件可以通过使用mixin来扩展，来添加对各种应用程序有用的功能
|
||
*/
|
||
//Initialize the viewer widget with several custom options and mixins.
|
||
this.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/'
|
||
}),
|
||
// 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
|
||
// }),
|
||
//设置背景,如果为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
|
||
this.viewer.extend(Cesium.viewerDragDropMixin);
|
||
|
||
//Show a pop-up alert if we encounter an error when processing a dropped file
|
||
this.viewer.dropError.addEventListener(function (dropHandler, name, error) {
|
||
console.log(error);
|
||
window.alert(error);
|
||
});
|
||
},
|
||
setView:function(){
|
||
var position = Cesium.Cartesian3.fromDegrees(113.331875,23.110038,10000000);
|
||
this.viewer.camera.setView({
|
||
destination: position,
|
||
orientation: {
|
||
heading: Cesium.Math.toRadians(0.0),//使用弧度的形式
|
||
pitch: Cesium.Math.toRadians(-70.0),
|
||
roll: 0.0
|
||
}
|
||
})
|
||
},
|
||
flyTo:function(){
|
||
var position = Cesium.Cartesian3.fromDegrees(-113.331875,19.110038,10000000);
|
||
this.viewer.camera.flyTo({
|
||
destination: position,
|
||
orientation: {//使用欧拉角
|
||
heading: Cesium.Math.toRadians(0.0),//使用弧度的形式
|
||
pitch: Cesium.Math.toRadians(-60.0),
|
||
roll: 0.0
|
||
},
|
||
duration:3,//设置飞行时间，单位为秒
|
||
complete:function(){
|
||
console.log("动画完成后的回调！")
|
||
},
|
||
cancel:function(){
|
||
console.log("动画被取消后的回调！")
|
||
},
|
||
maximumHeight:5000,//最大的飞行高度
|
||
})
|
||
},
|
||
flyToPosition :function(){
|
||
this.viewer.camera.flyTo({
|
||
destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
|
||
});
|
||
},
|
||
flyToRectangle:function(){
|
||
var west = -90.0;
|
||
var south = 38.0;
|
||
var east = -87.0;
|
||
var north = 40.0;
|
||
var rectangle = this.viewer.entities.add({
|
||
rectangle: {
|
||
coordinates: Cesium.Rectangle.fromDegrees(west, south, east, north),
|
||
},
|
||
});
|
||
this.viewer.flyTo(rectangle);
|
||
// this.viewer.camera.flyTo({
|
||
// destination :Cesium.Rectangle.fromDegrees(west, south, east, north)
|
||
// });
|
||
},
|
||
flyToEasing:function(){
|
||
var that = this;
|
||
that.viewer.camera.flyTo({
|
||
destination : new Cesium.Cartesian3(-3961951.575572026, 3346492.0945766014, 3702340.5336036095),
|
||
orientation : {
|
||
direction : new Cesium.Cartesian3(0.8982074415844437, -0.4393530288745287, 0.013867512433959908),
|
||
up : new Cesium.Cartesian3(0.12793638617798253, 0.29147314437764565, 0.9479850669701113),
|
||
},
|
||
complete: function () {
|
||
// setTimeout(function () {
|
||
// that.viewer.camera.flyTo({
|
||
// destination : new Cesium.Cartesian3(-2304817.2435183465, -3639113.128132953, 4688495.013644141),
|
||
// orientation : {
|
||
// direction : new Cesium.Cartesian3(0.3760550186878076, 0.9007147395506565, 0.21747547189489164),
|
||
// up : new Cesium.Cartesian3(-0.20364591529594356, -0.14862471084230877, 0.9676978022659334),
|
||
// },
|
||
// easingFunction: Cesium.EasingFunction.QUADRATIC_IN_OUT,
|
||
// duration: 5
|
||
// });
|
||
// }, 1000);
|
||
},
|
||
});
|
||
},
|
||
lookAt:function(){
|
||
var center = Cesium.Cartesian3.fromDegrees(113.331875,19.110038,5000000);
|
||
var heading = Cesium.Math.toRadians(0);
|
||
var pitch = Cesium.Math.toRadians(-90.0);
|
||
var range = 50;
|
||
|
||
this.viewer.camera.lookAt(center,new Cesium.HeadingPitchRange(heading,pitch,range));
|
||
},
|
||
lookAtTransform:function(){
|
||
// 1. Using a cartesian offset
|
||
// var center = Cesium.Cartesian3.fromRadians(2.4213211833389243, 0.6171926869414084, 3626.0426275055174);
|
||
|
||
// var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
|
||
// this.viewer.camera.lookAtTransform(transform, new Cesium.Cartesian3(0.0, -4790000.0, 3930000.0));
|
||
|
||
// 2. Using a HeadingPitchRange offset
|
||
var center = Cesium.Cartesian3.fromRadians(2.4213211833389243, 0.6171926869414084, 3626.0426275055174);
|
||
var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
|
||
this.viewer.scene.camera.lookAtTransform(transform, new Cesium.HeadingPitchRange(0, -Math.PI/4, 2900));
|
||
},
|
||
initEvent:function(){
|
||
var that = this;
|
||
/**
|
||
* 绑定键盘事件，实现使用键盘操作相机的视域移动
|
||
*/
|
||
document.addEventListener("keydown",function(e){
|
||
var direction = that.getDirectionForKeyCode(e.keyCode);
|
||
if(typeof direction !== 'undefined'){
|
||
that.directions[direction] = true;
|
||
}
|
||
})
|
||
document.addEventListener("keyup",function(e){
|
||
var direction = that.getDirectionForKeyCode(e.keyCode);
|
||
if(typeof direction !== 'undefined'){
|
||
that.directions[direction] = false;
|
||
}
|
||
})
|
||
|
||
this.viewer.clock.onTick.addEventListener(function(clock){
|
||
var camera = that.viewer.camera;
|
||
var ellipsoid = that.viewer.scene.globe.ellipsoid;
|
||
var cameraHeight = ellipsoid.cartesianToCartographic(camera.position).height;
|
||
var moveRate = cameraHeight/100.0;
|
||
that.directions.forward&&camera.moveForward(moveRate);
|
||
that.directions.backward&&camera.moveBackward(moveRate);
|
||
that.directions.up&&camera.moveUp(moveRate);
|
||
that.directions.down&&camera.moveDown(moveRate);
|
||
that.directions.left&&camera.moveLeft(moveRate);
|
||
that.directions.right&&camera.moveRight(moveRate);
|
||
that.directions.twistLeft&&camera.twistLeft(moveRate);
|
||
that.directions.twistRight&&camera.twistRight(moveRate);
|
||
|
||
})
|
||
},
|
||
getDirectionForKeyCode:function(keyCode){
|
||
switch(keyCode){
|
||
case "W".charCodeAt(0):
|
||
return "forward";
|
||
case "S".charCodeAt(0):
|
||
return "backward";
|
||
case "A".charCodeAt(0):
|
||
return "left";
|
||
case "D".charCodeAt(0):
|
||
return "right";
|
||
case "Q".charCodeAt(0):
|
||
return "up";
|
||
case "E".charCodeAt(0):
|
||
return "down";
|
||
case "F".charCodeAt(0):
|
||
return "twistLeft";
|
||
case "G".charCodeAt(0):
|
||
return "twistRight";
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
|
||
|
||
|
||
|
||
|
||
//Secne场景中执行调用图层、3D Tiles数据加载、场景交互等功能，以及一些场景数据加载（Primitivew API）
|
||
//Secne中的camera属性与Scene中的camera属性相同。
|
||
// var scene = viewer.scene;
|
||
// //加载3D tiles格式的三维模型
|
||
// var tileset = new Cesium.Cesium3DTileset({
|
||
// url:"./SampleData/Cesium3DTiles/Tilesets/Tileset/tileset.json"
|
||
// });
|
||
// tileset.readyPromise.then(function(tileset){
|
||
// viewer.scene.primitives.add(tileset);
|
||
// viewer.camera.viewBoundingSphere(tileset.boundingSphere,new Cesium.HeadingPitchRange(-1.57,0,2))
|
||
// })
|
||
|
||
|
||
</script>
|
||
</body>
|
||
|
||
</html> |