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的官網上申請一個。不然有可能地球沒法顯示。前端框架