Cesium案例解析(一)——HelloWorld

时间 2019-12-17

标签 cesium 案例解析 helloworld 繁體版

原文原文链接

目录javascript

1. 概述

感受网上已经有很多关于cesium的教程了，可是学习一个框架最快的办法就是熟悉其自带的实例了。cesium网站上提供了一系列实例，就想经过这些实例总结下学习cesium的知识；固然，若是有别的实例，也会一块儿总结。css

从cesium官方网站上下载的build包括了源代码，帮助资料，Sandcastle实例等内容，而且可以经过Node.JS创建关于该版本的cesium网站，可以从中查阅文档，实例学习等。html

通常来讲要使用cesium，须要创建一个服务器，让cesium在服务器的域内使用。但其实也不用那么复杂，若是只是学习，能够设置浏览器跨域，也可以让cesium运行，毕竟cesium是基于WebGL的前端框架，基本与后台无关。浏览器设置跨域的办法能够自行在网上搜索解决办法，各类浏览器的设置不一样。前端

cesium自带的实例位置以下图所示：java

图1：cesium实例位置

能够将这些实例直接拖入到设置跨域的本地浏览器中运行，能够到达在服务器域内运行同等的效果。提醒一下设置跨域的本地浏览器应该只运行本身编写的实例或者肯定安全的网页，不然存在安全风险。跨域

2. 实例

按照惯例，任何语言或者框架的第一步都是HelloWorld，cesium也不例外。浏览器

2.1. HelloWorld.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>Hello World!</title>
    <script src="../Build/Cesium/Cesium.js"></script>
    <style>
        @import url(../Build/Cesium/Widgets/widgets.css);

        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script src="HelloWorld.js"></script>  
</body>

</html>

这段HTML代码比较简单:首先是导入了组件cesium.js及其样式表widgets.css,二者都来自于cesium源代码；而后建立了一个名为cesiumContainer的div图层，并设定其样式；最后是导入了本身写的JS代码HelloWorld.js。安全

2.2. HelloWorld.js

"use strict"

//Add your ion access token from cesium.com/ion/ 
Cesium.Ion.defaultAccessToken = '----';

var viewer = new Cesium.Viewer('cesiumContainer');

HelloWorld.js就更加简单了，仅仅经过一句代码就建立了包含多个组件的数字地球组件。注意默认建立的数字地球图层中包含的Bing地图是须要Token支持的，能够在cesium的官网上申请一个。不然有可能地球没法显示。前端框架

3. 结果

在浏览器中运行的结果以下：服务器

图2：cesium数字地球