526互联

cesium.js入门基础教程

发布时间 2023-12-12 10:43:21作者: 奥托

运行环境搭建

  1. 下载cesium.js
    从https://cesium.com/downloads/下载cesium.js:

  2. 在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,
  }),
});

  3. 查看效果
    通过vsCode的liveServer插件来开启一个5500的端口，查看网页实际效果：

可以看到，地球顺利的出现了
运行环境就搭建完成了！