Cesium入门(三)

my陈

已于 2024-12-17 10:12:30 修改

阅读量1.4k

点赞数

分类专栏： webGis 文章标签： javascript

于 2021-12-17 17:27:23 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44552168/article/details/121996734

版权

webGis 专栏收录该内容

4 篇文章

订阅专栏

一、Cesium ion 简介

Cesium ion是一个提供瓦片图和3D地理空间数据的平台，Cesium ion支持把数据添加到用户自己的CesiumJS应用中。下面我们将使用Sentinal-2二维贴图和Cesium世界地形，二者都需要ion的支持。

二、 Cesium ion 使用

Cesium ion 访问地址https://cesium.com/ion

首先需要去注册一个免费的Cesium ion账户
打开 Cesium ion然后注册一个新的账户
点击"Access Token"，跳转到Access Tokens page页面
选择Default默认的access token拷贝到contents中

三、切换默认的地图

// 移除默认基础层 //多个地图可以叠加
viewer.imageryLayers.remove(viewer.imageryLayers.get(0))
// 添加Sentinel-2图像
viewer.imageryLayers.addImageryProvider(
    //Ion方式引入Bing Maps航拍标签 assetId的值是Cesium ion中 我们仓库中的地图id
    new Cesium.IonImageryProvider({ assetId: 3 })
    //url方式引入高德地图
    // new Cesium.UrlTemplateImageryProvider({
    // url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
    // })
)

四、设置地形和光源信息

//装载世界地形
viewer.terrainProvider = Cesium.createWorldTerrain({
    //特效需要在服务器中存在
    //加载水流特效
    requestWaterMask: true,
    //加载光的特效
    requestVertexNormals: true,
})
//激活太阳
//viewer.scene.globe.enableLighting = true

五、覆盖home的默认方法

//创建一个初始的相机视图
//从以度为单位的经度和纬度值返回一个Cartesian3位置。
var initialPosition = new Cesium.Cartesian3.fromDegrees(
  -73.998114468289017509,
  40.674512895646692812,
  2631.082799425431
)
//从角度返回一个新的HeadingPitchRoll实例。
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
  -7.1077496389876024807,
  -31.987223091598949054,
  0.025883251314954971306
)
//设置主页试图
var homeCameraView = {
  //相机在WGS84(世界)坐标中的最终位置或从自上而下的视图中可见的矩形，设置终点位置
  destination: initialPosition,
  //一个包含方向和向上属性或标题、俯仰和滚动属性的对象
  orientation: {
    heading: initialOrientation.heading,
    pitch: initialOrientation.pitch,
    roll: initialOrientation.roll,
  },
}
// 设置初始视图
viewer.scene.camera.setView(homeCameraView)
// 添加一些相机飞行动画选项
//动画时常
homeCameraView.duration = 2.0
//最大高度的像素
homeCameraView.maximumHeight = 2000
//场地调整高度
homeCameraView.pitchAdjustHeight = 2000
//初始化为单位矩阵的不可变Matrix4实例
homeCameraView.endTransform = Cesium.Matrix4.IDENTITY
//覆盖默认的home键方法
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(
  function (e) {
    e.cancel = true

    viewer.scene.camera.flyTo(homeCameraView)
  }
)