Cesium学习笔记-创建地图以及Entity基础使用_cesium 晨昏线绘制

Viewer

创建地图

var viewer = new Cesium.Viewer('cesiumContainer',{
	// sceneMode: SceneMode.SCENE2D,   //默认地图为二维
})
// 关闭晨昏线效果
viewer.scene.globe.enableLighting = false;
1
2
3
4
5

相机视角移动

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 //相机到达目标处的时间
})
1
2
3
4
5
6
7
8
9

cesium定位方法

注册地图鼠标事件、坐标转换

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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

鼠标事件

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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33