2021-01-28 cesium地形开挖
2021-01-27 本文已影响0人
MrSwilder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>地形开挖</title>
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="Build/Cesium/Cesium.js"></script>
<link href="Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
// Your access token can be found at: https://cesium.com/ion/tokens.
// Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiMmM0NmVlNC1lNmQwLTQxMzktOTkyMy0zOTJkMGQ4ZDJiMmMiLCJpZCI6MTM3MDgsInNjb3BlcyI6WyJhc2wiLCJhc3IiLCJhc3ciLCJnYyJdLCJpYXQiOjE1NjM4Njc3MjJ9.jx48UCxoKCjDWPVfXZnAkUYDPORWEyIvWrg2ZFuwdRk';
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});
//开启深度检测
viewer.scene.globe.depthTestAgainstTerrain= true;
//设置初始位置
viewer.camera.setView({
destination:Cesium.Cartesian3.fromDegrees(108.82008723079528,34.028851209781564, 1000)
});
var position = Cesium.Cartesian3.fromDegrees(108.82008723079528,34.028851209781564,904-30);
var entity = viewer.entities.add({
position:position,
box:{
dimensions:new Cesium.Cartesian3(10.0, 10.0,30),
material:Cesium.Color.RED.withAlpha(0.8),
outline:true,
outlineColor:Cesium.Color.RED
}
});
var globe = viewer.scene.globe;
globe.depthTestAgainstTerrain= true;
globe.clippingPlanes= new Cesium.ClippingPlaneCollection({
modelMatrix:entity.computeModelMatrix(Cesium.JulianDate.now()),
planes:[
new Cesium.Plane(new Cesium.Cartesian3(1.0, 0.0, 0.0), -5),
new Cesium.Plane(new Cesium.Cartesian3(-1.0, 0.0, 0.0), -5),
new Cesium.Plane(new Cesium.Cartesian3(0.0, 1.0, 0.0), -5),
new Cesium.Plane(new Cesium.Cartesian3(0.0, -1.0, 0.0), -5)
],
edgeWidth:1.0,
edgeColor:Cesium.Color.GREEN
});
var CesiumEventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
//得到当前三维场景的椭球体
var ellipsoid = viewer.scene.globe.ellipsoid;
CesiumEventHandler.setInputAction(function (movement) {
//选择点击位置获取笛卡尔坐标系
cartesian = viewer.camera.pickEllipsoid(movement.position, ellipsoid);//movement.endPosition
if (cartesian) {
//将笛卡尔坐标转换为地理坐标
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
var longitudeDegree = Cesium.Math.toDegrees(cartographic.longitude);
var latitudeDegree = Cesium.Math.toDegrees(cartographic.latitude);
var terrainProvider=Cesium.createWorldTerrain()
var positions = [
Cesium.Cartographic.fromDegrees(longitudeDegree, latitudeDegree)
];
//关键函数获取指定地形，级别，位置的高程
var promise=Cesium.sampleTerrain(terrainProvider, 13, positions)
promise.then(res=>{
alert('经度是'+ Cesium.Math.toDegrees(res[0].longitude)+'纬度是'+ Cesium.Math.toDegrees(res[0].latitude)+'高程是'+res[0].height)
})
}
}, Cesium.ScreenSpaceEventType.RIGHT_UP);
</script>
</div>
</body>
</html>
效果：
image.png
