Arcgis api for javascript學習筆記-三維地圖的飛行效果
阿新 • • 發佈：2017-12-19
com init viewport window eight put div speed null
其實就只是用到了 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學習筆記-三維地圖的飛行效果