Cesium系統學習整理（一）

時間 2020-11-10

標籤 css html 前端 node git 瀏覽器 tomcat app ide 性能欄目 CSS 简体版

原文原文鏈接

（一）Cesium的概念定義

　　Cesium是國外一個基於JavaScript編寫的使用WebGL的地圖引擎。Cesium支持3D,2D,2.5D形式的地圖展現，能夠自行繪製圖形，高亮區域，並提供良好的觸摸支持，且支持絕大多數的瀏覽器和mobile，CesiumJS是一個開放源代碼JavaScript庫，用於建立具備最佳性能，精度，視覺質量和易用性的世界一流的3D地球和地圖。從航空航天到智慧城市再到無人機，各行各業的開發人員都使用CesiumJS建立用於共享動態地理空間數據的交互式Web應用程序。CesiumJS創建在開放格式上，旨在實現強大的互操做性。從Cesium ion或其餘來源獲取數據，使用CesiumJS進行可視化，並與臺式機或移動設備上的用戶共享。CesiumJS的下載量超過1,000,000，爲數百萬用戶提供了強大的應用程序，整個定義來自官方網站。css

（二）Cesium的安裝與配置環境

　　前面已經瞭解了什麼是Cesium，如今就是開始使用了，說到安裝其實Cesium會有一個資源包，目前已經到了1.72版本了，下載下來在代碼進行引用便可。若是你網速夠給力，且可翻，也可不用下載資源包，在代碼中經過src將js與css格式在線引用，不過該方法會出現加載慢的特色，建議仍是將資源包下載下來，本地引用。另外說到配置環境，對於前端來講，nodejs的環境必需要有的，看到不少博主用Python、tomcat以及IIS進行http環境搭建，本人使用的爲git命令行輸入http-server的方式進行http服務的環境搭建的，不過原理大體同樣，配置完相關的環境，就能夠寫出Cesium的第一例子了。html

（三）Cesium的第一個實例

不少博主中第一個實例出現的第一段代碼基本都是var viewer = new Cesium.Viewer('cesiumContainer')，而後把h5的其餘部分補齊，出現了一個大大的地球，因而小夥伴們感受去嘗試了一下，發現事情並不簡單，大部分用該代碼出現的就是一個大大的黑框除了cesium自帶的一些東西外，並無出現地球，那是爲何那？好了不買關子了，這裏不出現地球最主要的緣由是版本變了，由於咱們在加載上面的代碼的時候，默認使用的是必應的底圖，但在1.5版本之後，加載底圖不能說隨便加載了，你必須有必應的token才行，那就要去先去註冊一個token了，（必應地圖地址https://www.bingmapsportal.com/），如圖註冊完成之後的截圖：前端

token建立完成，就好操做了，代碼以下：node

<!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!111</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 id="cesiumxin" style="position:fixed;left:0;z-index:99"><a href="http://cesium.xin" style="color:aliceblue;text-decoration:none">http://cesium.xin <label for="">cesium中文網 http://cesium.xin </label></a></div>
    </div>
  <script>
        Cesium.BingMapsApi.defaultKey = "你的key";
	var viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, //是否建立動畫小器件，左下角儀表
        timeline: false,  //是否顯示時間線控件
        geocoder: false,         //是否顯示地名查找控件
        shouldAnimate: true,
        baseLayerPicker: false,  //是否顯示圖層選擇控件  
        imageryProvider: new Cesium.BingMapsImageryProvider({
        url: "https://dev.virtualearth.net",
        mapStyle : Cesium.BingMapsStyle.AERIAL }),        
});
  </script>
</body>
</html>

　　這時候你再去運行會發現，那個久違的地球出來了，如圖：git

不少小夥伴也發現了，這個代碼中有幾行爲 imageryProvider: new Cesium.BingMapsImageryProvider({ url: "https://dev.virtualearth.net",mapStyle : Cesium.BingMapsStyle.AERIAL }),這標記的紅色的代碼就有意思了，這個mapstyle就是地圖的格式啊，也就是說咱們能夠經過修改代碼中的這個值，這個地球也會變成不一樣的球體了，不行咱們能夠試試，

mapStyle : Cesium.BingMapsStyle.ROAD時出現的球體：同時還包括AERIAL、AERIAL_WITH_LABELS、ROAD、ORDNANCE_SURVEY、COLLINS_BART等必應帶的風格，能夠本身去嘗試加載一下。