运行环境搭建
-
下载cesium.js
从https://cesium.com/downloads/下载cesium.js:
-
在vsCode中建立index.html和index.js，并在index.html中引入index.js：
index.html:<!DOCTYPE html> <html lang="en"> <head> <!-- Use correct character set. --> <meta charset="utf-8" /> <!-- Tell IE to use the latest, best version. --> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Make the application on mobile take up the full browser screen and disable user scaling. --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <title>titleset</title> <script src="../cesium_Build/Cesium/Cesium.js"></script> <style> @import url(./Cesium-1.112/Build/Cesium/Widgets/widgets.css); html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } #getposition { position: absolute; top: 0; left: 0; width: 300px; height: 600px; background-color: gray; } </style> </head> <body> <div id="cesiumContainer"></div> <script src="./Cesium-1.112/Build/Cesium/Cesium.js"></script> <script src="./index.js"></script> </body> </html>index.html
const viewer = new Cesium.Viewer("cesiumContainer", { scene3DOnly: true, selectionIndicator: false, baseLayerPicker: false, terrain: Cesium.Terrain.fromWorldTerrain({ requestWaterMask: true, requestVertexNormals: true, requestWaterMask: true, }), }); -
查看效果
通过vsCode的liveServer插件来开启一个5500的端口，查看网页实际效果：
可以看到，地球顺利的出现了
运行环境就搭建完成了！