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中定位方法使用,他写的很详细,也很清楚,本文不再赘述,只做整理

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐