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
学习【Cesium】第六篇,Cesium地图点云与地形的加载(学不会揍我)
于 2022-08-11 08:00:00 首次发布