Cesium学习一：开发环境搭建

Cesium学习一：开发环境搭建
一、前言

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

二、开发框架选择

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

三、注册申请Token
1. 使用Cesium库需要Token，所以得先去Cesium官网注册账号，然后申请Token，点此传送
2. 登录账号，点击左上角的Create token
  
  3.在弹出的框中先填写Name，然后点击Create即可，在左侧的表格中选中刚创建的Name，在右侧会显示对应的Token，将此Token复制用于代码开发
四、基本代码

html的方式比较简单，一个文件即可，直接上代码。注意：Cesium.Ion.defaultAccessToken = '你的Token'这一行中需要用你刚申请的Token替换，保存后直接用浏览器打开即可。
```
DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  
  <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
```
五、Cesium视图与代码对照说明
1. 在设置完正确的Token后，用浏览器打开可见到如下图所示的界面。图中的各个按钮的显示可通过代码中对应名称的变量进行控制，true为显示，false为隐藏，可根据自己的需要进行调整，上述代码是为了方便展示，全部设置成true了。
2. 视图中为了方便说明infoBox，我额外增加了一个点元素（不在上述代码中，后续在基本元素的绘制章节会说明），infoBox为true时点击元素就会显示对应的信息提示框。
3. Viewer的参数中terrainProvider:Cesium.createWorldTerrain()没有对应的控件，此代码用来控制地形的起伏，当我们滚动鼠标将视角拉向地面时，在未设置此代码时，地形是没有起伏的，如山、峡谷等都是平的，设置后可有正常的起伏。
4. 代码中控件的显隐都在Viewer的初始化参数中，但还有版权信息不在参数里，需单独设置，见viewer._cesiumWidget._creditContainer.style.display="none"这一行，取消注释可隐藏版权信息。
5. 代码中除了基本的显隐控制外，还修改了Cesium的默认视角，默认为美洲，修改后为中国，符合咱中国人的需要。
6. 最后代码中还增加了style的控制，默认的cesium在网页上加载出来后不是全屏（离网页两边还有一定的距离），设置后变为全屏，同时增加z-index方便后期在视图上增加自己的控件后可以让鼠标拾取到。
相关阅读:
R语言使用dplyr包的filter函数筛选dataframe数据中特定数据列的最大值所在的数据行
 Java之Lambda表达式
 linux开发工具的使用
 【Vue】五分钟就能看懂的vue数据双向绑定
 由于数字化转型对集成和扩展性的要求，定制化需求难以满足，百数低代码服务商该如何破局？
Java使用JavaMail进行邮件的发送和读取
 智源社区AI周刊No.101：DeepMind推出AlphaTensor登Nature封面；stateof.ai发布AI情况报告...
插入排序算法
 【OpenCV-Python】教程：3-10 直方图（4）直方图反向投影
 PTrade和QMT对比那个更好用？
原文地址：https://blog.csdn.net/u014523388/article/details/126266958

一、前言

二、开发框架选择

三、注册申请Token

四、基本代码

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