在之前的博文中,我们已经向大家介绍了SuperMap iClient3D for WebGL如何加载平面场景。对于球面场景和平面场景,除了在加载的时候需要转换场景模式外,还有以下几个方向与球面场景有差异。
加载实体
球面场景加载实体:
viewer.entities.add(new Cesium.Entity({
point: new Cesium.PointGraphics({
color: new Cesium.Color(1, 1, 0),
pixelSize: 10,
outlineColor: new Cesium.Color(0, 1, 1)
}),
position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height + 0.5)
}));
平面场景加载实体:
需要将桌面坐标使用Cesium.SceneTransforms.convert2DToCartesian(scene, position)转换为经过了反投影的坐标p1:
var position1 = new Cesium.Cartesian3(134324234.14989, 54965965.658929, 125);
var p1 = Cesium.SceneTransforms.convert2DToCartesian(scene, position1);
然后再使用反投影后得到的坐标来作为实体的位置从而添加实体(如下)
var position1 = new Cesium.Cartesian3(134324234.14989, 54965965.658929, 125);
var p1 = Cesium.SceneTransforms.convert2DToCartesian(scene, position1);
//在点击位置添加对应点
var entity1 = viewer.entities.add(new Cesium.Entity({
point: new Cesium.PointGraphics({
color: new Cesium.Color(1, 1, 0),
pixelSize: 10,
// outlineColor: new Cesium.Color(0, 1, 1)
}),
position: p1
}));
viewer.flyTo(entity1)
相机设置
首先我们看下相机设置的接口:
其中有一个参数:convert,这个参数是将目标点从世界坐标转换为场景坐标,默认为true;但是加载球面场景的时候使用的场景坐标,加载平面场景的时候就需要是世界坐标,而本身相机设置的中心点destination这个参数的类型就是世界坐标,因此不需要进行转换,所以在平面场景中设置相机位置时需要设置convert为false;如下两个示例:
球面场景相机设置:
viewer.scene.camera.setView({
destination : new Cesium.Cartesian3(-1206939.1925299785, 5337998.241228442, 3286279.2424502545),
orientation : {
heading : 1.4059101895600987,
pitch : -0.20917672793046682,
roll : 2.708944180085382e-13
}
});
平面场景相机设置:
viewer.scene.camera.setView({
destination : new Cesium.Cartesian3(-1206939.1925299785, 5337998.241228442, 3286279.2424502545),
orientation : {
heading : 1.4059101895600987,
pitch : -0.20917672793046682,
roll : 2.708944180085382e-13
}
convert:false
});
点击获取场景坐标实际值
球面场景点击获取场景坐标值:
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
//设置鼠标左键单击回调事件
handler.setInputAction(function (e) {
//首先移除之前添加的点
viewer.entities.removeAll();
//获取点击位置笛卡尔坐标
var position = scene.pickPosition(e.position);
//将笛卡尔坐标转化为经纬度坐标
var cartographic = Cesium.Cartographic.fromCartesian(position);
var longitude = Cesium.Math.toDegrees(cartographic.longitude);
var latitude = Cesium.Math.toDegrees(cartographic.latitude);
var height = cartographic.height;
if (height < 0) {
height = 0;
}
viewer.entities.add(new Cesium.Entity({
point: new Cesium.PointGraphics({
color: new Cesium.Color(1, 1, 0),
pixelSize: 10,
outlineColor: new Cesium.Color(0, 1, 1)
}),
position: Cesium.Cartesian3.fromDegrees(longitude, latitude, height + 0.5)
}));
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
平面场景点击获取球面场景坐标值:
var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
//设置鼠标左键单击回调事件
handler.setInputAction(function(e) {
var position=viewer.scene.pickPositionWorldCoordinates(e.position);
var position1 = new Cesium.Cartesian3(position.y,position.z,position.x);
var p1 = Cesium.SceneTransforms.convert2DToCartesian(scene, position1);
//在点击位置添加对应点
var entity1 = viewer.entities.add(new Cesium.Entity({
point: new Cesium.PointGraphics({
color: new Cesium.Color(1, 1, 0),
pixelSize: 10,
// outlineColor: new Cesium.Color(0, 1, 1)
}),
position: p1
}));
viewer.flyTo(entity1)
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);