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)

相机设置

首先我们看下相机设置的接口:

SuperMap iClient3D for WebGL之平面场景(三)_第1张图片

其中有一个参数: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);

你可能感兴趣的:(webgl,3d,平面,几何学)