1. 概述
2. 實體
- 2.1. HelloWorld.html
- 2.2. HelloWorld.js
3. 結果

1. 概述

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

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

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

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=https://www.cnblogs.com/charlee44/p/"../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>


<body>
    
    <script src="HelloWorld.js"></script>

這段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數字地球

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/2312.html

標籤：GIS

上一篇：cesium 結合 geoserver 實作地圖屬性查詢(附原始碼下載)

下一篇：WPF 自定義UI控制元件學習

Cesium案例決議(一)——HelloWorld

1. 概述

2. 實體

2.1. HelloWorld.html

2.2. HelloWorld.js

3. 結果