自定义飞行动画
这个示例演示了如何使用 view.goTo 的选项参数自定义飞行动画。
程序完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>SceneView - goTo() - 4.5</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#optionsDiv {
position: absolute;
bottom: 17px;
width: 100%;
padding: 20px 0;
z-index: 1;
text-align: center;
}
button {
background: white;
padding: 7px;
border: 1px solid #005e95;
font-size: 0.9em;
margin: 5px;
color: #005e95;
font-family: "Avenir Next W01", "Arial", sans-serif;
}
button:hover {
background: #005e95;
color: white;
cursor: pointer;
}
</style>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"dojo/query",
"dojo/on",
"dojo/domReady!"
],
function(
Map, SceneView, query, on
) {
var map = new Map({
basemap: "dark-gray"
});
var view = new SceneView({
container: "viewDiv",
map: map,
zoom: 4
});
/*****************************************************************
*
* 添加事件监听
*
*****************************************************************/
// 设置飞行目的地
function shiftCamera(deg) {
var camera = view.camera.clone();
camera.position.longitude += deg;
return camera;
}
// 默认飞行
on(dojo.query("#default"), "click", function() {
view.goTo(shiftCamera(60));
});
// 线性低速
on(dojo.query("#linearSlow"), "click", function() {
view.goTo(shiftCamera(60),
{
speedFactor: 0.1,
easing: "linear"
});
});
on(dojo.query("#linearFast"), "click", function() {
view.goTo(shiftCamera(60),
{
speedFactor: 6,
easing: "linear"
});
});
on(dojo.query("#expoIncrease"), "click", function() {
view.goTo(shiftCamera(60),
{
duration: 4000,
easing: "in-expo"
});
});
on(dojo.query("#fixedDuration"), "click", function() {
view.goTo(shiftCamera(30), {
duration: 10000,
maxDuration: 10000
});
});
// 自定义动画
function customEasing(t) {
return 1 - Math.abs(Math.sin(-1.7 + t * 4.5 * Math.PI)) * Math.pow(
0.5, t * 10);
}
on(dojo.query("#bounceBerlin"), "click", function() {
view.goTo({
position: {
x: 13.40,
y: 52.52,
z: 700000,
spatialReference: {
wkid: 4326
}
},
heading: 0,
tilt: 0
}, {
speedFactor: 0.3,
easing: customEasing
});
});
});
</script>
</head>
<body>
<div id="optionsDiv">
<button id="default">默认飞行方式</button>
<button id="linearSlow">线性低速飞行</button>
<button id="linearFast">线性高速飞行</button>
<button id="expoIncrease">飞行速度指数增长</button>
<button id="fixedDuration">飞行 10 秒</button>
<button id="bounceBerlin">弹跳飞行（自定义）</button>
</div>
<div id="viewDiv"></div>
</body>
</html>
程序执行效果：
沙箱地址：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=scene-goto
（完）