JavaScript基础教程 三维地图的飞行效果
沉沙 2018-10-19 来源 : 阅读 1215 评论 0

摘要:本篇教程介绍了JavaScript基础教程 三维地图的飞行效果,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入。

本篇教程介绍了JavaScript基础教程 三维地图的飞行效果,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入。

<

其实就只是用到了 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>

   

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端JavaScript频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程