2021-01-28-------cesium获取指定经纬度的高程

104 阅读1分钟

一、API参考

image.png

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- 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()
    });   
    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, 11, 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