Cesium学习
1.Cesium界面控件
//创建cesium Viewer
viewer = new Cesium.Viewer(‘cesiumContainer’,{
animation:false, //是否创建动画小器件,左下角仪表
baseLayerPicker:false, //是否显示图层选择器
fullscreenButton:false, //是否显示全屏按钮
geocoder:false, //是否显示geocoder小器件,右上角查询按钮
homeButton:false, //是否显示Home按钮
infoBox : false, //是否显示信息框
sceneModePicker:false, //是否显示3D/2D选择器
selectionIndicator : false , //是否显示选取指示器组件
timeline:false, //是否显示时间轴
navigationHelpButton:false, //是否显示右上角的帮助按钮
scene3DOnly : true, //如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
navigationInstructionsInitiallyVisible:false,
showRenderLoopErrors:false,
imageryProvider : new Cesium.OpenStreetMapImageryProvider({ url : ‘//a.tile.openstreetmap.org/’ }) //加载自定义地图瓦片需要指定一个自定义图片服务器//URL 为瓦片数据服务器地址
});
2.Cesium entity实体
//
viewer.entities.removeAll();
var position = Cesium.Cartesian3.fromDegrees(lon, lat, height);
var heading = Cesium.Math.toRadians(yheading);
var pitch = Cesium.Math.toRadians(xpitch);
var roll = Cesium.Math.toRadians(zroll);
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);
//orientation为模型的方向,由三个参数决定pitch为绕x轴旋转的角度,通常称为俯仰角
//roll为绕z轴旋转,通常称为翻滚角,heading为绕y轴旋转的角度,通常称为横滚角
//这三个参数决定了我们初始看到模型时的角度
//摄影测量里又称为航向倾角,旁向倾角,相片旋角
var entity = viewer.entities.add({
id:id,
name : url,
position : position,
orientation : orientation,
model : {
uri : url,
scale : scale,
}
});
viewer.trackedEntity = entity;
//对entity的操作:添加、隐藏、修改、去除、居中显示
ver entity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(120.9677706,30.7985748,2.61),
point: {
color: Cesium.Color.RED, //点位颜色
pixelSize: 10 //像素点大小
},
label : {
text : '测试名称',
font : '14pt Source Han Sans CN', //字体样式
fillColor:Cesium.Color.BLACK, //字体颜色
backgroundColor:Cesium.Color.AQUA, //背景颜色
showBackground:true, //是否显示背景颜色
style: Cesium.LabelStyle.FILL, //label样式
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.CENTER,//垂直位置
horizontalOrigin :Cesium.HorizontalOrigin.LEFT,//水平位置
pixelOffset:new Cesium.Cartesian2(10,0) //偏移
}
});
viewer.zoomTo(entity); //居中到该点
Var rainEntity=viewer.entities.add({
id: "rain",
name: 'RainStation',
parent: rainLayer3D,
position: Cesium.Cartesian3.fromDegrees(lon, lat),
billboard: {
image: 'images/pointIcons/rain1.png',
scale:0.7,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
},
label: {
text: rainfall,
font: '12px SimHei ',
Width: 3,
style: Cesium.LabelStyle.FILL,
fillColor: Cesium.Color.AQUA,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.TOP
}
}); //添加
viewer.entities.getById("rain").show = false; //隐藏
viewer.entities.getById("rain").label.text= "drp"; //修改属性
viewer.entities.removeAll(); //移除所有
viewer.zoomTo(rainEntity); //居中显示
//**********************
增
创建一个实体参考:
//方法一
var entity = new Entity({
id : 'uniqueId'
});
viewer.entities.add(entity);
//方法一 简写
viewer.entities.add({
id : 'uniqueId'
});
//方法二
var entity = viewer.entities.getOrCreateEntity('uniqueId');
查
查找实体的方法:
var entity = viewer.entities.getById('uniqueId');
删
移除实体的方法:
//方法一,先查后删
var entity = viewer.entities.getById('uniqueId');
viewer.entities.remove(entity)
//方法二,直接删除
viewer.entities.removeById('uniqueId')
//方法三,删除所有
viewer.entities.removeAll()
- 去掉entity的双击事件
问题所在:双击entity,会放大视图,entity居中显示,且鼠标左键失去移动功能,鼠标滚轮失去作用
解决问题:
viewer.screenSpaceEventHandler.setInputAction(function(){},Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK );
- 获取当前视角高度
var scene = viewer.scene;
var ellipsoid = scene.globe.ellipsoid;
var height=ellipsoid.cartesianToCartographic(viewer.camera.position).height;
- 获取某个经纬度在屏幕上的位置
var position = Cesium.Cartesian3.fromDegrees(lon, lat);
var clickPt =Cesium.SceneTransforms.wgs84ToWindowCoordinates (viewer.scene, position);
var screenX=clickPt.x;
var screenY=clickPt.y;
- 获取三维场景屏幕中心点坐标
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;
- 响应鼠标单击等事件,获取屏幕点击坐标
var handler = new Cesium.ScreenSpaceEventHandler(canvas);
handler.setInputAction(function(click){},Cesium.ScreenSpaceEventType.LEFT_CLICK);
var clickX=click.position.x;
var clickY=click.position.y;
这个LEFT_CLICK可以换成MIDDLE_CLICK、MOUSE_MOVE等就会响应滚轮点击、鼠标移动等事件,见参考文档中的ScreenSpaceEventType(),注意不同的事件中,function中的click会有不同的属性,可console.log(click),找到所需
- 跟踪相机视角的改变
viewer.camera.moveStart.addEventListener(function(moveStartPosition){});
viewer.camera.moveEnd.addEventListener(function(moveEndPosition){});
其实还有个
viewer.camera.changed.addEventListener(function(moveEndPosition){}),但我不会用,总是提示changed不存在,但是camera的参考文档中这个changed和moveStart和moveEnd都可以addEventListener
- 使视角到达某一地点
viewer.camera.setView({
destination: Cesium.Cartesian3.fromDegrees(lon, lat, height),
orientation: {
heading : curHeading, //左右偏移
pitch : curPitch, //上下偏移
roll : 0.0
}
});