Arcgis api for javascript学习笔记(4.5版本)-三维地图的飞行效果
其实就只是用到了 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>
Arcgis api for javascript学习笔记(4.5版本)-三维地图的飞行效果的更多相关文章
- Arcgis api for javascript学习笔记(4.5版本)-三维地图并叠加天地图标注
1.三维地图实现 在官网的demo中就有三维地图的实现,如下图所示 <!DOCTYPE html> <html> <head> <meta charset=& ...
- Arcgis api for javascript学习笔记(4.5版本)-三维地图实现弹窗功能
1. 对于Graphic对象,在初始化Graphic对象时设置popupTemplate属性,即可实现点击Graphic时显示弹窗. <!DOCTYPE html> <html> ...
- Arcgis api for javascript学习笔记(3.2版本) - 匀速行驶轨迹动画效果
一.前言 有这样一个需求:已知某条线上的n个点的经纬度数组 ,实现物体运行轨迹. 如果这些点中两个距离很近,那么我们可以用一个定时器在地图上每次重新画一个点,这样肉眼看到这个点上的运动效果,如下图代码 ...
- Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合
在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...
- Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置
在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...
- Arcgis api for javascript学习笔记(3.2X版本)-初步尝试
Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...
- Arcgis api for javascript学习笔记(4.5版本) - 点击多边形(Polygon)并高亮显示
在现在的 arcgis_js_v45_api 版本中并没有直接提供点击Polygon对象高亮显示.需要实现如下几个步骤: 1.点击地图时,获取Polygon的Graphic对象: 2.对获取到的Gra ...
- Arcgis api for javascript学习笔记(4.6版本) - 二维MapView中的FeatureLayer显示标注
4.6版本api的FeatureLayer中有提供 labelsVisible 和 labelingInfo 两个属性,设置这两个属性可以实现显示将属性中某个字段作为标注.但是这两个属性只针对三维Sc ...
- Arcgis api for javascript学习笔记(3.2X版本)-Map图层叠加以及基本操作
1. 不设置默认底图,第一个图层作为底图,然后叠加另外一个图层 先添加图层1,第一个图层1作为默认底图,然后在图层1上叠加图层2,并设置图层2的透明度为50%. <!DOCTYPE html&g ...
随机推荐
- POJ 2284 That Nice Euler Circuit (LA 3263 HDU 1665)
http://poj.org/problem?id=2284 https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&a ...
- 如何安装Python环境以及为Visual Studio 2012安装Python插件
(一)首先,我机器上的开发环境安装的是Visual Studio 2012版本,系统为window7,64位,要安装的Python版本为python3.4-x64,双击安装包安装Python环境,需要 ...
- Python模块学习笔记— —random
Python中的random模块用于生成随机数. random.random 函数原型 random.random() 生成一个范围在[0,1)的随机浮点数. import random print ...
- Android OnGestureListener用法 识别用户手势 左右滑动
Android可以识别用户的手势(即用户用手指滑动的方向),通过用户不同的手势,从而做出不同的处理 需要使用OnGestureListener 比如说看电子书的时候翻页,或者要滑动一些其他内容 直接上 ...
- screenX, clientX, pageX
screenX:鼠标相对屏幕左上角的水平偏移量. clientX:鼠标相对于浏览器左上角的水平偏移量,会随着滚动条的移动而移动. pageX:鼠标相对浏览器左上角的水平偏移量.不会随着滚动条的移动而移 ...
- CQRS之旅——旅程6(我们系统的版本管理)
旅程6:我们系统的版本管理 准备下一站:升级和迁移 "变化是生活的调味品."威廉·考珀 此阶段的最高目标是了解如何升级包含实现CQRS模式和事件源的限界上下文的系统.团队在这一阶段 ...
- 把git仓库从码云迁到github，及git常用命令
前言 刚开始建仓库的时候,因为网络的原因选择了国内的码云.后来又想换成github,毕竟平时github使用率比较高. 替换远程仓库地址方式如下: git remote set-url origin ...
- (转)Windows2008优化IIS7.5支持10万个同时请求的配置方法
通过对IIS7的配置进行优化,调整IIS7应用池的队列长度,请求数限制,TCPIP连接数等方面,从而使WEB服务器的性能得以提升,保证WEB访问的访问流畅. 在运行中cmd后,输入:C:\Window ...
- 6、修改应用程序数码相框以支持自动关闭LCD
1. 修改数码相框以自动关闭LCD关闭LCD : 在读取触摸屏的函数中判断:如果15S内无数据,执行: echo auto > /sys/devices/platform/mylcd/power ...
- shiro简单配置（转）
注:这里只介绍spring配置模式. 因为官方例子虽然中有更加简洁的ini配置形式,但是使用ini配置无法与spring整合.而且两种配置方法一样,只是格式不一样. 涉及的jar包 Jar包名称 版本 ...