2021-01-28 cesium地形开挖

作者: MrSwilder | 来源:发表于2021-01-27 17:57 被阅读0次

2021-01-28 cesium地形开挖
build cesium offline terrain
Cesium入门7 - Adding Terrain - 添加地
Cesium本地影像与地形服务发布
求区域地形的最低点和最高点（基础篇）
cesium 3d地形和平面地形动态转换，取消3d地形
cesium地形夸张
Cesium（五）加载地形图层
Cesium快速上手5-地形影像的加载
Cesium的地形加载及dem数据处理

<!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