修改于2017.1.9
(1)坐标系转换
cesium中常用的坐标有两种WGS84地理坐标系和笛卡尔空间坐标系(世界坐标)。我们平时常用的以经纬度来指明一个地点就是用的WGS84坐标,笛卡尔空间坐标系常用来做一些空间位置变换如平移旋转缩放等等。二者的联系如下图, 笛卡尔空间坐标的原点就是椭球的中心.
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
[html] view plain copy 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一直跟随标牌移动了。