Supermap/Cesium 開發心得----定位

SuperMap的WebGL是基於開源JS庫Cesium做的修改而形成的產品，理論上用起來大同小異，如果在有不一樣的地方再看，基本上還是與Cesium的接口名稱和結構是一樣的。

定位方法有基於Cesium.Camera類(SuperMap/Cesium)，它不需要去單獨創建這個，因為他是Cesium.viewer的Member成員之一，直接使用創建好的view容器，使用view.camera就可以拿到

也可以使用Cesium.Viewer類做定位，方法下文會提到

定位方法一（Camera.setView(_Object)）

這個方法是直接定位到該位置, 參數用Obj構造{destination:,orientation:, endTransform}

destination

相機在WGS84世界坐標系中的最終位置，或是自頂向下視圖中可見的矩形區域。即可以是一個點坐標（{Cartesian3}格式點坐標）或一個四至范圍（{Rectangle}格式）

Cartesian3格式構造點

有很多方法，我最常用的是

• 從弧度轉Cartesian3的Cesium.Cartesian3.fromRadians方法(SuperMap/Cesium)
• 從WGS-84坐標轉Cartesian3的Cesium.Cartesian3.fromDegrees方法(SuperMap/Cesium)

   viewer.camera.setView({ destination:Cesium.Cartesian3.fromDegrees(116.4139265527,39.8865940599,100), orientation:{ pitch: -0.3870743833538963, roll: 0.00004766518822663102, heading:5.71581666483758, } });

Rectangle格式構造四至范圍

有很多方法，我最常用的是

• 直接構造矩形范圍：new Cesium.Rectangle(west, south, east,north)方法(SuperMap/Cesium)，需要注意的是，四個參數的單位是弧度，范圍是[-PI,PI]和[-PI/2,PI/2]

   viewer.camera.setView({
              destination:Cesium.Rectangle(1.9911131841002994,0.6863576116684447,2.0676847898509436, 0.7171078891208857),
              orientation:{
                  pitch: -0.3870743833538963,
                  roll: 0.00004766518822663102,
                  heading:5.71581666483758,
          }
      });

• 使用WGS-84坐標去構造Cesium.Rectangle.fromDegrees(west, south, east, north, result)方法(SuperMap/Cesium)，四個參數的范圍是[-180.0, 180.0]和[-90.0, 90.0]

定位方法二（Camera.flyTo(_Object)）

Camera.flyTo(_Obj)方法的參數和setView其實差不多，它注重的是飛行體驗，飛往目的地有一個過程，也就是其中的duration參數，它以秒為單位，表征飛行持續時間。如果省略，由飛行距離計算合理的持續時間。

viewer.camera.flyTo({
    destination : Cesium.Cartesian3.fromDegrees(-122.19, 46.25, 5000.0),
    orientation : {
        heading : Cesium.Math.toRadians(175.0),
        pitch : Cesium.Math.toRadians(-35.0),
        roll : 0.0
    },
    duration:3     //飛行到目的地花費時間3秒
})

定位方法3（Viewer.flyTo(target, options)）

在cesium中viewer.flyTo和Camera.flyTo的區別挺大，我們通常會用camera來定位，但當需要加上一個傾斜角的時候，可能定位的結果就和預想的區別很大

這個時候，就可以制定一個目標去，例如定位創建的Entity實體

loactionTectEntity = viewer.entities.add({
            name: 'locationRectangle',
            id: 'locationRectangle',
            rectangle: {
                coordinates: Cesium.Rectangle(1.9911131841002994,0.6863576116684447,2.0676847898509436, 0.7171078891208857),
                material: Cesium.Color.GREEN.withAlpha(1.0),
                height: 10.0,
                outline: false
            }
        });
        var flyPromise = viewer.flyTo(loactionTectEntity, {
            duration: 5,
            offset: new Cesium.HeadingPitchRange(0.0, Cesium.Math.toRadians(-20.0))
        });

具體方法可以參考Cesium中定位方法使用，他寫的很詳細，也很清楚，本文不再贅述，只做整理