学习【Cesium】第六篇，Cesium地图点云与地形的加载（学不会揍我）

Cesium地图点云与地形的加载

 

话不多说，看步骤 ↓ ↓ ↓

第一步： 登陆【cesium icon】 网站： Cesium ion

第二步： 在【资产仓库】选择要添加的资产，我这边添加了夜色地图和墨尔本点云

 第三步： 进入【我的资产】即可看到刚才【第二步】添加的资产列表

 第四步：开始在页面使用【我的资产】中的各种地图

  a. 加载夜晚的地球

// Cesium地图、点云与地形的加载 --加载夜晚的地球
loadEarthAtNight() {
    this.viewer.imageryLayers.addImageryProvider(
        new Cesium.IonImageryProvider({ assetId: 3812 })
    )
}

  b. 加载墨尔本点云

// Cesium地图、点云与地形的加载 --墨尔本点云
loadPointCloud() {
    this.viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
            url: Cesium.IonResource.fromAssetId(43978)
        })
    )
}

  c. 加载地形图

// Cesium地图、点云与地形的加载 --加载地形数据
loadTerrain() {
    this.viewer.terrainProvider = new Cesium.CesiumTerrainProvider({
        url: Cesium.IonResource.fromAssetId(1),
        requestVertexNormals: true,
        requestWaterMask: true   // 水面效果
    })
}

以上也可以结合一些实际情况，做出一些效果，如黑夜与白天的变换、水面动画等：

initMap() {
Cesium.Ion.defaultAccessToken = 'XXX'
this.viewer = new Cesium.Viewer('cesiumContainer', {
    animation: true,  // 设置动画小组件关闭展示
    timeline: true, // 时间轴关闭展示
    infoBox: false, // 信息盒子关闭展示
    geocoder: false, // 地理编码搜索关闭展示
    baseLayerPicker: false, // 基础图层选择器关闭展示
    sceneModePicker: false, // 场景选择器关闭展示
    fullscreenButton: false, // 全屏按钮关闭展示
    navigationInstructionsInitiallyVisible: false, // 导航说明是否最初展示
    navigationHelpButton: false, // 导航帮助按钮关闭展示
    creditContainer: 'testCredit',
    imageryProvider: new Cesium.IonImageryProvider({ assetId: 3812 }), 
    homeButton: false // 主页按钮关闭展示
})

    // 地球是否展示
    this.viewer.scene.globe.show = true
    //昼夜效果也换
    this.loadEarthAtNight()
}
// 加载昼夜联动
loadEarthAtNight() {
    const dynamicLighting = true
    this.viewer.imageryLayers.addImageryProvider(
        new Cesium.IonImageryProvider({ assetId: 3812 })
    )

    this.viewer.clock.multiplier = 4000
            
    const imageryLayers =   this.viewer.imageryLayers
    const nightLayer = imageryLayers.get(0)
    const dayLayer = imageryLayers.addImageryProvider(
        new Cesium.IonImageryProvider({
            assetId: 3845
    }))
            
    imageryLayers.lowerToBottom(dayLayer)
    this.updateLighting(dynamicLighting, nightLayer, dayLayer)
}
// 更新光照效果
updateLighting(dynamicLighting, nightLayer, dayLayer) {
    dayLayer.show = dynamicLighting
    this.viewer.scene.globe.enableLighting = dynamicLighting
    this.viewer.clock.shouldAnimate = dynamicLighting
    nightLayer.dayAlpha = dynamicLighting ? 0.0 : 1.0
}
    

那么下一章，学习建筑模型、空间数据的加载，go go