1. 程式人生 > >ArcGIS js 模型飛行瀏覽學習筆記

ArcGIS js 模型飛行瀏覽學習筆記

在現有的arcgis js api 4.x中沒有現成的飛行瀏覽介面,需要我們自己使用view.goTo()函式實現。通過查詢相關資料,本文利用goTo()函式,實現了arcgis js中的飛行瀏覽模擬功能。

首先建立一個三維檢視

使用arcgis js中的sceneView建立三維檢視,具體程式碼如下:

			var map = new Map({
            	basemap: "satellite",
           		 ground: "world-elevation"
         	 	});
          	var view = new SceneView({
           		 	container: "earthContainer", 
            		map: map,
            	});

利用view.goTo()函式模擬飛行

建立一個函式flyLine進行飛行函式的模型(本文使用隨機位置進行飛行模型,及緯度每次增加0.0001),大家可以根據自己專案的需要將函式繫結到click、checked等作為觸發函式,flyLine函式的具體程式碼為:

flyLine() {
      let view = this.getViewer;
      let flyMoveUnit = 0.0001;
      let flyLatitude = 35;
      let flyLongitude = 111;
      let flyInterval  = null;
     
        view.goTo({ zoom: 17, tilt: 75, center: [flyLongitude, flyLatitude] })
          .then(function() {
            flyInterval = window.setInterval(function() {
              flyLongitude = flyLongitude;
              flyLatitude = flyLatitude + flyMoveUnit;
              view.goTo(
                {
                  zoom: 17,
                  tilt: 80,
                  center: [flyLongitude, flyLatitude]
                },
                {
                  easing: "linear", //動畫效果  linear為線性速度
                  speedFactor: 1  //速度因素,相機移動的速度引數,預設為1
                }
              );
            }, 80);           //setInterval間隔時間
          });
    }

通過goTo()函式可在arcgis web端實現飛行瀏覽模擬。

arcgis js的飛行瀏覽主要不斷更新goTo()函式中center引數進行模擬飛行,這裡的center引數代表的是SceneView.center ,我們每次不斷修改的是SceneView的中心點,然後利用arcgis中animate動畫的形式跳轉到下一個檢視中心點,以模擬飛行的效果。如果我們不斷地修改position 引數,那麼我們修改的就是camera.position,這時相機位置會不斷修改,跳轉效果將是相機的位置跳轉,不能保持相機的平穩飛行,模擬飛行瀏覽的效果不好。

goTo(target, options)引數介紹:

target包括:target 【Number[]|Geometry|Geometry[]|Graphic|Graphic[]|Viewpoint|Camera|Object】 檢視動畫跳轉的目標,可以是位置,幾何,圖形等等。 ②center 【Number[]|Point】 將要跳轉過去的SceneView.center ③scale 【Number[]】 設定將要跳轉過得SceneView.scale 比例 ④zoom 【Number[]】 設定最終跳轉後的zoom值(放大還是縮小) ⑤heading 【Number[]】 設定相機的heading屬性。heading值在地球檢視中,以正北方向值為0,順時針增加,如:正東方向為90,範圍是0-360 ⑥tilt 【Number[]】 設定相機的tilt屬性。tilt屬性值在地球檢視中,相機垂直地面的方向為0,當相機平行於表面時為90度。 ⑦position 【Point】 設定Camera.position的屬性。設定最終相機的位置。 options包括:animate 【Boolean】 預設值: true 指示是否應動畫化到新檢視的轉換。如果設定為false,則忽略speedFactor, duration, maxDuration, 和 easing引數。 ②speedFactor 【Number[]】 預設值:1 用來設定動畫的速度,如果設定為2,則飛行速度比預設速度增加一倍,以此類推。 ③duration 【Number[]】 設定動畫的精確持續時間(以毫秒為單位) ④maxDuration 【Number[]】 動畫允許的最大持續時間(以毫秒為單位) ⑤easing 【String|EasingFunction】 設定動畫中的飛行效果。預設的飛行效果(速度曲線)有:linear, in-cubic, out-cubic, in-out-cubic, in-expo, out-expo, in-out-expo, in-out-coast-quadratic。預設是:其中小於1000毫秒的動畫使用out-expo;更長的時間使用in-out-coast-quadratic。如果你想要飛行效果勻速飛行,那麼你設定easing為linear即可

easing常用的效果曲線圖解釋(jQuery UI中,可作為大家參考):

在這裡插入圖片描述 在這裡插入圖片描述