最近在做Cesium项目经常会遇到(禁止缩放,关闭光源,关闭阴影等效果)所以决定做个总结。
一、总结
1.Cesium关闭光源于阴影
// viewer.scene.globe.enableLighting = false; //关闭光照
// viewer.shadows = false;//关闭阴影
2.禁止缩放
//viewer.scene.screenSpaceCameraController.enableZoom =false;//禁止缩放
3.解决地形高程遮挡label,entity问题
viewer.scene.globe.depthTestAgainstTerrain = false;//解决地形遮挡entity问题
4.当前相机高度
var h = viewer.camera.positionCartographic.height;
5.定位到指定坐标flyTo
viewer.camera.flyTo({
destination: new Cesium.Cartesian3.fromDegrees(mapLocation.lng, mapLocation.lat, mapLocation.height),
orientation: {
heading: Cesium.Math.toRadians(mapLocation.heading),
pitch: Cesium.Math.toRadians(mapLocation.pitch),
roll: mapLocation.roll
}
});
6.鼠标监听事件详细可看详细示例
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);//获取地图对象
handler.setInputAction(function(event) { //设置监听方法
var height = viewer.camera.positionCartographic.height;//我这里举个例子点击鼠标左键获取当前高度
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
7.创建entity
var entity = viewer.entities.add({
id:'wind',
corridor: { //不规则边框
positions: Cesium.Cartesian3.fromDegreesArray(stmq),
width: 2,
material: Cesium.Color.RED.withAlpha(0.5),
//height:3000,
outline: false,
heightReference:25000,
// outlineColor: Cesium.Color.width,
//cornerType: Cesium.CornerType.MITERED
},
point: { //圆点
show: pointShow,
pixelSize: 35,
color: new Cesium.CallbackProperty(function color() {
return Cesium.Color.fromRandom({
minimumRed: 0.76,
minimumGreen: 0.78,
minimumBlue: 0.75,
alpha: 1.0
});
}, false),
heightReference:25000,
},
position: Cesium.Cartesian3.fromDegrees(Number(lonlat[0]),Number(lonlat[1])),
label: { //文字
text: text,
scale: 0.8,
fillColor: Cesium.Color.YELLOW,
heightReference: 25000,
verticalOrigin: Cesium.VerticalOrigin.LEFT,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
//pixelOffset: new Cesium.Cartesian2(10, 20)
},
show: true
});
8.entity的操作
viewer.entities.getById("wind").show = false; //隐藏
viewer.entities.getById("wind").label.text= "drp"; //修改属性
viewer.entities.removeAll(); //移除所有entity
viewer.entities.remove('wind')//移除指定identity
viewer.zoomTo(rainEntity); //居中显示
9.点击获取点击点经纬度
var handler= new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function (e) {
var earthPosition = viewer.camera.pickEllipsoid(e.position,viewer.scene.globe.ellipsoid);
var cartographic = Cesium.Cartographic.fromCartesian(earthPosition, viewer.scene.globe.ellipsoid, new Cesium.Cartographic());
var lat=Cesium.Math.toDegrees(cartographic.latitude);//纬度
var lng=Cesium.Math.toDegrees(cartographic.longitude);//经度
console.log(lat,lon);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
10.获取中心点
var result = viewer.camera.pickEllipsoid(new Cesium.Cartesian2(viewer.canvas.clientWidth / 2, viewer.canvas
.clientHeight / 2));
var curPosition = Cesium.Ellipsoid.WGS84.cartesianToCartographic(result);
var lon = curPosition.longitude * 180 / Math.PI;
var lat = curPosition.latitude * 180 / Math.PI;
console.log(lon,lat)
11.获取相机对象
var camera=viewer.camera;
Cesium.Math.toDegrees(viewer.camera.heading)
Cesium.Math.toDegrees(viewer.camera.pitch)//Cesium.Math.toDegrees作用是把弧度转换成度数
console.log(camera)//相机对像,heading,pitch,height都有都可打印
12.cesium各个坐标系之间转换及区别(这个是别人的我觉得介绍挺好的)
cesium坐标系转换、各个坐标的区别(互相转换)
13.cesium中文网址
13.点击获取鼠标经纬度
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); //此方法获取鼠标点击位置经纬度
handler.setInputAction(function (e) {
var position = viewer.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;
console.log(longitude,latitude,height)
viewer.camera.setView({//定位到范围中心点
destination: Cesium.Cartesian3.fromDegrees(Number(longitude), Number(latitude), 2000),
orientation: {
heading: Cesium.Math.toRadians(180),//1
pitch: Cesium.Math.toRadians(-90),
roll: 0
}
});
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
14.改变背景图片
默认时一个黑色的星空图,可以自己修改一个炫酷的背景 。
cesium挂载的元素加一个 background 设置一个图片即可。
Cesium:改变地球背景 -可以参考这个
这个我会持续更新,有什么不对得请大家指出来,谢谢!