创建一个纯净的地球，并了解基本界面组件

一、建立依赖

基于Cesium创建的网页，都依赖于源码中Build中两个基本的库，JS库和CSS库，所以需要在开头就要引入本地的两个文件。

<script src="Build/Cesium/Cesium.js"></script>
<link href="Build/Cesium/Widgets/widgets.css" rel="stylesheet">

当然也可以从网络上直接引用，但是其外网加上文件太大，导致加载极慢，不建议

二、创建服务器

Cesium创建的网页不能通过本地访问方式直接访问，需要在所在的文件夹下建立服务器，形式是没有限制的，可以是PHP .NET等，我推荐使用Node，因为Cesium演示文件HelloWorld.html想要正确运行，就需要通过node运行，所以无需再安装其他服务器软件

1、安装Express.js，这个框架将Node的服务器封装的很好，通过yarn安装

 yarn add express

2、创建服务器 server.js，监听4399端口

var http = require("http");
var express = require("express");
const path = require('path');

var app = express();
app.use(express.static(path.join(__dirname, '')));

app.listen(4111, () => {
  console.log(`App listening at port 4111`)
})

3、启动服务器

node server.js

在这里插入图片描述

三、创建网页文件

1、因为默认的在线地图不显示，我给改为以下地址才可以

 //ion账户提供一个token去访问Bing影像底图
 Cesium.Ion.defaultAccessToken =           'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlMTk4ZTYyNy00MjkxLTRmZWYtOTg1MS0wOThjM2YzMzIzYzEiLCJpZCI6NzEyMSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0ODMxNzI5OX0.rKV8Ldl_bgR3lVvNsbHhTX62j8JH8ADCIWAwk7tXpr8';

2、通过css方式，将所有控件隐藏，只保留最原始地球，通过控件参数控制，还会留下商标，另基本界面控件在注释中介绍

3、导航栏中输入

http://localhost:4399/1-更换ion显示纯净地球.html

4、

在这里插入图片描述

5、全部html代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <!-- 引入本地的cesium支持js和css文件，更快并节约流量 -->
        <script src="Build/Cesium/Cesium.js"></script>
        <link href="Build/Cesium/Widgets/widgets.css" rel="stylesheet">
        <style>
            body{
                /* 控制显示范围 */
                margin:0px;         
            }
            #cesiumContainer {
                width: 100%;
                height: 100%;
            }

            .cesium-viewer-toolbar, /* 右上角按钮组 */ 
            .cesium-viewer-animationContainer, /* 左下角动画控件 */ 
            .cesium-viewer-timelineContainer, /* 时间线 */ 
            .cesium-viewer-bottom /* logo信息 */ 
            { 
            display: none; 
            } 
            .cesium-viewer-fullscreenContainer /* 全屏按钮 */ 
            { position: absolute; top: -999em; }
            
            /* 注：全屏按钮不能通过display:none的方式来达到隐藏的目的，这是因为生成的按钮控件的行内样式设置了display属性，会覆盖引入的css属性 */

        </style>
    </head>
    <body>
        <div id="cesiumContainer"></div>
        <script>
            //bing地图默认调用地址不对，找到一个代替地址
            Cesium.Ion.defaultAccessToken =
                'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlMTk4ZTYyNy00MjkxLTRmZWYtOTg1MS0wOThjM2YzMzIzYzEiLCJpZCI6NzEyMSwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0ODMxNzI5OX0.rKV8Ldl_bgR3lVvNsbHhTX62j8JH8ADCIWAwk7tXpr8';

            //时间轴，时间等地球底部控件，不添加参数，为默认选项
            // var viewer = new Cesium.Viewer('cesiumContainer');
                
            //options对象做为配置参数
            var viewer = new Cesium.Viewer("cesiumContainer", {
                //放大镜图标，查找位置工具，查找到之后会将镜头对准找到的地址，默认使用bing地图
                geocoder: true,
                //房子图标，视角返回初始位置
                homeButton: true,
                //经纬网图标，选择视角的模式，有三种：3D，2D，哥伦布视图（2.5D)
                sceneModePicker: true,
                //地图图标，图层选择器，选择要显示的地图服务和地形服务
                baseLayerPicker: true,
                //问号图标，导航帮助按钮，显示默认的地图控制帮助
                navigationHelpButton: true,
                //动画器件，显示当前时间，允许跳转特定时间
                animation: true,
                //时间轴
                timeline: true,
                //全屏图标，全屏按钮
                fullscreenButton: true,
                //虚拟现实
                vrButton: true,
                //阴影
                shadows: true, 
                //点击后显示详细信息
                infoBox: true,
                //展示数据版权属性
                CreditsDisplay: true
            });
            viewer.scene.debugShowFramesPerSecond = true; //显示帧率
        </script>
    </body>
</html>

创建一个纯净的地球，并了解基本界面组件

猜你喜欢