6、Cesium学习之添加地形图层-高投影的arctic地形

最新推荐文章于 2023-12-05 15:52:44 发布

不收藏找不到我

最新推荐文章于 2023-12-05 15:52:44 发布

阅读量413

点赞数

分类专栏： Cesium

本文链接：https://blog.csdn.net/weixin_41364246/article/details/115014872

版权

Cesium 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

1、实例

//terrainProvider属性，
//属性值是TerrainProvider，TerrainProvider是一个地形图层加载类，接口，其子类有：
//EllipsoidTerrainProvider
//CesiumTerrainProvider
//VRTheWorldTerrainProvider
//GoogleEarthEnterpriseTerrainProvider
var viewer = new Cesium.Viewer("cesiumContainer", {
  terrainProvider: new Cesium.CesiumTerrainProvider({
    url: Cesium.IonResource.fromAssetId(3956),
    //Cesium.IonResource.fromAssetId(assetId, options) promise类型
    //assetId:number,Cesium ion的assetId
    //options:{可选参数
    //			accesstoken:String类型，默认值Ion.defaultAccessToken，要使用的访问令牌
    //			server:Resource或String类型，默认值是Ion.defaultServer,Cesium ion api上的服务
    //}
  }),
});
//CesiumTerrainProvider
//加载Cesium上的地形图层服务
//参数是一个对象
//1、url：Resource或String或Promise类型,Cesium地形图层服务的地址
//2、requestVertexNormals：bool类型，可选参数，默认值是false，指示客户端是否应以逐顶点法线（如果可用）的形式从服务器请求附加照明信息的标志。
//3、requestWaterMask：bool类型，可选参数，默认值是false,指示客户端是否应从服务器请求每个瓦片的水掩码（如果可用）的标志。
//4、requestMetadata：bool类型，可选参数，默认值是true,指示客户端是否应从服务器请求每个瓦片元数据（如果可用）的标志。
//5、ellipsolid
//6、credit

Sandcastle.addDefaultToolbarMenu(
  [
    {
      text: "Denali",
      onselect: function () {
      //Camera.flyTo(options),参数是一个对象
      //将相机从当前位置飞到新位置，定位到一个新位置
      //destination:Cartesian3或Rectangle类型，相机在WGS84（世界）坐标中的最终位置或从自顶向下视图可见的矩形。
      //orientation:Object类型，可选参数，包含方向和向上属性或航向、俯仰和滚动属性的对象。默认情况下，该方向将指向3D中帧的中心，并指向Columbus视图中的负z方向。向上方向将指向3D中的局部北方，并在哥伦布视图中指向正y方向。在无限滚动模式下，二维中不使用方向。
        viewer.scene.camera.flyTo({
          destination: Cesium.Cartesian3.fromRadians(
          //Cesium.Cartesian3.fromRadians(longitude, latitude, height, ellipsoid, result),静态函数
          //从以弧度为单位的经度和纬度值返回笛卡尔坐标3维位置
          //longitude，经度，弧度制
          //latitude，维度，弧度制
          //height:默认值0，可选参数，椭球体上方的高度，以米为单位
          //ellipsoid:默认是wgs84，可选
          //result:Cartesian3类型，，可选，存储结果的对象
            -2.6399828792482234,
            1.0993550795541742,
            5795
          ),
          orientation: {
            heading: 3.8455,//航向
            pitch: -0.4535,//俯仰
            roll: 0.0,//翻滚
          },
        });
      },
    },
    {
      text: "Anchorage Area",
      onselect: function () {
        viewer.scene.camera.flyTo({
          destination: Cesium.Cartesian3.fromRadians(
            -2.610708034601548,
            1.0671172431736584,
            1900
          ),
          orientation: {
            heading: 4.6,
            pitch: -0.341,
            roll: 0.0,
          },
        });
      },
    },
    {
      text: "Peaks",
      onselect: function () {
        viewer.scene.camera.flyTo({
          destination: Cesium.Cartesian3.fromRadians(
            -2.6928866820212813,
            1.072394255273859,
            3700
          ),
          orientation: {
            heading: 1.6308222948889464,
            pitch: -0.6473480165020193,
            roll: 0.0,
          },
        });
      },
    },
    {
      text: "Riverbed",
      onselect: function () {
        viewer.scene.camera.flyTo({
          destination: Cesium.Cartesian3.fromRadians(
            -2.6395623497608596,
            1.0976443174490356,
            2070
          ),
          orientation: {
            heading: 6.068794108659519,
            pitch: -0.08514161789475816,
            roll: 0.0,
          },
        });
      },
    },
  ],
  "toolbar"
);

2、亲测

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <script src='https://cesium.com/downloads/cesiumjs/releases/1.79.1/Build/Cesium/Cesium.js'></script>
    <link href='https://cesium.com/downloads/cesiumjs/releases/1.79.1/Build/Cesium/Widgets/widgets.css'
        rel='stylesheet'>
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        #container1,
        #container2 {
            height: 100vh;
        }

        span {
            position: fixed;
            z-index: 2000;
            color: white;
        }

        select {
            position: fixed;
            z-index: 2000;
            top: 30px
        }
    </style>
</head>

<body>
    <div style="display: flex;">
        <div id='container1' style="flex: 1;"><span>ArcticDEM</span>
            <div style="display: none;" id="credit1"></div>
            <select name="" onchange="select1(this)">
                <option value="Denali">Denali</option>
                <option value="Anchorage Area">Anchorage Area</option>
            </select>
        </div>
        <div id='container2' style="flex: 1;"><span>AMAP Terrain</span>
            <div style="display: none;" id="credit2"></div>
            <select name="" onchange="select2(this)">
                <option value="Pinnacle">Pinnacle</option>
                <option value="Mount Nittany">Mount Nittany</option>
            </select>
        </div>
    </div>

</body>
<script>
    let viewer1 = new Cesium.Viewer('container1', {
        creditContainer: 'credit1',
        geocoder: false,
        baseLayerPicker: false,
        terrianProvider: new Cesium.CesiumTerrainProvider({
            url: Cesium.IonResource.fromAssetId(3956)
        })
    })
    let viewer2 = new Cesium.Viewer('container2', {
        creditContainer: 'credit2',
        geocoder: false,
        baseLayerPicker: false,
        terrianProvider: new Cesium.CesiumTerrainProvider({
            url: Cesium.IonResource.fromAssetId(3957)
        })
    })
</script>
<script>
    function select1(e) {
        switch (e.value) {
            case 'Denali':
                viewer1.scene.camera.flyTo({
                    //位置+高度
                    destination: Cesium.Cartesian3.fromRadians(
                        -2.6399828792482234,
                        1.0993550795541742,
                        5795
                    ),
                    //航向、俯仰、翻滚
                    orientation: {
                        heading: 3.8455,
                        pitch: -0.4535,
                        roll: 0
                    }
                })
                break
            case 'Anchorage Area':
                viewer1.scene.camera.flyTo({
                    destination: Cesium.Cartesian3.fromRadians(
                        -2.610708034601548,
                        1.0671172431736584,
                        1900
                    ),
                    orientation: {
                        heading: 4.6,
                        pitch: -0.341,
                        roll: 0.0,
                    }
                })
                break
        }
    }

    function select2(e) {
        switch (e.value) {
            case 'Pinnacle':
                viewer2.scene.camera.flyTo({
                    destination: Cesium.Cartesian3.fromRadians(
                        -1.3324415110874286,
                        0.6954224325279967,
                        236.6770689945084
                    ),
                    orientation: {
                        heading: Cesium.Math.toRadians(310),
                        pitch: Cesium.Math.toRadians(-15),
                        roll: 0.0,
                    }
                })
                break
            case 'Mount Nittany':
                viewer2.scene.camera.flyTo({
                    destination: Cesium.Cartesian3.fromRadians(
                        -1.358985133937573,
                        0.7123252393978314,
                        451.05748252867375
                    ),
                    orientation: {
                        heading: Cesium.Math.toRadians(85),
                        pitch: Cesium.Math.toRadians(0),
                        roll: 0.0,
                    }
                })
                break
        }
    }
</script>

</html>

不收藏找不到我

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6、Cesium学习之添加地形图层-高投影的arctic地形

1、实例//terrainProvider属性，//属性值是TerrainProvider，TerrainProvider是一个地形图层加载类，抽象类，其子类有：//EllipsoidTerrainProvider//CesiumTerrainProvider//VRTheWorldTerrainProvider//GoogleEarthEnterpriseTerrainProvidervar viewer = new Cesium.Viewer("cesiumContainer", {
复制链接

扫一扫