Cesium学习一：开发环境搭建

小何又沐风

已于 2022-08-10 16:12:56 修改

阅读量1.5k

点赞数

分类专栏： gis 文章标签：学习前端 javascript Cesium gis

于 2022-08-10 16:06:51 首次发布

本文链接：https://blog.youkuaiyun.com/u014523388/article/details/126266958

版权

gis 专栏收录该内容

11 篇文章

订阅专栏

一、前言

Cesium作为三维WebGIS引擎目前已经被广泛使用，想要成为一名有实力的gis开发者，有必要学习Cesium的基本原理以及使用方法。

二、开发框架选择

Cesium开发库可以通过url的方式引入，也可用通过npm进行安装，本文秉着轻量化的学习方式，选择基于单html的文件通过url引入cesium库的方法。当然也可以使用VUE CLI搭建项目来构建，那样会比较复杂，本栏目旨在通过使用简单html文件学习掌握Cesium的常用方法，等掌握之后再构建大型应用。

三、注册申请Token

使用Cesium库需要Token，所以得先去Cesium官网注册账号，然后申请Token，点此传送
登录账号，点击左上角的Create token

3.在弹出的框中先填写Name，然后点击Create即可，在左侧的表格中选中刚创建的Name，在右侧会显示对应的Token，将此Token复制用于代码开发

四、基本代码

html的方式比较简单，一个文件即可，直接上代码。注意：Cesium.Ion.defaultAccessToken = '你的Token'这一行中需要用你刚申请的Token替换，保存后直接用浏览器打开即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!-- Include the CesiumJS JavaScript and CSS files -->
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Cesium.js"></script>
  <link href="https://cesium.com/downloads/cesiumjs/releases/1.96/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
  <div id="cesiumContainer" style="position:fixed;left:0px;top:0px;width:100%;height:100%;z-index:-10;"></div>
  <script>
    // Your access token can be found at: https://cesium.com/ion/tokens.
    // Replace `your_access_token` with your Cesium ion access token.

    Cesium.Ion.defaultAccessToken = '你的Token';
    
    // 设置地球的初始视角为中国，默认为美洲
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);

    // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
    const viewer = new Cesium.Viewer('cesiumContainer', {
      geocoder:true, //是否显示右上角第一个位置的查找工具，默认为true
      homeButton:true, //是否显示右上角第二个位置的home图标，默认为true
      sceneModePicker:true, //是否显示右上角第三个位置的选择视角模式，2d，3d，默认为true
      baseLayerPicker:true, //是否显示右上角第四个位置的图层选择器，默认为true
      navigationHelpButton:true, //是否显示右上角第五个位置的导航帮助按钮，默认为true
      animation:true, //是否显示左下角的动画器件，默认为true
      timeline:true, //是否显示下方时间线，默认为true
      fullscreenButton:true, //是否显示右下角全屏按钮，默认为true
      vrButton:true, //是否显示右下角vr按钮，默认为false
      shouldAnimate:true, //允许动画同步，默认为false
      infoBox:true, //点击要素之后是否显示信息，默认为true
      terrainProvider:Cesium.createWorldTerrain(), //创建世界地形，有起伏，默认为空
    });

    // viewer._cesiumWidget._creditContainer.style.display="none"; //取消版权信息
    
  </script>
 </div>
</body>
</html>

五、Cesium视图与代码对照说明

在这里插入图片描述

在设置完正确的Token后，用浏览器打开可见到如下图所示的界面。图中的各个按钮的显示可通过代码中对应名称的变量进行控制，true为显示，false为隐藏，可根据自己的需要进行调整，上述代码是为了方便展示，全部设置成true了。
视图中为了方便说明infoBox，我额外增加了一个点元素（不在上述代码中，后续在基本元素的绘制章节会说明），infoBox为true时点击元素就会显示对应的信息提示框。
Viewer的参数中terrainProvider:Cesium.createWorldTerrain()没有对应的控件，此代码用来控制地形的起伏，当我们滚动鼠标将视角拉向地面时，在未设置此代码时，地形是没有起伏的，如山、峡谷等都是平的，设置后可有正常的起伏。

在这里插入图片描述
4. 代码中控件的显隐都在Viewer的初始化参数中，但还有版权信息不在参数里，需单独设置，见viewer._cesiumWidget._creditContainer.style.display="none"这一行，取消注释可隐藏版权信息。
5. 代码中除了基本的显隐控制外，还修改了Cesium的默认视角，默认为美洲，修改后为中国，符合咱中国人的需要。
6. 最后代码中还增加了style的控制，默认的cesium在网页上加载出来后不是全屏（离网页两边还有一定的距离），设置后变为全屏，同时增加z-index方便后期在视图上增加自己的控件后可以让鼠标拾取到。