Viewer
创建地图
var viewer = new Cesium.Viewer('cesiumContainer',{
// sceneMode: SceneMode.SCENE2D, //默认地图为二维
})
// 关闭晨昏线效果
viewer.scene.globe.enableLighting = false;
相机视角移动
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(long, lat, height), // 目标处经纬度及相机高度
orientation: {
heading: Cesium.Math.toRadians(0.0), // 相机东西南北朝向,即相机围绕负z轴的旋转角度
pitch: Cesium.Math.toRadians(-90.0), // 相机的俯视仰视角度,即相机围绕负y轴的旋转角度
roll: 0 // 旋转分量,即相机围绕正x轴的旋转角度
},
duration: 0.5 //相机到达目标处的时间
})
注册地图鼠标事件、坐标转换
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function(event){
// 屏幕坐标
console.log(event);
// 转换为笛卡尔坐标
var earthPosition = viewer.camera.pickEllipsoid(event.position, viewer.scene.globe.ellipsoid);
console.log(earthPosition);
// 转换为经纬度坐标
// (方法1)
var degree = Cesium.Cartographic.fromCartesian(earthPosition);
var long = degree.longitude / Math.PI * 180;
var lat = degree.latitude / Math.PI * 180;
// (方法2:先转换为弧度,再转换为经纬度)
// var ellipsoid = viewer.scene.globe.ellipsoid;
// var cartographic = ellipsoid.cartesianToCartographic(earthPosition);
// var long = Cesium.Math.toDegress(cartographic.longitude);
// var lat = Cesium.Math.toDegress(cartographic.latitude);
console.log('当前经纬度坐标为:' + long + ' , ' + lat);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
Entity
添加billboard广告牌以及标注
var entity = viewer.entities.add({
name : 'My Point',
position : Cesium.Cartesian3.fromDegrees( 116.166493, 39.9060534 ),
point : { //点
pixelSize : 5,
color : Cesium.Color.RED,
outlineColor : Cesium.Color.WHITE,
outlineWidth : 2
},
label : { //文字标签
text : 'point',
font : '14pt monospace',
style : Cesium.LabelStyle.FILL_AND_OUTLINE,
outlineWidth : 2,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM, //垂直方向以底部来计算标签的位置
pixelOffset : new Cesium.Cartesian2( 0, -9 ) //偏移量
}
billboard : { //图标
image : '../Images/bubble.png',
width : 64,
height : 64
},
isTest:true, // 可自定义属性,方便后续进行点击判断
});
// 点击实体获得实体相关信息
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function(e){
var pick = viewer.scene.pick(e.position);
if(pick && pick.id && pick.id.isTest){ //可添加其他信息进行准确判断是否为想要获取实体
console.log(pick.id);// 实体信息
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);