Arcgis api for javascript学习笔记(4.5版本)-三维地图的飞行效果
2024-10-02 00:24:46
其实就只是用到了 view.goTo() 函数,再利用 window.setInterval() 函数(定时器)定时执行goTo()。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to SceneView - Create a 3D map</title>
<style type="text/css">
html, body, #viewDiv { height: 100%; width: 100%; }
#optionsDiv { background-color: white; position: absolute; left: 100px; top: 30px; z-index: 100; }
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script type="text/javascript" src="https://js.arcgis.com/4.5/"></script>
<script>
require([
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/views/SceneView",
"dojo/domReady!"
], function (Map, Basemap, MapView, SceneView) {
var map = new Map({
"basemap": "hybrid",
"ground": "world-elevation"
});
var view = new SceneView({
"map": map,
"container": "viewDiv"
}); view.then(function () {
/**
* ------------------------------------------------------------------------------------------------------------------------------------
* 指定两个点之间飞行,并按指定飞行比例的速度进行飞行
* ------------------------------------------------------------------------------------------------------------------------------------
*/
dojo.connect(dojo.byId("btnFlyTwoPoint"), "onclick", function () {
view.goTo({"zoom": 16, "tilt": 75, "center": [111.52, 28.55]})
.then(function () {
view.goTo(function () {
var camera = view.camera.clone();
camera.position.latitude += 0.11;
camera.position.longitude += 0.02;
console.info(camera.position);
return camera;
}(), {
"easing": "linear",
"speedFactor": 0.1
});
});
}); /**
* ------------------------------------------------------------------------------------------------------------------------------------
* 任意点随机飞行
* ------------------------------------------------------------------------------------------------------------------------------------
*/
var flyInterval = null;
var flyMoveUnit = 0.0001;
var flyLatitude = 27.3779;
var flyLongitude = 111.5332;
dojo.connect(dojo.byId("chkFlyAnyPoint"), "onclick", function () {
if (this.checked) {
view.goTo({"zoom": 17, "tilt": 75, "center": [flyLongitude, flyLatitude]})
.then(function () {
flyInterval = window.setInterval(function () {
flyLongitude = flyLongitude + flyMoveUnit;
flyLatitude = flyLatitude + flyMoveUnit;
view.goTo({
"zoom": 17,
"tilt": 75,
"center": [flyLongitude, flyLatitude]
});
}, 80);
}); }
else {
window.clearInterval(flyInterval);
}
});
});
});
</script>
</head>
<body>
<div id="optionsDiv">
<div>飞行模式:任意点飞行<input type="checkbox" id="chkFlyAnyPoint"/></div>
<div>飞行模式:两点之间飞行<input type="checkbox" id="btnFlyTwoPoint"/></div>
</div>
<div id="viewDiv"></div>
</body>
</html>
最新文章
- 移动端图片上传base64编码
- python生成RSS(PyRSS2Gen)
- 十六、Swing高级组件
- 关于TCP协议握手的那些事儿
- 24.allegro中光绘gerber[原创]
- 《RESTful Web Services》第一章 使用统一接口
- Javac编译和JIT编译
- AjaxPro.2.dll使用方法简介
- 简单的批量读取外部insert文并插入DB
- Best JavaScript Tools for Developers
- Socket.io 延伸
- Thrift中required和optional
- 转:【Java并发编程】之十二:线程间通信中notifyAll造成的早期通知问题(含代码)
- java List<;Map<;String,Object>;遍历的方法
- Dubbo,Zookeeper入门
- Codeforces Beta Round #34 (Div. 2)
- 单机闭环 使用Nginx+Lua开发高性能Web应用
- EF基础知识小记五(一对多、多对多处理)
- 使用Netty4实现基本的消息分发
- mybatis由浅入深day01_ 4.11总结(parameterType_resultType_#{}和${}_selectOne和selectList_mybatis和hibernate本质区别和应用场景)
热门文章
- Java 学习(18):Java 序列化&; 网络编程&; 发送邮件
- java中Arrays类的应用
- xml 标准字符过滤
- JSF教程(11)——生命周期之Invoke Application Phase
- radare, the reverse engineering framework
- 关于fatfs生成的wav文件是空,大小是0的问题
- [机器学习] Coursera ML笔记 - 逻辑回归(Logistic Regression)
- Socket编程模型之完毕port模型
- 服务器负载均衡lvs(Linux Virtual Server)
- php实现矩形覆盖