SuperMap iClient3D for WebGL之平面场景（三）

在之前的博文中，我们已经向大家介绍了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);

作者：wzr