Supermap/Cesium 开发心得----定位

小世界的野孩子 2021-11-30

展开全文

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))
        });