2. 程式人生 > >Cesium入門9 - Loading and Styling Entities - 載入和樣式化實體

Cesium入門9 - Loading and Styling Entities - 載入和樣式化實體

阿新 • • 發佈：2018-11-19

Cesium入門9 - Loading and Styling Entities - 載入和樣式化實體

Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/

現在我們已經為我們的應用程式設定了Viewer配置、imagery和terrain的階段，我們可以新增我們的應用程式的主要焦點——geocache資料。

為了便於視覺化，Cesium支援流行的向量格式GeoJson和KML，以及一種我們團隊自己開源的格式，我們專門開發用於描述Cesium場景的[]CZML](https://github.com/AnalyticalGraphicsInc/czml-writer/wiki/CZML-Guide

)。

無論初始格式如何，Cesium中的所有空間資料都使用Entity API來表示。Entity API以一種有效提供靈活的視覺化的方式，以便對Cesium進行渲染。Cesium Entity是可以與樣式化圖形表示配對並定位在空間和時間上的資料物件。測試沙盒中提供了許多簡單Entity的例子。為了在Entity API的基礎上加快速度，從這個應用程式中休息一下，然後閱讀視覺化的空間資料教程 Visualizing Spatial Data tutorial。

以下有一些關於不同entity型別的例子：

一旦你掌握了一個Entity的樣子，用Cesium裝載資料集將是變得容易理解。要讀取資料檔案，需要建立適合於資料格式的資料來源DataSource，該資料來源將解析在指定URL中承載的資料檔案，併為資料集中的每個地理空間物件建立包含Entity的EntityCollection。DataSource只是定義了一個介面——您需要的資料來源的確切型別將取決於資料格式。例如，KML使用KmlDataSource原始碼。比如：

var kmlOptions = {
    camera : viewer.scene.camera,
    canvas : viewer.scene.canvas,
    clampToGround : true
};
// Load geocache points of interest from a KML file
// Data from : http://catalog.opendata.city/dataset/pediacities-nyc-neighborhoods/resource/91778048-3c58-449c-a3f9-365ed203e914
var geocachePromise = Cesium.KmlDataSource.load('./Source/SampleData/sampleGeocacheLocations.kml', kmlOptions);

上述程式碼讀取我們樣例的geocahce點，從一個KML檔案中，呼叫KmlDataSource.load(optinos)帶一些配置。針對一個KmlDataSource，相機和Canvas配置項是必須的。clamptoGround選項激活了ground clamping，一種流行的描述配置用於是地面的幾何entities比如多邊形和橢圓符合地形而且遵從WGS84橢圓面。

由於這些資料是非同步載入的，因此針對KmlDataSource返回一個的Promise，它將包含我們所有新建立的entities。

如果您不熟悉使用非同步函式的PromiseAPI，這裡的“非同步”基本上意味著您應該在所提供的回撥函式中完成所需的資料.then.為了實際地將這些實體集合新增到場景中，我們必須等待直到promise完成，然後將KmlDataSource新增viewer.datasrouces。取消以下幾行註釋：

// Add geocache billboard entities to scene and style them
geocachePromise.then(function(dataSource) {
    // Add the new data as entities to the viewer
    viewer.dataSources.add(dataSource);
});

預設情況下，這些新建立的實體具有有用的功能。單擊將顯示與實體相關的元資料的資訊框Infobox，並雙擊縮放並檢視實體。若要停止檢視該實體，請單擊“home”按鈕，或單擊“資訊框”上的“劃出”相機圖示。接下來，我們將新增自定義樣式來改善我們的應用程式的外觀style。

對於KML和CZML檔案，可以在檔案中建立宣告式樣式。然而，對於這個應用，讓我們練習手動設計我們的實體。要做到這一點，我們將採取類似的方法來處理這個樣式示例，等待我們的資料來源載入，然後迭代資料來源集合中的所有實體，修改和新增屬性。預設情況下，我們的geocache點標記被建立為Billboards和Labels，所以為了修改這些實體的外觀，我們這樣做：

// Add geocache billboard entities to scene and style them
geocachePromise.then(function(dataSource) {
    // Add the new data as entities to the viewer
    viewer.dataSources.add(dataSource);

    // Get the array of entities
    var geocacheEntities = dataSource.entities.values;

    for (var i = 0; i < geocacheEntities.length; i++) {
        var entity = geocacheEntities[i];
        if (Cesium.defined(entity.billboard)) {
            // Entity styling code here
        }
    }
});

我們可以通過調整它們的錨點、去除標籤來減少clutter和設定isplayDistanceCondition來改善標記的外觀，使得只有在距相機的一定距離內的點是可見的。

// Add geocache billboard entities to scene and style them
if (Cesium.defined(entity.billboard)) {
    // Adjust the vertical origin so pins sit on terrain
    entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
    // Disable the labels to reduce clutter
    entity.label = undefined;
    // Add distance display condition
    entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
}

有關distanceDisplayCondition的更多幫助，請參見sandcastle example。

接下來，讓我們為每個geocache實體改進資訊框Infobox。資訊框的標題是實體名稱，內容是實體描述，顯示為HTML。

你會發現預設的描述並不是很有幫助。由於我們正在顯示geocache 位置，讓我們更新它們來顯示點的經度和緯度。

首先，我們將實體的位置轉換成地圖，然後從Cartographic中讀取經度和緯度，並將其新增到HTML表中的描述中。

在單擊時，我們的geocache 實體現在將顯示一個格式良好的資訊框Infobox，只需要我們所需要的資料。

// Add geocache billboard entities to scene and style them
if (Cesium.defined(entity.billboard)) {
    // Adjust the vertical origin so pins sit on terrain
    entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
    // Disable the labels to reduce clutter
    entity.label = undefined;
    // Add distance display condition
    entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
    // Compute longitude and latitude in degrees
    var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
    var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
    var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
    // Modify description
    // Modify description
    var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
        '<tr><th>' + "Longitude" + '</th><td>' + longitude.toFixed(5) + '</td></tr>' +
        '<tr><th>' + "Latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
        '</tbody></table>';
    entity.description = description;
}

我們的geocache標記現在應該看起來像這樣：
image

對於我們的地理應用程式來說，視覺化特定點的鄰域也會有幫助。讓我們試著為每個紐約街區記載一個包含多邊形的GeoJson檔案。載入GeoJson檔案最終非常類似於我們剛剛用於KML的載入過程。但是在這種情況下，我們使用GeoJsonDataSource。與前一個數據源一樣，我們需要將它新增到viewer.datasources中，以便實際新增資料到場景中。

var geojsonOptions = {
    clampToGround : true
};
// Load neighborhood boundaries from KML file
var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('./Source/SampleData/neighborhoods.geojson', geojsonOptions);

// Save an new entity collection of neighborhood data
var neighborhoods;
neighborhoodsPromise.then(function(dataSource) {
    // Add the new data as entities to the viewer
    viewer.dataSources.add(dataSource);
});

讓我們來調整我們載入的neighborhood多邊形。就像我們剛才做的billboard樣式一樣，我們首先在資料來源載入後迭代遍歷neighborhood 資料來源實體，這次檢查每個實體的多邊形被定義：

// Save an new entity collection of neighborhood data
var neighborhoods;
neighborhoodsPromise.then(function(dataSource) {
    // Add the new data as entities to the viewer
    viewer.dataSources.add(dataSource);
    neighborhoods = dataSource.entities;

    // Get the array of entities
    var neighborhoodEntities = dataSource.entities.values;
    for (var i = 0; i < neighborhoodEntities.length; i++) {
        var entity = neighborhoodEntities[i];

        if (Cesium.defined(entity.polygon)) {
            // entity styling code here
        }
    }
});

既然我們正在顯示neighborhood，讓我們重新命名每個實體使用neighborhood作為它的名字。我們所讀的neighborhood中原始GeoJson檔案作為屬性。Cesium將GeoJson屬性儲存在enty.properties中，這樣我們就可以設定這樣的neighborhood名稱：

// entity styling code here

// Use geojson neighborhood value as entity name
entity.name = entity.properties.neighborhood;

我們可以把每一個多邊形分配給一個新的顏色材料屬性，通過ColorMaterialProperty設定隨機顏色Color，而不是把所有的區域都設定成一樣的顏色。

// entity styling code here

// Set the polygon material to a random, translucent color.
entity.polygon.material = Cesium.Color.fromRandom({
    red : 0.1,
    maximumGreen : 0.5,
    minimumBlue : 0.5,
    alpha : 0.6
});

// Tells the polygon to color the terrain. ClassificationType.CESIUM_3D_TILE will color the 3D tileset, and ClassificationType.BOTH will color both the 3d tiles and terrain (BOTH is the default)
entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;

最後，讓我們為每個實體生成一個帶有一些基本樣式選項的標籤Label。為了保持整潔，我們可以使用disableDepthTestDistance讓Cesium總是把標籤放在任何3D物體可能遮擋的地方。

然而，請注意，標籤總是位於entity.position。多邊形Polygon是由一個未定義的位置建立的，因為它有一個定義多邊形邊界的位置列表。我們可以通過取多邊形位置的中心來生成一個位置：

// entity styling code here

// Generate Polygon position
var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
entity.position = polyCenter;
// Generate labels
entity.label = {
    text : entity.name,
    showBackground : true,
    scale : 0.6,
    horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
    verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
    distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
    disableDepthTestDistance : 100.0
};

這給我們標出了看起來像這樣的多邊形：
image

最後，讓我們通過在城市上空新增無人機飛行來增加我們的NYC geocaches 的高科技視角。

由於飛行路徑只是一系列隨時間變化的位置，所以我們可以從CZML檔案中新增這些資料。CZML是一種用於描述時間動態圖形場景的格式，主要用於在執行Cesium的Web瀏覽器中顯示。它描述了線、點、billboards、模型和其他圖形原語，並指定它們如何隨時間變化。CZML之於Cesium，相當於KML之於谷歌地球的標準格式，它允許大多數Cesium功能特性通過宣告式樣式語言（在這種情況下是JSON模式）使用。

我們的CZML檔案定義了一個實體（預設為視覺化的一個點），其位置被定義為在不同時間點的一系列位置。實體API中有幾種屬性型別可用於處理時間動態資料。參見下面的演示示例：

// Load a drone flight path from a CZML file
var dronePromise = Cesium.CzmlDataSource.load('./Source/SampleData/SampleFlight.czml');

dronePromise.then(function(dataSource) {
    viewer.dataSources.add(dataSource);
});

CZML檔案使用Cesium來顯示無人機飛行，該路徑是實體隨時間顯示其位置的屬性。一條路徑用插值法將離散點連線到一條連續的直線上進行視覺化。
最後，讓我們改善無人機飛行的外觀。首先，而不是簡單地解決問題，我們可以載入一個3D模型來表示我們的無人機並將其附加到實體上。

Cesium支援基於glTF（GL傳輸格式）載入3D模型，這是Cesium團隊與Khronos group一起開發的開放規範，用於通過最小化檔案大小和執行時間處理來有效地載入應用程式的3D模型。沒有gLTF模型嗎？我們提供了一個線上轉換器，將COLLADA和OBJ檔案轉換為glTF格式。

讓我們載入一個無人機模型Model，具有良好的基於物理的陰影和一些動畫：

var drone;
dronePromise.then(function(dataSource) {
    viewer.dataSources.add(dataSource);
    // Get the entity using the id defined in the CZML data
    drone = dataSource.entities.getById('Aircraft/Aircraft1');
    // Attach a 3D model
    drone.model = {
        uri : './Source/SampleData/Models/CesiumDrone.gltf',
        minimumPixelSize : 128,
        maximumScale : 1000,
        silhouetteColor : Cesium.Color.WHITE,
        silhouetteSize : 2
    };
});

現在我們的模型看起來不錯，但與原來的點不同，無人機模型具有方向性，當無人駕駛飛機向前移動時，它看起來很奇怪。幸運的是，Cesium提供了一種VelocityOrientationProperty，它將根據一個實體向前和向後取樣的位置自動計算方向：

// Add computed orientation based on sampled positions
drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);

現在我們的無人駕駛飛機模型將如期進行。

還有一件事我們可以做的是改善我們的無人機飛行的外觀。從遠處看，它可能並不明顯，但無人機的路徑是由看起來不自然的線段組成的，這是因為Cesium使用線性插值來構建從預設取樣點的路徑。然而，可以配置插值選項。

為了獲得更平滑的飛行路徑，我們可以改變這樣的插值選項：

// Smooth path interpolation
drone.position.setInterpolationOptions({
    interpolationDegree : 3,
    interpolationAlgorithm : Cesium.HermitePolynomialApproximation
});

image
Cesium中文網交流QQ群：807482793

Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/

相關推薦

Cesium入門9 - Loading and Styling Entities - 載入和樣式化實體

Cesium入門9 - Loading and Styling Entities - 載入和樣式化實體 Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/ 現在我們已經為我們的應用程式設定了Viewer配置、imagery

一段程式碼看懂Java類的載入和初始化

先貼程式碼 class Base { int a = numa(); private static int c = numc(); static int b = numb(); static { System.out.println("Base:static code b

Deep Learning 學習隨記（七）Convolution and Pooling --卷積和池化

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

java載入和初始化。

1.首先要明白初始化是發生在載入之後。載入即載入編譯後的java檔案。（.class） 2.其次要知道只有你初次使用某個類的程式碼才會去載入這個載入檔案，使用包括new一個這個類的物件或者呼叫這個類的靜態資源（靜態程式碼塊，靜態方法等）。 3.java的構造器其實也是一種static方法，儘

SpringMVC原始碼--DispatcherServlet的載入和初始化

    之前的文章介紹了Spring的初始化過程，Spring Web應用初始化依賴於Web容器的初始化，這在之前已經提到過了。那麼初始化完成後，SpringMVC又是怎樣發揮作用的呢？首先呢，Web容器初始化完成後會繼續讀取web.xml裡的節點，我們知道Dispatche

OPTEE學習筆記 - 驅動的載入和初始化（CA和TA通訊）

驅動的載入和初始化可以參考https://blog.csdn.net/shuaifengyun/article/details/72934531。已經做出較為詳細的說明，這裡對於其中一些更細節的內容做出一些記錄，僅供學習參考。 文中提到了optee_probe是建立optee驅動的最後一步，其中

Objc類的載入和初始化(+load和+initialize方法)

作為一個程式設計師，絕大多數時候你都不需要關心一個類是怎麼被載入進記憶體的。這裡面 runtime linker 在你的程式碼還沒跑起來之前就已經做了很多複雜的工作。 對於大多類來說，知道這一點就已經相當足夠了。但是，有一些類可能需要做一些特殊的準備工作。比如初始化一個全域性的表，從 UserDefau

類的載入和初始化順序

類載入以及初始化的順序是： ->類的靜態成員初始化分配記憶體（有父類的先父類，然後自己） ->然後main方法執行 ->類初始化{類非靜態成員的初始化，然後執行構造器（有父類的先給父

java類載入和例項化：靜態程式碼塊、初始化程式碼塊、構造方法的執行順序

java中第一次例項化一個物件時，靜態程式碼塊、初始化塊、屬性的初始化、構造方法，再加上如果父類也有這些東西，天，到底執行順序是什麼？ 來一段程式碼試一試就知道了： public class LoadingTest { public static void main(

Java類的載入機制（類載入和初始化順序）

Java類載入機制中最重要的就是程式初始化過程，其中包含了靜態資源，非靜態資源，父類子類，構造方法之間的執行順序。這

Loj 6285. 數列分塊入門 9

return 次數 push print min 實現 離散化 vector 每一個 鏈接： https://loj.ac/problem/6285 思路： 離散化處理下就好了，具體解釋在代碼裏、 ps: 小新新別看了，你學不會的 實現代碼：

Egret製作Loading頁面及分步載入資源教程

我們都知道，當遊戲越做越大，資源越來越多的時候，載入資源會造成大量時間的浪費。為避免載入資源時遊戲黑屏，導致玩家誤認為遊戲非正常執行，Loading介面起到至關重要的作用。今天就為大家帶來用Egret製作Loading頁面及分步載入資源的教程。 本文涉及以下內容： · RES載入Loading介面所使用的

python入門9 條件語句

條件語句： 　　if 條件為真： 　　　　執行語句塊 （執行完結束不執行elif，else） 　　elif 條件為真： 　　　　執行語句塊 （執行完結束不執行else） 　　else： 　　　　執行語句塊   #coding:utf-8 #/usr/bin/pytho

菜鳥教程丨Egret製作Loading頁面及分步載入資源教程

我們都知道，當遊戲越做越大，資源越來越多的時候，載入資源會造成大量時間的浪費。為避免載入資源時遊戲黑屏，導致玩家誤認為遊戲非正常執行，Loading介面起到至關重要的作用。今天就為大家帶來用Egret製作Loading頁面及分步載入資源的教程。 本文涉及以下內容： RES載入Loadi

Cesium入門10 - 3D Tiles

Cesium入門10 - 3D Tiles Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/ 我們團隊有時把Cesium描述成一個真實世界資料的3D遊戲引擎。然而，使用真實世界的資料比使用典型的視訊遊戲資料資料要困難得多

Cesium入門8 - Configuring the Scene - 配置視窗

Cesium入門8 - Configuring the Scene - 配置視窗 Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/ 接下來將新增一些更多的正確的時間和空間設定到Viewer中。涉及到與viewer.sce

Cesium入門7 - Adding Terrain - 新增地形

Cesium入門7 - Adding Terrain - 新增地形 Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/ Cesium支援流式的、視覺化的全球高程投影地形地勢、水形資料，包括海洋、湖泊、河流、山峰、峽谷和其他

Cesium入門3 - Cesium目錄框架結構

Cesium入門3 - Cesium目錄框架結構 Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/ app目錄 下載官網上的檔案，我們能看到以下CesiumJS庫結構： Sour

Cesium入門2 - Cesium環境搭建及第一個示例程式

Cesium入門2 - Cesium環境搭建及第一個示例程式 Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/ 驗證瀏覽器 Cesium需要瀏覽器支援WebGL，可以通過CesiumJS官網

Cesium入門1 - Cesium介紹

Cesium入門1 - Cesium介紹 Cesium中文網：http://cesiumcn.org/ | 國內快速訪問：http://cesium.coinidea.com/ Cesium簡介 Cesium官網：https://cesiumjs.org 官網中標題