Cesium学习笔记(2)


修改于2017.1.9

(1)坐标系转换

cesium中常用的坐标有两种WGS84地理坐标系和笛卡尔空间坐标系(世界坐标)。我们平时常用的以经纬度来指明一个地点就是用的WGS84坐标,笛卡尔空间坐标系常用来做一些空间位置变换如平移旋转缩放等等。二者的联系如下图, 笛卡尔空间坐标的原点就是椭球的中心.

  Cesium学习笔记(2)_第1张图片
Pick----屏幕坐标   Cartesian----世界坐标  cartographic-----地理坐标(弧度)
Point----经纬度坐标
1.屏幕坐标转世界坐标
var pick= new Cesium.Cartesian2(window.innerWidth,window.innerHeight);
var cartesian = scene.globe.pick(viewer.camera.getPickRay(pick), scene);

注:一共是两步

(在2D下上述方法不适用,改成:

var pick= new Cesium.Cartesian2(0,0);
var cartesian = viewer.camera.pickEllipsoid(pick, viewer.scene.globe.ellipsoid);

)

2.世界坐标转地理坐标(弧度)
var cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian);

var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
3.世界坐标转屏幕坐标
var pick = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, cartesian);
4.地理坐标(弧度)转经纬度坐标
var point=[ cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];
5.地理坐标(弧度)转世界坐标
var  cartesian = scene.globe.ellipsoid. cartographicTo Cartesian (cartographic);
6.经纬度坐标转地理坐标(弧度)
var cartographic = Cesium.Cartographic.fromDegree(point);
7.经纬度坐标转世界坐标
var  cartesian  =  Cesium. Cartesian 3.fromDegree(point);








(2)事件
1.相机事件(移动开始、移动结束等等)
viewer.scene.camera.moveEnd.addEventListener(function(){

});
2.鼠标事件(单击、移动、右键等)
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (movement) {

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
3.渲染事件(实时渲染,很关键的一个事件)
var renderEnd = viewer.scene.postRender.addEventListener(function(){


});






(4)鼠标移到标牌上,提示信息(div)。
首先根据上面提到的鼠标事件,new一个ScreenSpaceEventHandler,然后监听它的move。
当鼠标移到标牌上时,利用pick方法获取鼠标下的entity,
var pick = viewer.scene.pick(movement.position);
 
作用:返回带有“primitive”属性的一个对象,这个primitive是在特定窗口坐标的第一个或是最上面的primitive;如果在这个位置上没有东西,就返回undefined。

利用这个方法就可以判断鼠标下面是否有标牌,如果有,有create一个div或者令一个隐藏的div显示,移除时候再移除div或者设置div的display为none

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        handler.setInputAction(function (movement) {
            var pick = viewer.scene.pick(movement.endPosition);
            if(!temp && Cesium.defined(pick)){
                if(pick.mesh){
                    document.getElementById("modelName").textContent=pick.mesh._name;
                }else{
                    document.getElementById("modelName").textContent="Name";
                }
                var pos = getPos(event);
                document.getElementById("modelInfo").style.left = pos.x +"px";
                document.getElementById("modelInfo").style.top = pos.y +"px";
                document.getElementById("modelInfo").style.display = "block";
            }else{
                document.getElementById("modelInfo").style.display = "none";
            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);


(5)鼠标点击标牌,提示信息(div),并且信息能够一直随着物体移动。
跟上一个差不许多,关键是解决如何能够随着物体一起移动。此时就需要postRender事件了。在这里需要提示一下,如果你的是22版本以上的,相机事件里面应该有个changed事件,利用这个也可以实现随物体一直移动的功能。    现在我就讲一下如果是低版本,相机里没有changed事件的话,就需要postRender事件了。
用pick获取标牌实体后,里面会找他的一个世界坐标位置的属性,将此位置实时的定位到窗口坐标,即可实现div一直跟随标牌移动了。



你可能感兴趣的:(cesium,webgl)