Cesium.js（7）：地图、地形的加载
1 地图加载
Cesium.js提供了不同的地图，不同地图有不同的效果，如下图：
1.1 加载cesium在线资源
用户可以通过加载cesium在线资源，加载新的地图模型。
登陆cesium，道Asset Depot在线资产库中进行添加新的模型资产：
其中My Assets是已经添加的资产。
这里我添加了一个新的资产
加载模型之前样式如下
代码如下：
<!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"><title>相机</title><script src="../../libs/Cesium/Cesium.js"></script><link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body {margin: 0px;padding: 0px;}</style>
</head>
<body><div id="puiedu-cesiumContainer"></div><script>Cesium.Ion.defaultAccessToken = '你的key';const viewer = new Cesium.Viewer('puiedu-cesiumContainer',{infoBox: false,baseLayerPicker:false, });// 将异步操作包裹在立即执行的async函数中(async function() {try {const imageryLayer = viewer.imageryLayers.addImageryProvider(await Cesium.IonImageryProvider.fromAssetId(3812));} catch (error) {console.log(error);}})();</script>
</body>
</html>加载地图之后样式如下
1.2 加载ArcGIS地图服务
代码如下：
//加载地图var esri = new Cesium.ArcGisMapServerImageryProvider({url:'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'})Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjMTA2MDkxZS00MmVjLTRhMjMtYWJhYS03ZmYwZWRhOWYyZTUiLCJpZCI6MjExNjUzLCJpYXQiOjE3NDQ2MTg3NDF9.KxNS9sIFshzyoCeJJnIKblgg77yYbXAlx2jKfFCjqi8';const viewer = new Cesium.Viewer('cesiumContainer', {baseLayerPicker:false,imageryProvider:esri,});效果如下：
当然也可以加载其他的地图，后面会有专门的印象专题。
2 加载地形
在为加载地形数据是，会发现地图上的山峰没有山势起伏的样子。
先到Asset Depot中添加一个地形数据如下：
找到对应的ID。
编写代码：
<!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"><title>相机</title><script src="../../libs/Cesium/Cesium.js"></script><link href="../../libs/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body {margin: 0px;padding: 0px;}</style>
</head>
<body><div id="puiedu-cesiumContainer"></div><script>Cesium.Ion.defaultAccessToken = '你的key';const viewer = new Cesium.Viewer('puiedu-cesiumContainer', {baseLayerPicker: false,});viewer.scene.setTerrain(new Cesium.Terrain(Cesium.CesiumTerrainProvider.fromIonAssetId(1,{requestWaterMask: true, //请求水面掩膜。这会使得地形数据中的水体区域呈现得更真实。requestVertexNormals: true, //请求地形的顶点法线，这对于渲染光照和阴影效果非常重要})),);</script>
</body>
</html>然后运行查看如下：
看水面会发现波涛汹涌的效果。
当然想看的清晰一点可以开启光照
viewer.scene.globe.showWaterEffect = true; // 确保全局水面效果开启viewer.scene.globe.enableLighting = true; // 建议开启光照（影响波纹可见性）