Cesium零散知识点（配置项、坐标转换、计算地形、定位）

最新推荐文章于 2024-09-27 10:53:55 发布

zy123698745

最新推荐文章于 2024-09-27 10:53:55 发布

阅读量1.2k

点赞数

分类专栏：前端：Cesium

本文链接：https://blog.csdn.net/zy123698745/article/details/91046500

版权

前端：Cesium 专栏收录该内容

24 篇文章 21 订阅

订阅专栏

1、配置项

//屏蔽实体双击事件
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
//设置版权等信息不显示
viewer._cesiumWidget._creditContainer.style.display = "none";
//禁止角度倾斜
viewer.scene.screenSpaceCameraController.enableTilt = false;    
//禁止地球旋转
viewer.scene.screenSpaceCameraController.enableRotate = false;
//禁止地球缩放
viewer.scene.screenSpaceCameraController.enableZoom = false;
//移除地图上的所有图层
viewer.imageryLayers.removeAll();
//指南针
viewer.extend(Cesium.viewerCesiumNavigationMixin, {
	enableZoomControls: false, 
	enableCompass: false,
	enableDistanceLegend: false,
	enableCompassOuterRing: false
});

2、鼠标点击监听位置

// 鼠标点击监听位置
function initPosition(){
	var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
	handler.setInputAction(function (movement) {
		// 屏幕坐标（二维坐标）
		var twoSpace = movement.position;
		console.log("屏幕坐标（二维坐标）", twoSpace);
		
		// 二维坐标转世界坐标
		var worldSpace  = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
		console.log("二维坐标——》世界坐标", worldSpace);
		
		// 世界坐标转地理坐标（弧度）
		var geographySpace = viewer.scene.globe.ellipsoid.cartesianToCartographic(worldSpace);
		console.log("世界坐标——》地理坐标（弧度）", geographySpace);
		var geographySpace = Cesium.Cartographic.fromCartesian(worldSpace);
		console.log("世界坐标——》地理坐标（弧度）", geographySpace);
		
		// 世界坐标转屏幕坐标
		var twoSpace = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, worldSpace);
		console.log("世界坐标——》屏幕坐标", twoSpace);

		// 二维屏幕坐标系到三维坐标系的转换
		var threeSpace = viewer.scene.globe.pick(viewer.camera.getPickRay(twoSpace), viewer.scene);
		console.log("二维坐标——》三维坐标", threeSpace);

		// 三维坐标到地理坐标的转换
		var geographySpace = viewer.scene.globe.ellipsoid.cartesianToCartographic(threeSpace);
		console.log("三维坐标——》地标坐标（弧度）", geographySpace);
		var geographySpace = Cesium.Cartographic.fromCartesian(threeSpace)
		console.log("三维坐标——》地标坐标（弧度）", geographySpace);
		 
		// 地理坐标到经纬度坐标的转换
		var longitudeAndLatitude = [geographySpace.longitude / Math.PI * 180, geographySpace.latitude / Math.PI * 180, geographySpace.height];
		console.log("地标坐标（弧度）——》经纬度坐标", longitudeAndLatitude);
		var longitude = Cesium.Math.toDegrees(geographySpace.longitude);
		var latitude = Cesium.Math.toDegrees(geographySpace.latitude);
		var height = geographySpace.height;
		console.log("地标坐标（弧度）——》经纬度坐标：经度",longitude,"| 纬度",latitude,"| 高度",height);
		console.log("地标坐标（弧度）——》经纬度坐标：经度",longitude.toFixed(3),"| 纬度",latitude.toFixed(3),"| 高度",height.toFixed(1));
		
		// 经纬度坐标转地理坐标（弧度）
		var geographySpace = Cesium.Cartographic.fromDegrees(longitude, latitude, height);//单位：度，度，米
		console.log("经纬度坐标——》地理坐标（弧度）", geographySpace);
		 
		// 经纬度坐标转世界坐标（先转换成弧度再转换）
		var geographySpace = Cesium.Cartographic.fromDegrees(longitude, latitude, height);
		var worldSpace = viewer.scene.globe.ellipsoid.cartographicToCartesian(geographySpace);
		console.log("经纬度坐标——》世界坐标", worldSpace);
		
		// 经纬度转三维坐标
		var threeSpace = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);
		console.log("经纬度坐标——》三维坐标", threeSpace);  
	}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}

3、根据Cesium.sampleTerrain方法计算坐标点的地形高度

var lon = 110.09880694;
var lat = 19.75930144;
var positions = Cesium.Cartographic.fromDegrees(lon,lat);
Cesium.when(new Cesium.sampleTerrain(viewer.terrainProvider, 13, [positions]), function (updatedPositions) {
	console.log(lon,lat,updatedPositions[0].height);
});

4.1、根据相机定位：这个方法定位之后视线是垂直的，如果添加了倾斜角度，位置会发生偏差；

viewer.camera.flyTo({
	destination: new Cesium.Rectangle.fromDegrees(west * 0.995, south * 0.995, east * 1.005, north * 1.005),
    orientation : {
		heading : Cesium.Math.toRadians(0.0),
        pitch : Cesium.Math.toRadians(-25.0),
        roll : 0.0
	}

4.2、根据实体定位：这个方法定位之后视线是倾斜的，可以随意更改倾斜角度，位置不会发生偏差；

var rect = new Cesium.Rectangle.fromDegrees(west * 0.9995, south * 0.9995, east * 1.0005, north * 1.0005);
var tempEntity = viewer.entities.add({
	name: 'locationRectangle',
	id: 'locationRectangle',
	rectangle: {
		coordinates: rect,
		material: Cesium.Color.WHITE.withAlpha(0)
	}
});
var flyPromise = viewer.flyTo(tempEntity, {
	offset: new Cesium.HeadingPitchRange(0.0, Cesium.Math.toRadians(-45.0))
});
// 相机的Pitch值不是默认值时位置会发生偏差，所以需要重新计算（相机有倾斜角的时候，距离会变远）
// 计算原理：1、倾斜后记录相机到矩形中心点的距离 2、根据倾斜角度，计算新的距离  3、通过中心点离相机的距离，使用zoomTo定位拉近距离
flyPromise.then(function () {
	var center = Cesium.Rectangle.center(rect);
	var car = Cesium.Cartesian3.fromRadians(center.longitude, center.latitude);
	var range = Cesium.Cartesian3.distance(car, viewer.camera.position) * Math.cos(45);
	viewer.zoomTo(tempEntity, new Cesium.HeadingPitchRange(0.0, Cesium.Math.toRadians(-45.0), range));
	viewer.entities.remove(tempEntity);
});