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