Cesium案例解析(一)——HelloWorld


1. 概述

感覺網上已經有不少關於cesium的教程了,但是學習一個框架最快的辦法就是熟悉其自帶的實例了。cesium網站上提供了一系列實例,就想通過這些實例總結下學習cesium的知識;當然,如果有別的實例,也會一起總結。

從cesium官方網站上下載的build包括了源代碼,幫助資料,Sandcastle實例等內容,並且能夠通過Node.JS建立關於該版本的cesium網站,能夠從中查閱文檔,實例學習等。

一般來說要使用cesium,需要建立一個服務器,讓cesium在服務器的域內使用。但其實也不用那么復雜,如果只是學習,可以設置瀏覽器跨域,也能夠讓cesium運行,畢竟cesium是基於WebGL的前端框架,基本與后台無關。瀏覽器設置跨域的辦法可以自行在網上搜索解決辦法,各種瀏覽器的設置不同。

cesium自帶的實例位置如下圖所示:

cesium實例位置
圖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. 結果

在瀏覽器中運行的結果如下:

cesium實例位置
圖2:cesium數字地球


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM