準(zhǔn)備開發(fā)

????進(jìn)行WebGIS應(yīng)用開發(fā)，一般均采用前端開發(fā)庫+GIS服務(wù)的模式，開發(fā)者須完成如下三個(gè)步驟：

????第一步：安裝配置開發(fā)環(huán)境，包括MapGIS開發(fā)環(huán)境（含開發(fā)授權(quán)）、集成開發(fā)環(huán)境；

????根據(jù)實(shí)際應(yīng)用需求，選擇.NET或九州系列MapGIS開發(fā)平臺(tái)產(chǎn)品安裝，通常包括MapGIS Desktop桌面工具、MapGIS IGServer等云GIS產(chǎn)品。

????例如選用.NET版本，常用環(huán)境如下：

• MapGIS開發(fā)包：MapGIS IGServer .NET x64 for Windows開發(fā)包

• MapGIS開發(fā)授權(quán)：云開發(fā)授權(quán)（基礎(chǔ)版/高級(jí)版）

• 集成開發(fā)環(huán)境：Visual Studio Code

????第二步：發(fā)布GIS服務(wù)資源，在MapGIS IGServer的服務(wù)管理器中發(fā)布所需的地圖服務(wù)，以及擴(kuò)展的功能服務(wù)等；

????基于MapGIS Server Manager發(fā)布地圖服務(wù)的具體操作，請(qǐng)查看MapGIS IGServer操作手冊(cè)（.NET版，九州版）

????在訪問MapGIS IGServer的服務(wù)時(shí)，需要先確定GIS服務(wù)器IP地址與服務(wù)端口號(hào)；在二次開發(fā)時(shí)，根據(jù)所使用的MapGIS IGServer平臺(tái)版本以及其服務(wù)管理器中IGServer配置情況（ip、port），對(duì)二次開發(fā)接口中涉及的地圖服務(wù)訪問的ip、port進(jìn)行相應(yīng)設(shè)置。

• .NET版：IGServer服務(wù)管理器訪問默認(rèn)地址（127.0.0.1:9999）、IGServer服務(wù)訪問默認(rèn)基地址（127.0.0.1:6163）

• 九州版：IGServer服務(wù)管理器訪問默認(rèn)地址（127.0.0.1:8089）、IGServer服務(wù)訪問默認(rèn)基地址（127.0.0.1:8089）

????第三步：獲取前端開發(fā)庫（MapGIS Client for JavaScript開發(fā)庫），通過文件拷貝或npm方式引用開發(fā)庫，進(jìn)行WebGIS二維或三維應(yīng)用開發(fā)。

• MapGIS官方下載地址：http://smaryun.com/dev/download_detail.html#/download828

• GitHub 托管地址：https://github.com/MapGIS/WebClient-JavaScript

• Gitee 托管地址：https://gitee.com/osmapgis/WebClient-JavaScript

引入開發(fā)庫

文件方式（離線）

????請(qǐng)下載MapGIS Client for JavaScript開發(fā)包，將開發(fā)庫目錄libs下的cdn文件夾與include-xx.js文件放在工程同一目錄下，然后在網(wǎng)頁中引入對(duì)應(yīng)的include-xx.js文件即可，可以將整個(gè)目錄[…\static\libs]拷貝到工程中

離線版本的核心原理就是根據(jù)include=""中的名字，在當(dāng)前cdn文件夾下尋找對(duì)應(yīng)的js的腳本并按照規(guī)定的順序引入到瀏覽器中
“include-*.js 通過include="xxx"的方式自動(dòng)尋找引入對(duì)應(yīng)的第三方腳本”

????新建一個(gè) HTML 文件，在 標(biāo)簽中引入 MapGIS Client for JavaScript（Cesium）的開發(fā)庫：

• Example:

  <script src="libs/include-cesium-local.js"></script>

npm 方式引用

????使用此方式前請(qǐng)先檢查電腦中是否已安裝應(yīng)用程序?Node.js，若未安裝，需要先安裝Node.js環(huán)境。

????由于本公司在開源的 cesium 地圖引擎上做了一定修改，所以在引入 cesium 地圖引擎時(shí)需要通過以下 npm 指令引入。

• Example:

  npm install @mapgis/cesium

????通過 npm 指令引入 MapGIS Client for JavaScript 開發(fā)包。

開始開發(fā)

????先根據(jù)“開發(fā)環(huán)境”要求安裝配置好MapGIS開發(fā)環(huán)境（含MapGIS云開發(fā)授權(quán)），然后獲取MapGIS Client for JavaScript（Cesium）SDK進(jìn)行二次開發(fā)。

????下面使用H5原生JS方式，演示如何在網(wǎng)頁中加載顯示一個(gè)M3D緩存模型數(shù)據(jù)（大雁塔）。

數(shù)據(jù)準(zhǔn)備

????本示例使用MapGIS官方云端（develop.smaryun.com）已經(jīng)發(fā)布的名稱為“DaYanTa”的M3D數(shù)據(jù)服務(wù)進(jìn)行演示。若您需要顯示自己的數(shù)據(jù)，需要在開發(fā)前進(jìn)行數(shù)據(jù)處理，如創(chuàng)建/附加地理數(shù)據(jù)庫、導(dǎo)入數(shù)據(jù)、生成M3D緩存數(shù)據(jù)等，最后通過MapGIS Server Manager配置GIS服務(wù)環(huán)境并發(fā)布三維地圖服務(wù)。

基于MapGIS Server Manager發(fā)布地圖服務(wù)的具體操作，請(qǐng)查看MapGIS IGServer操作手冊(cè)（.NET版，九州版）

開發(fā)入門：加載M3D模型數(shù)據(jù)

本示例使用的開發(fā)集成工具為 Visual Studio Code（簡稱VSCode），您可以根據(jù)開發(fā)習(xí)慣選擇適合自己的開發(fā)工具

Step 1. 新建Web網(wǎng)站

????在VSCode或本地磁盤中新建一個(gè)文件目錄作為Web網(wǎng)站目錄，名稱為SceneDisplay；

Step 2. 引入JavaScript開發(fā)庫（離線方式）

????在新建的Web網(wǎng)站（文件目錄）中，拷貝MapGIS Client for JavaScript開發(fā)庫到網(wǎng)站根目錄下，即將SDK包路徑MapGIS Client for JavaScript_V10.5.X.X\static\libs的libs拷貝到“SceneDisplay”目錄下。此libs包含了全部的開發(fā)庫（js與css文件），可選擇只拷貝cesium的庫。

Step 3. 加載顯示M3D模型

(1) 在上述新建的網(wǎng)站中，通過新建文件方式，創(chuàng)建一個(gè)名稱為“SceneM3DDisplay”的html網(wǎng)頁文件，可通過自定義模板快速創(chuàng)建網(wǎng)頁結(jié)構(gòu)內(nèi)容；

(2) 設(shè)置示例標(biāo)題，在該頁面引入for WebGL開發(fā)的必要腳本庫include-cesium-local.js，此腳本庫會(huì)動(dòng)態(tài)引入核心庫webclient-cesium-plugin.min.js等與相關(guān)第三方庫、樣式文件等

(3) 創(chuàng)建一個(gè)ID為“GlobeView”的div層，并設(shè)置其樣式，用來作為顯示矢量地圖文檔的地圖容器;

(4) 通過body的onload事件觸發(fā)調(diào)用M3D模型緩存數(shù)據(jù)顯示的腳本函數(shù)init()；

(5) 在該頁面中嵌入JavaScript代碼，實(shí)現(xiàn)加載M3D緩存模型的腳本函數(shù)init()，即初始化三維場(chǎng)景視圖Cesium.WebSceneControl類，然后構(gòu)造M3D模型層管理對(duì)象CesiumZondy.Layer.M3DLayer類對(duì)象，再通過此圖層對(duì)象的append()方法加載三維地圖文檔，并自動(dòng)跳轉(zhuǎn)到數(shù)據(jù)位置；

注意：通常情況下，功能實(shí)現(xiàn)的JavaScript代碼可以單獨(dú)放置到一個(gè)JS文件中，便于維護(hù)

• Example:

  ? ? //在JS腳本開發(fā)中使用嚴(yán)格模式，及時(shí)捕獲一些可能導(dǎo)致編程錯(cuò)誤的ECMAScript行為 ? ? ?'use strict'; ? ? ?//定義三維場(chǎng)景控件對(duì)象 ? ? ?var webGlobe; ? ? ?//定義M3D圖層對(duì)象 ? ? ?var obliqueLayerArr; ? ? ?//加載三維場(chǎng)景 ? ? ?function init() { ? ? ? ? ?//構(gòu)造三維視圖對(duì)象（視圖容器div的id，三維視圖設(shè)置參數(shù)） ? ? ? ? ?webGlobe = new Cesium.WebSceneControl('GlobeView', {}); ? ? ? ? ?//構(gòu)造M3D模型層管理對(duì)象（視圖） ? ? ? ? ?var m3dLayer = new CesiumZondy.Layer.M3DLayer({ ? ? ? ? ? ? ?viewer: webGlobe.viewer ? ? ? ? ?}); ? ? ? ? ?//加載M3D地圖文檔（服務(wù)地址，配置參數(shù)） ? ? ? ? ?obliqueLayerArr = m3dLayer.append( ? ? ? ? ? ? ?`http://develop.smaryun.com:6163/igs/rest/g3d/DaYanTa`, ? ? ? ? ? ? ?{ ? ? ? ? ? ? ? ? ?autoReset: true //允許自動(dòng)定位 ? ? ? ? ? ? ?} ? ? ? ? ?); ? ? ?}

????實(shí)現(xiàn)M3D模型緩存的加載顯示過程如下：

????（1）首先需要?jiǎng)?chuàng)建三維場(chǎng)景視圖對(duì)象。三維場(chǎng)景控件構(gòu)造函數(shù)如下：

????WebSceneControl(elementId, options)

????參數(shù)說明：

• elementId：（ string類型）可選項(xiàng)，三維視圖容器div的id。

• options：（Object類型）可選項(xiàng)，MapGIS三維場(chǎng)景初始化相關(guān)參數(shù)，以鍵值對(duì)的形式設(shè)置，主要參數(shù)如下：

????（2）然后構(gòu)造M3D模型層管理類CesiumZondy.Layer.M3DLayer對(duì)象，通過其append()方法加載顯示M3D模型緩存數(shù)據(jù)。

????append(url, options)

????參數(shù)說明：

• url：（string類型）必選項(xiàng)，M3D地圖文檔服務(wù)的地址。

• options：（object類型）可選項(xiàng)，附加的其他屬性，以鍵值對(duì)的形式設(shè)置，主要屬性參數(shù)如下：

相關(guān)接口的詳細(xì)說明請(qǐng)查看MapGIS 3DClient for WebGL、MapGIS擴(kuò)展cesium庫、原生cesium庫的API說明

Step 4. 運(yùn)行調(diào)試

????VSCode是一個(gè)非常流行的Web前端開發(fā)IDE，在編寫Web網(wǎng)站時(shí)一般需要發(fā)布后編譯運(yùn)行，也可安裝相關(guān)插件調(diào)試運(yùn)行。

????在此，可先將“SceneDisplay”站點(diǎn)發(fā)布，然后通過瀏覽器查看與調(diào)試。例如：在IIS中發(fā)布站點(diǎn)后，右鍵“瀏覽”選中的“SceneM3DDisplay.html”文件，即可在瀏覽器中查看，并進(jìn)行前端調(diào)試。

????需要調(diào)試時(shí)，可以利用瀏覽器的開發(fā)者工具進(jìn)行測(cè)試，例如IE、Firefox、Chrome等。打開瀏覽器的開發(fā)者工具，在代碼行前端設(shè)置斷點(diǎn)，然后在瀏覽器中重新運(yùn)行示例頁面，程序?qū)?huì)運(yùn)行進(jìn)入到代碼斷點(diǎn)處，方便查看相關(guān)信息。

服務(wù)發(fā)布

????開發(fā)前，基于應(yīng)用的具體需求，可根據(jù)開發(fā)中采用的出圖方式（地圖類型）組織制作二維地圖（矢量地圖文檔或瓦片地圖），或者三維地圖（三維地圖文檔，M3D緩存等）。通過GIS服務(wù)管理器（MapGIS Server Manager）頁面左側(cè)的“地圖與數(shù)據(jù)服務(wù)”頁面，可以發(fā)布和查看所發(fā)布的地圖服務(wù)，可以提供地圖數(shù)據(jù)的預(yù)覽，查看信息，狀態(tài)控制，刪除等操作。

二維地圖發(fā)布

????在此以發(fā)布地圖文檔（REST模式）為例，發(fā)布單個(gè)地圖文檔的配置操作如下：
在MapGIS Server Manager頁面左側(cè)導(dǎo)航欄中的“地圖與數(shù)據(jù)服務(wù)”中，單擊“發(fā)布服務(wù)”，在下拉菜單中選擇“文檔發(fā)布（包括WMS/WFS/WMTS）”選項(xiàng)。頁面跳轉(zhuǎn)至發(fā)布服務(wù)配置頁面。

????配置項(xiàng)參數(shù)說明：

1. 選取地圖文檔：點(diǎn)擊“地圖文檔路徑”后的“瀏覽”按鈕，在服務(wù)器磁盤中選擇發(fā)布的地圖文檔（.mapx），選取后自動(dòng)讀取該文檔的名稱。矢量地圖文檔分為如下兩種類型，即本地?cái)?shù)據(jù)源、遠(yuǎn)程數(shù)據(jù)源（也稱網(wǎng)絡(luò)數(shù)據(jù)源，即關(guān)系數(shù)據(jù)庫存儲(chǔ)地理數(shù)據(jù)的GDBServer）。

• 本地?cái)?shù)據(jù)源（HDF）：適用于地理數(shù)據(jù)庫文件，存在并且添加到MapGIS IGServer中，對(duì)應(yīng)的gdbServer名稱為“MapGISLocal”，gdb用戶名和密碼為空；

• 本地?cái)?shù)據(jù)源（HDB）【推薦使用】：適用于地理數(shù)據(jù)庫文件，存在并且添加到MapGIS IGServer中，對(duì)應(yīng)的gdbServer名稱為“MapGISLocalPlus”，gdb用戶名和密碼為空；

• 遠(yuǎn)程數(shù)據(jù)源：適用于地圖文檔所調(diào)用要素圖層數(shù)據(jù)，存在于非本地?cái)?shù)據(jù)庫中，如Oracle數(shù)據(jù)庫；

MapGIS IGServer(九州)支持本地?cái)?shù)據(jù)源HDB方式，不支持本地?cái)?shù)據(jù)源HDF方式。

1. 發(fā)布地圖文檔：在服務(wù)器磁盤中找到需要發(fā)布的mapx地圖文檔并添加之后，點(diǎn)擊“發(fā)布”按鈕，即可發(fā)布二維地圖文檔為MapGIS Rest地圖服務(wù)格式;

2. 獲取地圖服務(wù)的基地址與相關(guān)信息，用于Web應(yīng)用開發(fā)。

三維地圖發(fā)布（M3D緩存）

????在此以MapGIS Desktop自帶的三維模型數(shù)據(jù)（景觀_建筑模型）為例，說明配置三維模型地圖文檔操作步驟。

生成M3D緩存

1. 打開MapGIS Desktop，新建一個(gè)空?qǐng)鼍埃?/p>

1. 在新場(chǎng)景中添加示例數(shù)據(jù)庫（Sample）中的景觀_建筑模型，即鼠標(biāo)右擊【新場(chǎng)景1】，通過【添加圖層】->【添加模型層】進(jìn)行操作；

3.將已添加的模型數(shù)據(jù)生成M3D緩存；

• (1) 右擊【景觀_建筑模型】，選擇【屬性】，在屬性頁面設(shè)置渲染方式為分塊渲染，然后點(diǎn)擊【應(yīng)用】，關(guān)閉屬性頁面；

• (2) 在新場(chǎng)景節(jié)點(diǎn)上，點(diǎn)擊【生成緩存】->【生成M3D緩存】；

• (3) 配置M3D緩存參數(shù)，可設(shè)置緩存存儲(chǔ)目錄、LOD級(jí)別等，詳細(xì)參數(shù)說明請(qǐng)查看，此處以默認(rèn)參數(shù)為例；

• (4) 設(shè)置相關(guān)參數(shù)后，先點(diǎn)擊【預(yù)計(jì)算】，然后再點(diǎn)擊【生成】，即開始生成M3D緩存，成功操作后將生成M3D緩存文件；

4.生成M3D緩存成功后，關(guān)閉【生成緩存】對(duì)話框，并移除場(chǎng)景中的景觀_建筑模型圖層(為提交三維場(chǎng)景渲染效率，移除場(chǎng)景中原模型圖層)；

5.將生成的M3D緩存添加到三維場(chǎng)景中：右擊【新場(chǎng)景1】，選擇【添加模型緩存圖層】，選擇生成的.mcj文件；

6.在場(chǎng)景中添加了M3D緩存后，將其保存為三維地圖文檔（.mapx）。

發(fā)布M3D地圖文檔

1. 登錄進(jìn)入MapGIS Server Manager管理界面，如MapGIS IGServer .NET的訪問地址為【http://localhost:9999/】，用戶名與密碼默認(rèn)為【admin/sa.mapgis】；

2.發(fā)布三維地圖文檔，選擇【地圖與數(shù)據(jù)服務(wù)】->【發(fā)布服務(wù)】->【三維服務(wù)發(fā)布】選擇保存的地圖文檔；

3.獲取發(fā)布之后的三維地圖訪問基地址，在應(yīng)用中需要用到。

第三方地圖

????第三方地圖，主要指的就是互聯(lián)網(wǎng)上涌現(xiàn)的大量地圖服務(wù)資源，提供免費(fèi)開放的基礎(chǔ)地圖服務(wù)，一般均為瓦片地圖形式，常在應(yīng)用中作為底圖直接調(diào)用。網(wǎng)絡(luò)上主流的公共地圖服務(wù)包括百度地圖、高德地圖、天地圖、OpenWeather地圖等。這些免費(fèi)的在線地圖服務(wù)資源，吸引了眾多用戶，不僅方便了廣大開發(fā)者使用在線地圖開發(fā)豐富的地圖應(yīng)用，擴(kuò)寬互聯(lián)網(wǎng)地圖應(yīng)用范圍，挖掘GIS的潛在價(jià)值；同時(shí)也讓更多人了解電子地圖、了解互聯(lián)網(wǎng)GIS，享受互聯(lián)網(wǎng)GIS帶來的便利和樂趣。

???? 支持第三方公共互聯(lián)網(wǎng)地圖，如百度地圖、天地圖、高德地圖、OpenWeather地圖等，通過CesiumZondy.Layer.ThirdPartyLayer類下的方法加載各類地圖。

地圖類型類名/方法名API說明天地圖appendTDTuMap() / appendTDTuMapByWMTS()天地圖，具體類型包括矢量、影像、地形，坐標(biāo)系為 EPSG:4326，即 WGS-84 經(jīng)緯度 ，訪問需要token百度地圖appendBaiduMap()百度地圖，類型包括矢量、影像高德地圖appendGaodeMap()高德地圖，Web 墨卡托坐標(biāo)系，EPSG:3857OpenWeather地圖appendOpenWeatherMap()OpenStreetMap地圖 ，天氣預(yù)報(bào)云圖服務(wù)

天地圖

???? 具體實(shí)現(xiàn)：創(chuàng)建第三方數(shù)據(jù)圖層類CesiumZondy.Layer.ThirdPartyLayer的對(duì)象，調(diào)用appendTDTuMap()方法，需配置 url 或 type（二選一設(shè)置即可）、token 參數(shù)，可實(shí)現(xiàn)矢量、影像、地形數(shù)據(jù)的加載。

（1） url 地址：可參考提供的 URL 示例

• 天地圖經(jīng)緯度數(shù)據(jù)：http://t0.tianditu.com/DataServer?T=vec_c&X={x}&Y={y}&L={l}

• 30 米全球地表覆蓋數(shù)據(jù)服務(wù)：http://glcdata.tianditu.com/DataServer?T=glc_c&X={x}&Y={y}&L={l}

（2） token：請(qǐng)前往天地圖官網(wǎng)申請(qǐng)自己的開發(fā) token，示例自帶 token 僅做功能演示；

（3） type 類型：可傳入’vec’、‘img’、'ter’等，分別代表矢量、影像、地形地圖，具體請(qǐng)查看天地圖官網(wǎng)。

• Example:

  //構(gòu)造第三方圖層對(duì)象var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ ?viewer: webGlobe.viewer,})//加載天地圖var tdtLayer = thirdPartyLayer.appendTDTuMap({ ?//天地圖經(jīng)緯度數(shù)據(jù)url,注意url與ptype設(shè)置其中一個(gè)即可 ?//url: 'http://t0.tianditu.com/DataServer?T=vec_c&X={x}&Y={y}&L={l}', ?//開發(fā)token （請(qǐng)到天地圖官網(wǎng)申請(qǐng)自己的開發(fā)token，自帶token僅做功能驗(yàn)證隨時(shí)可能失效） ?token: '9c157e9585486c02edf817d2ecbc7752', ?//地圖類型，如'vec'矢量 'img'影像 'ter'地形 ?ptype: 'vec',})

• Example:

  //構(gòu)造第三方圖層對(duì)象var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ ?viewer: webGlobe.viewer,})//通過WMTS服務(wù)方式加載天地圖：如影像'img'、地形'ter'、 注記'cta'，具體請(qǐng)查看天地圖官網(wǎng):var tdtLayer = thirdPartyLayer.appendTDTuMapByWMTS({ ?ptype: 'img',})

百度地圖

????具體實(shí)現(xiàn)：創(chuàng)建第三方數(shù)據(jù)圖層類CesiumZondy.Layer.ThirdPartyLayer的對(duì)象，調(diào)用appendBaiduMap()方法，配置不同參數(shù)可加載不同類型地圖，包括：瓦片（ptype:‘tile’）、衛(wèi)星（ptype:‘sate’）和交通地圖（ptype:‘traffic’）。

• Example:

  //構(gòu)造第三方圖層對(duì)象var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ ?viewer: webGlobe.viewer,})//添加百度地圖var baiduLayer = thirdPartyLayer.appendBaiduMap({ ?//地圖類型：瓦片：'tile'、衛(wèi)星：'sate'、交通地圖：'traffic' ?ptype: 'tile',})

高德地圖

????具體實(shí)現(xiàn)：創(chuàng)建第三方數(shù)據(jù)圖層類CesiumZondy.Layer.ThirdPartyLayer的對(duì)象，調(diào)用appendGaodeMap()方法加載高德地圖，配置不同參數(shù)可加載不同類型地圖，如矢量：‘vec’、影像：‘img’、道路：‘road’。

• Example:

  //構(gòu)造第三方圖層對(duì)象var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ ?viewer: webGlobe.viewer,})//加載高德地圖var amapLayer = thirdPartyLayer.appendGaodeMap({ ?//地圖類型：矢量：'vec'、影像：'img'、道路：'road' ?ptype: 'vec',})

OpenWeather地圖

• Example:

  //構(gòu)造第三方圖層對(duì)象var thirdPartyLayer = new CesiumZondy.Layer.ThirdPartyLayer({ ?viewer: webGlobe.viewer,})//加載OpenWeather地圖var owLayer = thirdPartyLayer.appendOpenWeatherMap({ ?ptype: 'Label', ?appid: 'b1b15e88fa797225412429c150c122a1',})

M3D圖層

M3D是針對(duì)多端應(yīng)用的輕量級(jí)三維數(shù)據(jù)交換格式，對(duì)海量三維數(shù)據(jù)進(jìn)行網(wǎng)格劃分與分層組織，采用流式傳輸模式，實(shí)現(xiàn)多端一體的高效解析和渲染。具備高效網(wǎng)絡(luò)傳輸模式、多級(jí)LOD模型支持、WebGL無縫融合等優(yōu)點(diǎn)?？梢詫⒍鄻宇愋汀⒍喾N格式的三維數(shù)據(jù)通過M3D數(shù)據(jù)交換格式進(jìn)行高效解析并渲染，能夠支持的數(shù)據(jù)類型包括：精細(xì)模型（景觀模型、BIM模型）、實(shí)景三維（傾斜攝影、地質(zhì)體、管線）、點(diǎn)云（激光點(diǎn)云las等）、其他（柵格、地形、矢量、瓦片）等。

????在三維場(chǎng)景中支持加載M3D緩存數(shù)據(jù)，對(duì)接MapGIS IGServer發(fā)布的三維地圖服務(wù)，數(shù)據(jù)類型包括景觀模型、BIM模型、傾斜攝影、地質(zhì)體模型等。

????數(shù)據(jù)準(zhǔn)備：針對(duì)M3D緩存數(shù)據(jù)的加載，需要進(jìn)行數(shù)據(jù)的處理與發(fā)布，即先通過MapGIS Desktop桌面工具將三維模型數(shù)據(jù)生成M3D緩存，并組織為地圖文檔；再在MapGIS Server Manager服務(wù)管理器中根據(jù)地圖文檔發(fā)布為三維地圖服務(wù)。

????具體實(shí)現(xiàn)：構(gòu)造CesiumZondy.Layer.M3DLayerM3D圖層管理對(duì)象，調(diào)用append()方法，傳入M3D緩存三維地圖服務(wù)的URL地址即可加載瀏覽數(shù)據(jù)，同時(shí)可傳入相關(guān)配置參數(shù)。

????以加載M3D的景觀模型為例：

• Example:

  //構(gòu)造M3D模型層管理對(duì)象（視圖）var m3dLayer = new CesiumZondy.Layer.M3DLayer({ ? viewer: webGlobe.viewer});//加載M3D地圖文檔（服務(wù)地址，配置參數(shù)）var landscapeLayer = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/ZondyModels', { ? //是否自動(dòng)定位到數(shù)據(jù)位置 ? autoReset: false, ? //模型細(xì)節(jié)顯示控制參數(shù)：較大值可提高渲染性能，較低值可提高視覺質(zhì)量 ? maximumScreenSpaceError: 8});

地圖服務(wù)

????全面支持MapGIS地圖服務(wù)數(shù)據(jù)加載，包括基于二維矢量數(shù)據(jù)、瓦片數(shù)據(jù)發(fā)布的二維矢量與瓦片服務(wù)；柵格影像、DEM地形數(shù)據(jù)、傾斜攝影等三維模型數(shù)據(jù)發(fā)布的三維地圖服務(wù)。

矢量服務(wù)（二維地圖文檔）

????具體實(shí)現(xiàn)：首先構(gòu)造CesiumZondy.Layer.TilesLayer瓦片圖層管理對(duì)象，然后調(diào)用append2DDocTile()方法，傳入地圖服務(wù)的 URL 地址及相關(guān)參數(shù)，即可加載 IGServer 二維地圖文檔數(shù)據(jù)。

• Example:

  //構(gòu)造瓦片圖層管理對(duì)象（視圖）var layer = new CesiumZondy.Layer.TilesLayer({ ?viewer: webGlobe.viewer,})//添加MapGIS IGServer發(fā)布的二維地圖文檔服務(wù)vecDoc = layer.append2DDocTile('http://develop.smaryun.com:6163/igs/rest/mrms/docs/北京市', {})

瓦片服務(wù)

????具體實(shí)現(xiàn)：首先構(gòu)造CesiumZondy.Layer.TilesLayer瓦片圖層管理對(duì)象，然后構(gòu)造圖層加載的參數(shù)，如范圍、瓦片初始級(jí)行列數(shù)、最大顯示級(jí)別等信息，可用來指定瓦片顯示的范圍、最大級(jí)別等；然后調(diào)用appendMapGISTile()方法傳入二維瓦片服務(wù)地址及參數(shù)，即可加載瀏覽數(shù)據(jù)。

• Example:

  //構(gòu)造瓦片圖層管理對(duì)象（視圖）var tilelayer = new CesiumZondy.Layer.TilesLayer({ ?viewer: webGlobe.viewer,})//參數(shù)var options = { ?tileRang: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90), ?//瓦片初始級(jí)的列數(shù) 默認(rèn)為2 ?colNum: 2, ?//瓦片初始級(jí)的行數(shù) 默認(rèn)為1 ?rowNum: 1, ?//瓦片最大顯示級(jí)數(shù) 默認(rèn)為19 ?maxLevel: 19, ?//如瓦片裁的不是256,則需設(shè)置下面兩個(gè)參數(shù) ?//瓦片寬度 ?tileWidth: 256, ?//瓦片高度 ?tileHeight: 256,}//添加MapGIS IGServer發(fā)布的二維瓦片服務(wù)var layer = tilelayer.appendMapGISTile('http://develop.smaryun.com:6163/igs/rest/mrms/tile/北京市', options)

地形服務(wù)

????具體實(shí)現(xiàn)：構(gòu)造CesiumZondy.Layer.TerrainLayer地形圖層管理對(duì)象，調(diào)用append()方法，傳入三維地圖服務(wù)的 URL 地址即可加載瀏覽數(shù)據(jù)，可傳入相關(guān)配置參數(shù)。

• Example:

  //構(gòu)造地形層管理對(duì)象（視圖）var layer = new CesiumZondy.Layer.TerrainLayer({ ?viewer: webGlobe.viewer,})//加載三維地圖文檔（服務(wù)地址，配置參數(shù)）var terrainlayer = layer.append('http://develop.smaryun.com:6163/igs/rest/g3d/terrain', {})

OGC服務(wù)

???? OGC（OpenGIS Consortium OpenGIS協(xié)會(huì)）是一個(gè)公益的行業(yè)協(xié)會(huì)，成立于1994年，致力于促進(jìn)采用新的技術(shù)和商業(yè)方式來提高地理信息處理的互操作性(Interoperability)。OGC為實(shí)現(xiàn)地理信息共享與互操作，定義了一系列Web地理信息服務(wù)的抽象接口與實(shí)現(xiàn)規(guī)范，包括WMS、WFS、WMTS、WCS等.

服務(wù)類型類名/方法名API說明WMSCesiumZondy.Layer.OGCLayer/ appendWMSTile()加載WMS服務(wù)地圖，WMS的GetMap接口返回指定范圍內(nèi)的地圖圖片WMTSCesiumZondy.Layer.OGCLayer/ appendWMTSTile()加載WMTS服務(wù)地圖，WMTS的GetTile接口返回的就是單張瓦片

???? MapGIS IGServer全面支持OGC服務(wù)的發(fā)布與應(yīng)用，包括WMS、WFS、WMTS、WCS等服務(wù)。其中，常用的WMS、WFS、WMTS中對(duì)應(yīng)的MapGIS格式的數(shù)據(jù)類型為：

• WMS：MapIGS格式的地圖文檔、矢量圖層；

• WFS：MapIGS格式的地圖文檔、矢量圖層；

• WMTS：MapIGS格式的瓦片圖層、實(shí)時(shí)瓦片圖層、分布式瓦片圖層。

要在客戶端調(diào)用OGC服務(wù)，需要先在IGServer服務(wù)管理器中發(fā)布OGC服務(wù)，具體操作請(qǐng)查看MapGIS IGServer操作手冊(cè)（.NET版，九州版）

WMS

????Web Map Service（網(wǎng)絡(luò)地圖服務(wù)），簡稱 WMS，由開放地理信息聯(lián)盟（Open GeoSpatial Consortium，OGC）制定。該規(guī)范定義了 Web 客戶端從網(wǎng)絡(luò)地圖服務(wù)器獲取地圖的接口標(biāo)準(zhǔn)。一個(gè) WMS 可以動(dòng)態(tài)地生成具有地理參考數(shù)據(jù)的地圖，這些地圖通常用 GIF、JPEG 或 PNG 等圖像格式，或者 SVG、KML、VML 和 WebCGM 等矢量圖形格式來表現(xiàn)。使用者通過指定的參數(shù)獲取相應(yīng)的地圖圖片。

????數(shù)據(jù)準(zhǔn)備：可在 MapGIS IGServer 中發(fā)布 WMS 地圖服務(wù)獲取數(shù)據(jù)地址，也可通過其他方式發(fā)布服務(wù)或者獲取地址，只要是基于 OGC 標(biāo)準(zhǔn)的 WMS 地圖服務(wù)都能支持。

????具體實(shí)現(xiàn)：構(gòu)造CesiumZondy.Layer.OGCLayerM3D 圖層管理對(duì)象，調(diào)用appendWMSTile()方法，并配置服務(wù)地址、圖層名稱、附加信息，即可實(shí)現(xiàn) WMS 地圖服務(wù)數(shù)據(jù)的加載，在此傳入的是 IGServer 中發(fā)布的 WMS 地圖服務(wù)地址，可做參考。

• Example:

  //構(gòu)造OGC圖層管理對(duì)象（視圖）var ogcLayer = new CesiumZondy.Layer.OGCLayer({ ?viewer: webGlobe.viewer,})//添加WMS服務(wù)地圖var wmsLayer = ogcLayer.appendWMSTile( ?//地圖服務(wù)URL地址 ?'http://develop.smaryun.com:6163/igs/rest/ogc/doc/北京市/WMSServer', ?//圖層名 ?'北京市,綠地_1,水域_3,大學(xué),學(xué)校,動(dòng)物園', ?//附加屬性 ?{})

WMTS

????Web Map Tile Service（網(wǎng)絡(luò)地圖瓦片服務(wù)），簡稱 WMTS，由開放地理信息聯(lián)盟（Open GeoSpatial Consortium，OGC）制定，是和 WMS 并列的重要 OGC 規(guī)范之一。WMTS 不同于 WMS,它最重要的特征是采用緩存技術(shù)能夠緩解 WebGIS 服務(wù)器端數(shù)據(jù)處理的壓力，提高交互響應(yīng)速度，大幅改善在線地圖應(yīng)用客戶端的用戶體驗(yàn)。WMTS 是 OGC 主推的緩存技術(shù)規(guī)范，是目前各種緩存技術(shù)相互兼容的一種方法。

????數(shù)據(jù)準(zhǔn)備：可在 MapGIS IGServer 中發(fā)布 WMTS 地圖服務(wù)獲取數(shù)據(jù)地址，也可通過其他方式發(fā)布服務(wù)或者獲取地址，只要是基于 OGC 標(biāo)準(zhǔn)的 WMTS 地圖服務(wù)都能支持。

????具體實(shí)現(xiàn)：調(diào)用CesiumZondy.Layer.OGCLayer的appendWMTSTile()方法，并配置服務(wù)地址、圖層名稱、最大級(jí)數(shù)等信息，即可實(shí)現(xiàn) WMTS 地圖服務(wù)數(shù)據(jù)的加載，在此傳入的是 IGServer 中發(fā)布的 WMTS 地圖服務(wù)地址，可做參考。

• Example:

  //構(gòu)造OGC圖層管理對(duì)象（視圖）var ogcLayer = new CesiumZondy.Layer.OGCLayer({ ?viewer: webGlobe.viewer,})//添加WMTS地圖服務(wù)var wmtsLayer = ogcLayer.appendWMTSTile( ?//瓦片服務(wù)地址 ?'http://develop.smaryun.com:6163/igs/rest/ogc/WMTSServer', ?//圖層名稱 ?'beijing', ?'EPSG:4326_北京市_028mm_GB', ?//最大級(jí)數(shù) ?17, ?null, ?'default', ?0)

通用數(shù)據(jù)

????基于原生Cesium，支持加載各類通用格式數(shù)據(jù)，如3DTiles、 GLTF、CZML、GeoJSON、KML、KMZ數(shù)據(jù)，以及各種圖片數(shù)據(jù)等。

類名/方法名API說明CesiumZondy.Manager.CommonDataManager / append3DTile()3DTiles數(shù)據(jù)CesiumZondy.Manager.CommonDataManager / appendModel()GLTF數(shù)據(jù)CesiumZondy.Manager.CommonDataManager / appendCZML()CZML數(shù)據(jù)CesiumZondy.Manager.CommonDataManager / appendGeoJson()GeoJSON數(shù)據(jù)CesiumZondy.Manager.CommonDataManager / appendKml()KML、KMZ數(shù)據(jù)CesiumZondy.Manager.CommonDataManager / appendImageByUrl()圖片數(shù)據(jù)

3DTiles 數(shù)據(jù)

什么是3DTiles？

????3DTiles 是用于流式傳輸大規(guī)模異構(gòu) 3D 地理空間數(shù)據(jù)集的開放規(guī)范。為了擴(kuò)展 Cesium 的地形和圖像流，3DTiles 將用于流式傳輸 3D 內(nèi)容，包括建筑物，樹木，點(diǎn)云和矢量數(shù)據(jù)。關(guān)于 3DTiles 可自行了解其更多內(nèi)容。

????具體實(shí)現(xiàn)：針對(duì)3DTiles數(shù)據(jù)支持本地?cái)?shù)據(jù)和網(wǎng)絡(luò)數(shù)據(jù)加載，關(guān)鍵接口為CesiumZondy.Manager.CommonDataManager類提供的append3DTile()方法與remove3DTile()方法，實(shí)現(xiàn) 3D Tiles 數(shù)據(jù)的加載與移除功能。加載數(shù)據(jù)須設(shè)置 3DTiles 數(shù)據(jù)的 URL 參數(shù)，通過加載成功回調(diào)函數(shù)定位跳轉(zhuǎn)到所加載的 3DTiles 數(shù)據(jù)范圍。

• Example:

  //構(gòu)造通用數(shù)據(jù)管理對(duì)象var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ ?viewer: webGlobe.viewer});//加載3DTile數(shù)據(jù)var tiles = commonDataManager.append3DTile( ?//3DTile數(shù)據(jù)路徑，支持本地與網(wǎng)絡(luò)數(shù)據(jù) ? ? ?'./static/data/3DTile/BatchedTilesets/tileset.json', ?//成功回調(diào)函數(shù) ?load);function load(layer) { ?//加載成功后定位跳轉(zhuǎn) ?webGlobe.viewer.flyTo(layer); ?console.log("這是一個(gè)加載成功回調(diào)");}//通過remove3DTile方法移除//commonDataManager.remove3DTile(tiles);

GLTF 數(shù)據(jù)

什么是 GLTF？

????GLTF（GL Transmission Format），即圖形語言交換格式，是一種三維數(shù)據(jù)的格式標(biāo)準(zhǔn)，由 Khronos Group 推出。由于三維數(shù)據(jù)格式眾多，所以其致力于成為像音頻界的 MP3、圖像界的 JPEG 那樣的 3D 領(lǐng)域通用的數(shù)據(jù)格式。目前多款三維軟件支持了 GLTF 格式數(shù)據(jù)的讀寫，如 Maya、3dmax、unity 等等。采用 GLTF 可避免不同軟件中數(shù)據(jù)轉(zhuǎn)換操作造成的各方面問題。
GLTF 官方介紹

????具體實(shí)現(xiàn)：關(guān)鍵接口為CesiumZondy.Manager.CommonDataManager類提供的appendModel()方法，設(shè)置模型 id、模型文件 URL 路徑、模型所在經(jīng)緯度、高度、縮放比參數(shù)信息，即可實(shí)現(xiàn) GLTF 模型的加載。如果模型自帶動(dòng)畫，需要設(shè)置webGlobe.viewer.clock.shouldAnimate參數(shù)為 true 來開啟動(dòng)畫。

• Example:

  //構(gòu)造通用數(shù)據(jù)管理對(duì)象var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ ?viewer: webGlobe.viewer,})//開啟動(dòng)畫：如果模型自帶動(dòng)畫，需開啟此參數(shù)webGlobe.viewer.clock.shouldAnimate = true//添加模型（gltf文件）var model = commonDataManager.appendModel( ?//模型id ?'model', ?//模型文件URL路徑 ?'./static/data/model/WuRenJi/WuRenJi.gltf', ?//模型經(jīng)度、緯度、高度 ?114.3938, ?30.5045, ?200, ?//縮放比 ?200)

  ????批量加載 GLTF 模型：支持在三維場(chǎng)景中批量添加多個(gè) GLTF 模型數(shù)據(jù)。常用于需要一次性添加多個(gè)模型的應(yīng)用場(chǎng)景，多個(gè)模型可為相同數(shù)據(jù)，也可以是不同數(shù)據(jù)，參數(shù)單獨(dú)設(shè)置，簡化代碼操作步驟。

• Example:

//多個(gè)模型var models = [ ?{ ? ?id: 'document', ? ?name: 'Models', ? ?version: '1.0', ?}, ?{ ? ?//模型的ID ? ?id: 'aerogenerator1', ? ?//模型的名字 ? ?name: '風(fēng)機(jī)1', ? ?//模型要添加的坐標(biāo)位置 ? ?position: { ? ? ?cartographicDegrees: [118.0385, 42.6374, -5], ? ?}, ? ?//模型文件參數(shù) ? ?model: { ? ? ?//模型文件的路徑 ? ? ?gltf: './static/data/model/donghua.gltf', ? ? ?//模型的比例 ? ? ?scale: 50, ? ? ?//模型最小顯示的像素 ? ? ?minimumPixelSize: 16, ? ?}, ? ?//描述 ? ?description: '這是1號(hào)風(fēng)機(jī)', ?}, ?{ ? ?//模型的ID ? ?id: 'aerogenerator2', ? ?//模型的名字 ? ?name: '風(fēng)機(jī)2', ? ?//模型要添加的坐標(biāo)位置 ? ?position: { ? ? ?cartographicDegrees: [118.0356, 42.6354, -5], ? ?}, ? ?//模型文件參數(shù) ? ?model: { ? ? ?//模型文件的路徑 ? ? ?gltf: './static/data/model/donghua.gltf', ? ? ?//模型的比例 ? ? ?scale: 50, ? ? ?//模型最小顯示的像素 ? ? ?minimumPixelSize: 16, ? ?}, ? ?//描述 ? ?description: '這是2號(hào)風(fēng)機(jī)', ?},]//開啟動(dòng)畫：如果模型自帶動(dòng)畫，需開啟此參數(shù)webGlobe.viewer.clock.shouldAnimate = true//構(gòu)造通用數(shù)據(jù)管理對(duì)象var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ ?viewer: webGlobe.viewer,})//添加多個(gè)模型modelSource = commonDataManager.appendModels(models)

• Example:

  //跳轉(zhuǎn)到模型處webGlobe.viewer.zoomTo(modelSource)

CZML 數(shù)據(jù)

什么是 CZML？

????CZML，是一種用來描述動(dòng)態(tài)場(chǎng)景的 JSON 架構(gòu)的地理數(shù)據(jù)可視化語言，可以用來描述點(diǎn)、線、布告板、模型以及其他的圖元，不僅提供了豐富的圖形及其外觀選擇，還專注于表現(xiàn)動(dòng)態(tài)地理數(shù)據(jù)的變化特征，主要用于 Cesium 在瀏覽器中的展示。
CZML 介紹參考

????具體實(shí)現(xiàn)：關(guān)鍵接口為CesiumZondy.Manager.CommonDataManager類提供的appendCZML()方法，傳入 CZML 文件的地址即可實(shí)現(xiàn) CZML 數(shù)據(jù)的加載，并可添加回調(diào)函數(shù)根據(jù) CZML 文件中某一模型 ID 判斷是否添加成功；對(duì)應(yīng)可通過removeDataSource()方法移除。

• Example:

  //構(gòu)造通用數(shù)據(jù)管理對(duì)象var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ ?viewer: webGlobe.viewer,})//添加CZML數(shù)據(jù)var datasource = commonDataManager.appendCZML( ?//CZML文件地址 ?'./static/data/czml/fengji.czml', ?//成功回調(diào) ?function(entities) { ? ?//判斷是否添加成功 ? ?var enti = entities.getById('aerogenerator10') ? ?if (enti == undefined) { ? ? ?alert('失敗') ? ?} ?})

GeoJSON 數(shù)據(jù)

什么是 GeoJSON？

????GeoJSON，是一種對(duì)各種地理數(shù)據(jù)結(jié)構(gòu)進(jìn)行編碼的格式，基于 Javascript 對(duì)象表示法的地理空間信息數(shù)據(jù)交換格式。通過鍵值對(duì)的方式表達(dá)幾何、特征或者特征集合，能夠支持點(diǎn)、線、面、多點(diǎn)、多線、多面和幾何集合的數(shù)據(jù)類型。
GeoJSON 官方介紹

????具體實(shí)現(xiàn)：關(guān)鍵接口為CesiumZondy.Manager.CommonDataManager類提供的appendGeoJson()方法，傳入 GeoJSON 文件地址，實(shí)現(xiàn) GeoJSON 數(shù)據(jù)的加載；對(duì)應(yīng)可通過removeDataSource()方法移除。

????在此以本地文件為例：

• Example:

  //構(gòu)造通用數(shù)據(jù)管理對(duì)象var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ ?viewer: webGlobe.viewer,})//添加GeoJson數(shù)據(jù)（GeoJson文件地址）var datasource = commonDataManager.appendGeoJson('./static/data/geojson/wuhan_bounds.geojson')

KML 數(shù)據(jù)

什么是 KML？

????KML（Keyhole Markup Language，Keyhole 標(biāo)記語言）是由 Google 旗下的 Keyhole 公司開發(fā)和維護(hù)的一種基于 XML 的標(biāo)記語言，可用于描述和保存地理空間信息（如點(diǎn)、線、面、圖像、模型等），適合網(wǎng)絡(luò)環(huán)境下的地理信息協(xié)作與共享。KML 在 2008 年 4 月被 OGC（開放地理信息系統(tǒng)協(xié)會(huì)）宣布成為開放地理信息編碼標(biāo)準(zhǔn)。KML 是純粹的 xml 文本格式，兩者之間最大的區(qū)別就在于 KML 描述的是地理信息數(shù)據(jù)。
KML 百科介紹

????具體實(shí)現(xiàn)：關(guān)鍵接口為CesiumZondy.Manager.CommonDataManager類提供的appendKml()方法，傳入 KML 文件地址，實(shí)現(xiàn) KML 數(shù)據(jù)的加載；對(duì)應(yīng)可通過removeDataSource()方法移除。

????在此以本地文件為例：

• Example:

  //構(gòu)造通用數(shù)據(jù)管理對(duì)象var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ ?viewer: webGlobe.viewer,})//添加KML數(shù)據(jù)datasource = commonDataManager.appendKml('./static/data/kml/bikeRide_wuhan.kml')

KMZ 數(shù)據(jù)

什么是 KMZ？

????KMZ 文件是經(jīng)過壓縮的 KML 文件，將其解壓后即可獲得最原始的 KML 文件。與 KML 不同的是，由于 KMZ 是壓縮包文件，所以其中不僅可以包括 KML 文本文件，還可以包括其他類型的文件，如圖片等，所以 KMZ 能夠表達(dá)的信息可以更加豐富多樣。

????具體實(shí)現(xiàn)：實(shí)現(xiàn) KMZ 數(shù)據(jù)的加載與 KML 數(shù)據(jù)的方法一樣，都采用CesiumZondy.Manager.CommonDataManager類提供的appendKml()方法；對(duì)應(yīng)可通過removeDataSource()方法移除。

????在此以本地文件為例：

• Example:

  //構(gòu)造通用數(shù)據(jù)管理對(duì)象var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ ?viewer: webGlobe.viewer,})//添加KMZ數(shù)據(jù)var datasource = commonDataManager.appendKml('./static/data/kmz/sample.kmz')

圖片數(shù)據(jù)

????可在三維場(chǎng)景中疊加顯示圖片文件數(shù)據(jù)，支持本地?cái)?shù)據(jù)和網(wǎng)絡(luò)數(shù)據(jù)加載。

????具體實(shí)現(xiàn)：關(guān)鍵接口為CesiumZondy.Manager.CommonDataManager類提供的appendImageByUrl()方法與removeImage()方法，實(shí)現(xiàn)圖片疊加顯示與移除功能。調(diào)用appendImageByUrl()方法時(shí)，需要傳入圖片的地址（可為本地圖片地址，也可以為網(wǎng)絡(luò)圖片的 URL），以及圖片顯示的坐標(biāo)范圍。

????本地圖片：

• Example:

  //構(gòu)造通用數(shù)據(jù)管理對(duì)象var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ ?viewer: webGlobe.viewer,})//添加圖片var image = commonDataManager.appendImageByUrl( ?//本地圖片地址 ?'./static/data/picture/world.jpg', ?//圖片顯示范圍（西經(jīng)、南緯、東經(jīng)、北緯） ?-180.0, ?-90, ?180.0, ?90)

????在線圖片：

• Example:

  //構(gòu)造通用數(shù)據(jù)管理對(duì)象var commonDataManager = new CesiumZondy.Manager.CommonDataManager({ ? ?viewer: webGlobe.viewer});//通過地址添加圖片，支持本地圖片和網(wǎng)絡(luò)圖片var imgObj = commonDataManager.appendImageByUrl( ? ?//圖片URL ? ?'http://5b0988e595225.cdn.sohucs.com/images/20180917/455c51316ec24a97958a254dc66c18f6.jpeg', ? ?//東經(jīng) ? ?114.3473, ? ?//北緯 ? ?30.5479, ? ?//西經(jīng) ? ?114.4637, ? ?//南緯 ? ?30.6120);//定位跳轉(zhuǎn)sceneManager.flyToComm(114.4, 30.55, 30000);//通過removeImage()刪除//commonDataManager.removeImage(imgObj,false);

場(chǎng)景操作

????基于原生Cesium，結(jié)合三維GIS應(yīng)用進(jìn)一步封裝，提供豐富的場(chǎng)景交互操作功能，其中常用功能為常用控件、場(chǎng)景模式設(shè)置、場(chǎng)景瀏覽基本操作、視點(diǎn)跳轉(zhuǎn)、坐標(biāo)轉(zhuǎn)換等功能。

常用控件

????常用的基礎(chǔ)控件，包括鼠標(biāo)位置、導(dǎo)航控件、比例尺、羅盤等。鼠標(biāo)位置控件顯示當(dāng)前鼠標(biāo)所在點(diǎn)的經(jīng)緯度，高程等位置信息；導(dǎo)航控件提供放大、縮小、復(fù)位基礎(chǔ)場(chǎng)景導(dǎo)航功能；羅盤控件則為方位指向，通常與導(dǎo)航控件結(jié)合使用。

????具體實(shí)現(xiàn)：先初始化 Cesium 三維球控件?Cesium.WebSceneControl()?，然后初始化視圖功能管理類?CesiumZondy.Manager.SceneManager()?，調(diào)用視圖功能管理類的?showPosition()?方法顯示位置信息；再初始化通用功能管理類CesiumZondy.Manager.CommonFuncManager()?，調(diào)用createNavigationTool()方法顯示常用導(dǎo)航控件。

• Example:

  <!--坐標(biāo)容器--><div id="coordinateDiv" class="coordinateClass"> ?<label id="coordinate_location"></label> ?<label id="coordinate_height"></label></div>//初始化視圖功能管理類var sceneManager = new CesiumZondy.Manager.SceneManager({ ?viewer: webGlobe.viewer});//顯示鼠標(biāo)位置控件sceneManager.showPosition('coordinateDiv');

• Example:

  //初始化通用功能管理類var commFun = new CesiumZondy.Manager.CommonFuncManager({ ?viewer: webGlobe.viewer});//顯示導(dǎo)航控件（羅盤、場(chǎng)景導(dǎo)航、比例尺）var navigation = commFun.createNavigationTool({ ?enableCompass: true, ?enableZoomControls: true, ?enableDistanceLegend: true, ?enableCompassOuterRing: true});

場(chǎng)景模式

????場(chǎng)景視圖模式提供三種模式：三維球面模式、三維平面模式、二維地圖模式，在實(shí)際應(yīng)用中可根據(jù)具體應(yīng)用場(chǎng)景設(shè)置。

????具體實(shí)現(xiàn)：初始化 Cesium 三維球控件?Cesium.WebSceneControl()?后初始化視圖功能管理類?CesiumZondy.Manager.SceneManager()?，調(diào)用視圖功能管理類的?changeSceneMode()?方法切換地圖顯示模式。另外，通過修改 Cesium 三維球控件?Cesium.WebSceneControl()?的視圖對(duì)象的 scene 參數(shù)來設(shè)置地下模式。

????常用場(chǎng)景模式

• Example:

  //初始化視圖功能管理類var sceneManager = new CesiumZondy.Manager.SceneManager({ ?viewer: webGlobe.viewer});let mode = document.getElementById("modeSelect").value;//根據(jù)選擇切換場(chǎng)景視圖模式if (mode == '3D') { ?//切換場(chǎng)景模式為三維球面 ?sceneManager.changeSceneMode('3D', 1);} else if (mode === '3DC') { ?//切換場(chǎng)景模式為三維平面 ?sceneManager.changeSceneMode('COLUMBUS_VIEW', 1);} else if (mode === '2D') { ?//切換場(chǎng)景模式為二維地圖 ?sceneManager.changeSceneMode('2D', 1);}

????地下場(chǎng)景模式

????地下模式一：開啟地下模式并關(guān)閉大氣層、設(shè)置球面透明度

• Example:

  //設(shè)置地下模式webGlobe.viewer.scene.globe.undergroundMode = true;//大氣顯示關(guān)閉webGlobe.viewer.scene.skyAtmosphere.show = false;//透明度設(shè)置webGlobe.viewer.scene.globe.transparent = 0.3;

????地下模式二：開啟地下模式、關(guān)閉大氣層與地面大氣效果、設(shè)置球面透明度、設(shè)置背景色

• Example:

  //設(shè)置地下模式webGlobe.viewer.scene.globe.undergroundMode = true;//大氣顯示關(guān)閉webGlobe.viewer.scene.skyAtmosphere.show = false;//地面大氣效果關(guān)閉webGlobe.viewer.scene.skyAtmosphere.showGroundAtmosphere = false;//透明度設(shè)置webGlobe.viewer.scene.enableTransparent = true;//透明度設(shè)置webGlobe.viewer.scene.globe.transparent = 1;//背景顏色設(shè)置webGlobe.viewer.scene.baseColor = new Cesium.Color(1, 1, 1, 0.0001);webGlobe.viewer.scene.globe.imageryLayers.get(0).alpha = 0;webGlobe.viewer.scene.globe.imageryLayers.get(1).alpha = 0;

場(chǎng)景操作

????場(chǎng)景的基本操作功能，包括場(chǎng)景視圖縮放、復(fù)位、三維球自轉(zhuǎn)、設(shè)置天空盒等。

????具體實(shí)現(xiàn)：先初始化 Cesium 三維球控件?Cesium.WebSceneControl()?, 然后初始化視圖功能管理類?CesiumZondy.Manager.SceneManager()?，調(diào)用視圖功能管理類的如下幾個(gè)方法分別實(shí)現(xiàn)對(duì)應(yīng)的場(chǎng)景操作功能。

類名/方法名API說明CesiumZondy.Manager.SceneManager / zoomIn()放大CesiumZondy.Manager.SceneManager / zoomOut()縮小CesiumZondy.Manager.SceneManager / goHome()復(fù)位CesiumZondy.Manager.SceneManager/ openRotation()開啟自轉(zhuǎn)CesiumZondy.Manager.SceneManager / closeRotation()關(guān)閉自轉(zhuǎn)CesiumZondy.Manager.SceneManager / changeSkyBox()修改天空盒

• Example:

  //初始化視圖功能管理類var sceneManager = new CesiumZondy.Manager.SceneManager({ ?viewer: webGlobe.viewer});

????zoomin():

• Example:

  sceneManager.zoomin();//放大

????zoomout():

• Example:

  sceneManager.zoomout();//縮小

????goHome():

• Example:

  sceneManager.goHome();//復(fù)位

????openRotation()與 closeRotation():

sceneManager.openRotation();//開啟自轉(zhuǎn)ceneManager.closeRotation();//關(guān)閉自轉(zhuǎn)

????changeSkyBox():

• Example:

  var skybox = new Cesium.SkyBox({ ?sources: { ? ? ?positiveX: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/front.jpg', ? ? ?negativeX: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/back.jpg', ? ? ?positiveY: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/left.jpg', ? ? ?negativeY: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/right.jpg', ? ? ?positiveZ: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/top.jpg', ? ? ?negativeZ: './static/libs/cdn/Cesium/Assets/Textures/SkyBox2/bottom.jpg' ? }});sceneManager.changeSkyBox(skybox);

視點(diǎn)跳轉(zhuǎn)

????場(chǎng)景視點(diǎn)跳轉(zhuǎn)功能，即根據(jù)坐標(biāo)點(diǎn)在三維球上進(jìn)行定位跳轉(zhuǎn)。此功能為場(chǎng)景視圖的基礎(chǔ)功能，應(yīng)用非常廣泛，可根據(jù)具體應(yīng)用場(chǎng)景需求調(diào)用合適的方法。

????具體實(shí)現(xiàn)：初始化 Cesium 三維球控件?Cesium.WebSceneControl()?, 初始化視圖功能管理類?CesiumZondy.Manager.SceneManager()?，調(diào)用視圖功能管理類的如下 4 個(gè)視點(diǎn)跳轉(zhuǎn)方法進(jìn)行視點(diǎn)跳轉(zhuǎn)。

類名/方法名API說明CesiumZondy.Manager.SceneManager / flyTo()視點(diǎn)跳轉(zhuǎn)簡單方法，根據(jù)經(jīng)緯度、視角高度、跳轉(zhuǎn)持續(xù)時(shí)間進(jìn)行視點(diǎn)跳轉(zhuǎn)CesiumZondy.Manager.SceneManager / flyToComm()視點(diǎn)跳轉(zhuǎn)通用方法，根據(jù)經(jīng)緯度、視角高度，以及原生的可擴(kuò)展參數(shù)進(jìn)行視點(diǎn)跳轉(zhuǎn)CesiumZondy.Manager.SceneManager / flyToEx()視點(diǎn)跳轉(zhuǎn)擴(kuò)展方法，根據(jù)經(jīng)緯度，以及可擴(kuò)展的參數(shù)（包括視角高度、持續(xù)時(shí)間、方位角、俯仰角、翻滾角）進(jìn)行視點(diǎn)跳轉(zhuǎn)CesiumZondy.Manager.SceneManager/ flyToFeatureById()根據(jù) ID 飛行到特定要素位置，即通過圖層的某個(gè)要素進(jìn)行定位跳轉(zhuǎn)

• Example:

  //初始化視圖功能管理類var sceneManager = new CesiumZondy.Manager.SceneManager({ ?viewer: webGlobe.viewer});

????flyTo()：

• Example:

  //跳轉(zhuǎn)視圖(北京)sceneManager.flyTo(116.44, 40, 300000, 2);

????flyToComm()：

• Example:

  //跳轉(zhuǎn)視圖（武漢）sceneManager.flyToComm(114.3, 30.6, 100000);

????flyToEx()：

• Example:

  //視點(diǎn)跳轉(zhuǎn)（中地科技園）sceneManager.flyToEx(114.40298522106733, 30.465568703723072, { ?height: 100.85856618500283, ?heading: -45.4940479913348135, ?pitch: -15, ?roll: 0});

????flyToFeatureById()：

• Example:

  //加載M3D地圖文檔（服務(wù)地址，配置參數(shù)）Layer2 = m3dLayer.append('http://develop.smaryun.com:6163/igs/rest/g3d/buildings1', { ?autoReset: false, ?//模型細(xì)節(jié)顯示控制參數(shù)：較大值可提高渲染性能，較低值可提高視覺質(zhì)量 ?maximumScreenSpaceError: 0});//視點(diǎn)跳轉(zhuǎn)-根據(jù) ID 飛行到特定要素位置（上海）sceneManager.flyToFeatureById(Layer2, 10 ,{height: 950,heading: 22,pitch: -20,roll: 0});

坐標(biāo)轉(zhuǎn)換

????根據(jù)鼠標(biāo)事件獲取的屏幕坐標(biāo)進(jìn)行坐標(biāo)轉(zhuǎn)換與相關(guān)計(jì)算的功能，包括常用的屏幕坐標(biāo)轉(zhuǎn)笛卡爾坐標(biāo)、屏幕坐標(biāo)轉(zhuǎn)經(jīng)緯度、根據(jù)經(jīng)緯度計(jì)算高度值。

????具體實(shí)現(xiàn)：先初始化 Cesium 三維球控件?Cesium.WebSceneControl()?, 然后初始化公共方法管理類?CesiumZondy.Manager.CommonFuncManager()?，分別調(diào)用如下對(duì)應(yīng)的方法實(shí)現(xiàn)屏幕坐標(biāo)轉(zhuǎn)換與相關(guān)計(jì)算功能。

• screenPositionToCartesian：屏幕坐標(biāo)轉(zhuǎn)為笛卡爾坐標(biāo)；

• screenPositionToCartographic：屏幕坐標(biāo)轉(zhuǎn)為經(jīng)緯度坐標(biāo)；

• getHeightFromDegrees：根據(jù)經(jīng)緯度計(jì)算高度值。

類名/方法名API說明CesiumZondy.Manager.CommonFuncManager / screenPositionToCartesian()屏幕坐標(biāo)轉(zhuǎn)為笛卡爾坐標(biāo)CesiumZondy.Manager.CommonFuncManager / screenPositionToCartographic()屏幕坐標(biāo)轉(zhuǎn)為經(jīng)緯度坐標(biāo)CesiumZondy.Manager.CommonFuncManager / getHeightFromDegrees()根據(jù)經(jīng)緯度計(jì)算高度值

• Example:

  //初始化公共方法管理類var commonFuncManager = new CesiumZondy.Manager.CommonFuncManager({ ?viewer: webGlobe.viewer});//初始化鼠標(biāo)事件管理類var mouseEventManager = new CesiumZondy.Manager.MouseEventManager({ ?viewer: webGlobe.viewer});

????screenPositionToCartesian()：

• Example:

  //添加鼠標(biāo)左鍵單擊事件獲取屏幕坐標(biāo)點(diǎn)mouseEventManager.registerMouseEvent("LEFT_CLICK", leftToCartesian);function leftToCartesian(movement) { ?//將鼠標(biāo)左鍵點(diǎn)擊的屏幕坐標(biāo)轉(zhuǎn)為笛卡爾坐標(biāo) ?var position = commonFuncManager.screenPositionToCartesian(movement.position);}

????screenPositionToCartographic()：

• Example:

  //添加鼠標(biāo)左鍵單擊事件獲取屏幕坐標(biāo)點(diǎn)mouseEventManager.registerMouseEvent("LEFT_CLICK", leftToCartographic);function leftToCartographic(movement) { //將鼠標(biāo)左鍵點(diǎn)擊的屏幕坐標(biāo)轉(zhuǎn)為經(jīng)緯度坐標(biāo) var result = commonFuncManager.screenPositionToCartographic(movement.position); let lng=Cesium.Math.toDegrees(result.longitude);//轉(zhuǎn)為經(jīng)度值 let lat=Cesium.Math.toDegrees(result.latitude);//轉(zhuǎn)為緯度值}

?????getHeightFromDegrees()：

• Example:

  //添加鼠標(biāo)左鍵單擊事件獲取屏幕坐標(biāo)點(diǎn)mouseEventManager.registerMouseEvent("LEFT_CLICK", leftToHeightFromDegrees);function leftToHeightFromDegrees(movement) { ?//屏幕坐標(biāo)轉(zhuǎn)笛卡爾坐標(biāo) ?var cartesian = webGlobe.viewer.getCartesian3Position(movement.position, cartesian); ?var cartographic = Cesium.Cartographic.fromCartesian(cartesian); ?var lng = Cesium.Math.toDegrees(cartographic.longitude); ?var lat = Cesium.Math.toDegrees(cartographic.latitude); ?//根據(jù)鼠標(biāo)左鍵單擊點(diǎn)經(jīng)緯度計(jì)算其高度值 ?var height = commonFuncManager.getHeightFromDegrees(lng, lat);}

場(chǎng)景出圖

????此功能用于將當(dāng)前場(chǎng)景輸出成圖片，可導(dǎo)出圖片文件或圖像對(duì)象。

????具體實(shí)現(xiàn)：先初始化 Cesium 三維球控件?Cesium.WebSceneControl()?加載數(shù)據(jù)；然后初始化常用功能管理類?CesiumZondy.Manager.CommonFuncManager()?，調(diào)用常用功能管理類的?outputImageFile()?方法或outputImageObj()方法進(jìn)行場(chǎng)景輸出圖片。

類名/方法名API說明CesiumZondy.Manager.SceneManager / outputImageFile()將屏幕截圖輸出為圖片文件CesiumZondy.Manager.SceneManager / outputImageObj()將屏幕截圖輸出為圖像對(duì)象，可保存為不同類型圖片，應(yīng)用場(chǎng)景比較豐富

????使用 outputImageFile()：

• Example:

  var commonFuncManager = new CesiumZondy.Manager.CommonFuncManager({ ?viewer: webGlobe.viewer});//當(dāng)前屏幕圖片輸出為一個(gè)圖片文件commonFuncManager.outputImageFile("圖片.png");

????使用 outputImageObj()：

• Example:

  var comm = new CesiumZondy.Manager.CommonFuncManager({ ? viewer: webGlobe.viewer});//當(dāng)前屏幕輸出為一個(gè)圖片對(duì)象var res = comm.outputImageObj();//下載打印此圖片對(duì)象為pngres.downloadPng("image.png");//可輸出如下其他格式，可結(jié)合其他應(yīng)用場(chǎng)景使用：//res.toImg();//res.toBase64();//res.downloadPng(name);//res.toCanvas();//res.toJpeg();//res.toPng();

outputImageObj()返回的是一個(gè)圖像對(duì)象，可直接輸出為圖片，也可以結(jié)合其他應(yīng)用場(chǎng)景使用，如將圖像輸出到 Canvas 顯示等。

繪制

????圖形繪制是Web端實(shí)現(xiàn)相關(guān)GIS功能的基礎(chǔ)，尤其是基本幾何圖形的交互繪制，查詢、編輯、分析等功能均涉及到客戶端的圖形繪制。一般通過繪制圖形來獲取地圖的空間范圍，為查詢等功能提供條件限制、或提供操作要素的空間屬性等。

????圖形繪制的基礎(chǔ)就是空間坐標(biāo)，任何圖形都由空間坐標(biāo)組成的。一般有兩種方式繪制圖形：一種是空間坐標(biāo)已知，通常根據(jù)已有的空間坐標(biāo)信息直接添加圖形，實(shí)現(xiàn)圖形的繪制功能；另一種則通過鼠標(biāo)交互獲取空間坐標(biāo)，這也是圖形繪制常用的方法，通常通過鼠標(biāo)在地圖上進(jìn)行交互式操作，以獲取所需的空間范圍信息，以此空間坐標(biāo)繪制圖形。第二種基于鼠標(biāo)交互式操作完成的圖形繪制，被稱為交互式圖形繪制。

繪制圖形

繪制點(diǎn)實(shí)體

????具體實(shí)現(xiàn)：首先構(gòu)造CesiumZondy.Manager.EntityController幾何繪制控制對(duì)象，然后調(diào)用appendPoint()方法，設(shè)置點(diǎn)實(shí)體所在經(jīng)緯度、高程，以及名稱、像素大小、顏色、邊線顏色、邊線寬度信息，即可添加繪制點(diǎn)實(shí)體。

• Example:

  //構(gòu)造幾何繪制控制對(duì)象var entityController = new CesiumZondy.Manager.EntityController({ ?viewer: webGlobe.viewer,})//添加點(diǎn)實(shí)體：經(jīng)度、緯度、高程、名稱、大?。ㄏ袼貑挝唬?、顏色、外邊線顏色、邊線寬度var point = entityController.appendPoint(114.30252625376454, 30.544631482624357, 20, '黃鶴樓', 12, new Cesium.Color(255 / 255, 255 / 255, 0 / 255, 1), new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1), 2)//方法二：添加點(diǎn)通用方法，對(duì)接Cesium原生，可設(shè)置更多屬性point4 = entityController.appendPointComm( ?//經(jīng)度、緯度、高程 ?114.28478689925817, ?30.555691346035022, ?0, ?//名稱、描述 ?'晴川閣', ?'晴川閣景點(diǎn)', ?//附加屬性：像素大小、顏色、外邊線顏色、邊線寬度 ?{ ? ?pixelSize: 12, ? ?color: new Cesium.Color(255 / 255, 255 / 255, 0 / 255, 1), ? ?outlineColor: new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1), ? ?outlineWidth: 2, ?})

繪制立體線/貼地形線

?

????具體實(shí)現(xiàn)：首先構(gòu)造CesiumZondy.Manager.EntityController幾何繪制控制對(duì)象，調(diào)用appendLine()方法，設(shè)置：線名稱、線坐標(biāo)點(diǎn)數(shù)組、線寬、線顏色、是否識(shí)別帶高度的坐標(biāo)（如果為 true 即代表立體線）、是否貼地形等信息，即可實(shí)現(xiàn)立體線實(shí)體的添加繪制。

• Example:

  //構(gòu)造幾何繪制控制對(duì)象var entityController = new CesiumZondy.Manager.EntityController({ ?viewer: webGlobe.viewer,})//點(diǎn)數(shù)組var pointArr = [114.3984603010489, 30.506836857208143, 90, 114.39820581466965, 30.50638419163618, 0, 114.39817448017338, 30.505889144282214, 50]//繪制立體線實(shí)體var line = entityController.appendLine( ?//名稱 ?'立體線', ?//點(diǎn)數(shù)組 ?pointArr, ?//線寬 ?2, ?//線顏色 ?new Cesium.Color(255 / 255, 0 / 255, 0 / 255, 1), ?//是否識(shí)別帶高度的坐標(biāo)（如果為true即代表立體線） ?true, ?//是否貼地形 ?false, ?//附加屬性 ?{})

繪制立體區(qū)/貼地形區(qū)

?

????具體實(shí)現(xiàn)：構(gòu)造CesiumZondy.Manager.EntityController幾何繪制控制對(duì)象，根據(jù)坐標(biāo)點(diǎn)、是否指定各點(diǎn)高度、顏色等信息構(gòu)造區(qū)對(duì)象，然后調(diào)用appendGraphics()方法即可實(shí)現(xiàn)立體區(qū)或貼地形區(qū)的繪制。注意貼地形區(qū)的分類類型需設(shè)置為Cesium.ClassificationType.TERRAIN。

• Example:

  //構(gòu)造幾何繪制控制對(duì)象var entityController = new CesiumZondy.Manager.EntityController({ ?viewer: webGlobe.viewer,})//構(gòu)造區(qū)對(duì)象var polygon = { ?name: '立體區(qū)', ?polygon: { ? ?//坐標(biāo)點(diǎn) ? ?hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights([114.3992, 30.5062, 100, 114.39921899282697, 30.507118866456594, 0, 114.39817867190918, 30.505787946817524, 0, 114.40013927896888, 30.505694066567706, 0]), ? ?//是否指定各點(diǎn)高度 ? ?perPositionHeight: true, ? ?//顏色 ? ?material: new Cesium.Color(33 / 255, 150 / 255, 243 / 255, 0.5), ? ?//輪廓線是否顯示 ? ?outline: true, ? ?//輪廓線顏色 ? ?outlineColor: Cesium.Color.BLACK, ?},}//繪制圖形通用方法：對(duì)接Cesium原生特性var stericPolygon = entityController.appendGraphics(polygon)

• Example:

  //構(gòu)造幾何繪制控制對(duì)象var entityController = new CesiumZondy.Manager.EntityController({ ?viewer: webGlobe.viewer,})//三維坐標(biāo)點(diǎn)數(shù)組let points = [121.12838249665901, 23.828496638766055, 2816.2788, 121.150053294749, 23.82435802607214, 2584.9714, 121.14258923767652, 23.8125039217518, 2197.3468, 121.11461042047392, 23.809568499354498, 2405.1721]//構(gòu)造區(qū)對(duì)象let polygon = { ?//區(qū) ?polygon: { ? ?//坐標(biāo) ? ?hierarchy: Cesium.Cartesian3.fromDegreesArrayHeights(points), ? ?//顏色 ? ?material: Cesium.Color.BLUE.withAlpha(0.5), ? ?//分類類型：地形類型 ? ?classificationType: Cesium.ClassificationType.TERRAIN, ?},}//繪制圖形通用方法：對(duì)接Cesium原生特性terrainPolygon = entityController.appendGraphics(polygon)

繪制貼地球線

????具體實(shí)現(xiàn)：首先構(gòu)造CesiumZondy.Manager.EntityController幾何繪制控制對(duì)象，然后調(diào)用appendGroundLine()方法，傳入定義的坐標(biāo)數(shù)組、顏色、線寬，即可實(shí)現(xiàn)貼地線的添加繪制。

• Example:

  //構(gòu)造幾何繪制控制對(duì)象var entityController = new CesiumZondy.Manager.EntityController({ ?viewer: webGlobe.viewer,})//定義一組坐標(biāo)位置var pointArr = [114.29326686402278, 30.54691048615991, 114.28238521698825, 30.552850641911828, 114.27353580837766, 30.536521489533488, 114.29257062566866, 30.525800315003725]//顏色var color = new Cesium.ColorGeometryInstanceAttribute(1, 0, 0, 0.5)//繪制貼地線（坐標(biāo)點(diǎn)數(shù)組，線顏色，線寬）var groundLine = entityController.appendGroundLine(pointArr, color, 40)

繪制貼地球區(qū)

????具體實(shí)現(xiàn)：首先構(gòu)造CesiumZondy.Manager.EntityController幾何繪制控制對(duì)象、構(gòu)造外圈坐標(biāo)數(shù)組、內(nèi)圈坐標(biāo)數(shù)組、填充顏色對(duì)象等信息，然后調(diào)用appendGroundPolygon()方法，即可實(shí)現(xiàn)貼地區(qū)的添加繪制。如果要繪制單圈的不帶洞區(qū)，內(nèi)圈坐標(biāo)數(shù)組傳空即可。

• Example:

  //構(gòu)造幾何繪制控制對(duì)象var entityController = new CesiumZondy.Manager.EntityController({ ?viewer: webGlobe.viewer,})//坐標(biāo)點(diǎn)數(shù)組（經(jīng)緯度）var point_out = [70, 0, 150, 0, 150, 60, 70, 60, 70, 0]//根據(jù)給定點(diǎn)畫貼地多邊形var groundPolygon = webGlobe.appendGroundPolygon( ?//外圈坐標(biāo)數(shù)組（經(jīng)緯度） ?point_out, ?//內(nèi)圈坐標(biāo)數(shù)組（經(jīng)緯度） ?null, ?//填充顏色 ?new Cesium.ColorGeometryInstanceAttribute(255 / 255, 255 / 255, 0 / 255, 0.5), ?//附加屬性 ?{})

繪制帶洞區(qū)

????具體實(shí)現(xiàn)：首先構(gòu)造CesiumZondy.Manager.EntityController幾何繪制控制對(duì)象，構(gòu)造外圈、內(nèi)圈坐標(biāo)點(diǎn)數(shù)組，然后調(diào)用appendHolePolygon()方法，設(shè)置信息：區(qū)名稱、內(nèi)圈與外圈坐標(biāo)點(diǎn)數(shù)組、區(qū)填充色，即可實(shí)現(xiàn)帶洞區(qū)的添加繪制。每一圈坐標(biāo)點(diǎn)序列，都必須首尾點(diǎn)一致形成閉合區(qū)，并且可以添加多圈內(nèi)圈坐標(biāo)。

• Example：

  //構(gòu)造幾何繪制控制對(duì)象var entityController = new CesiumZondy.Manager.EntityController({ ?viewer: webGlobe.viewer,})//外圈坐標(biāo)點(diǎn)var point_out = [114.40328987990017, 30.479789358042233, 114.40255973680176, 30.473707285934392, 114.40905754990294, 30.473938016458956, 114.40971219770601, 30.479196348500707, 114.40328987990017, 30.479789358042233]//內(nèi)圈坐標(biāo)點(diǎn)（可添加多圈內(nèi)圈坐標(biāo)點(diǎn)）var point_in = [ ?[114.40788399535329, 30.47712432587247, 114.4077781482791, 30.47586494219165, 114.40919532034856, 30.47700722872353, 114.40788399535329, 30.47712432587247], ?[114.40582893901652, 30.478599513299535, 114.40570115301699, 30.47795978731544, 114.40655655628692, 30.478318639933967, 114.40582893901652, 30.478599513299535],]//添加帶洞多邊形var holePolygon = entityController.appendHolePolygon( ?//名稱 ?'帶洞區(qū)', ?//外圈坐標(biāo) ?point_out, ?//內(nèi)圈坐標(biāo) ?point_in, ?{ ? ?//顏色 ? ?material: new Cesium.Color(0 / 255, 0 / 255, 255 / 255, 0.5), ? ?//多邊形相對(duì)于地球表面的高度 ? ?extrudedHeight: 100, ?})

交互繪制

????在三維球上使用鼠標(biāo)完成點(diǎn)、線、區(qū)等圖形的繪制，繪制的圖形在臨時(shí)圖層上，繪制結(jié)果不會(huì)被保存，可應(yīng)用于各個(gè)場(chǎng)景，滿足用戶在三維球上使用鼠標(biāo)交互式繪制顯示區(qū)域，或?qū)⒋斯δ芎推渌δ芑旌鲜褂茫瑢⑵渌δ茏兂山换ナ降墓δ堋?/p>

????具體實(shí)現(xiàn)：通過幾何繪制控制CesiumZondy.Manager.EntityController的方法實(shí)現(xiàn)點(diǎn)、線、區(qū)的添加繪制，結(jié)合三維場(chǎng)景鼠標(biāo)事件即?Cesium.WebSceneControl()?對(duì)象的?registerMouseEvent()?方法實(shí)現(xiàn)鼠標(biāo)交互繪制圖形功能。其中，可通過?Cesium.DrawPolygonTool()?在三維場(chǎng)景中添加交互式繪制區(qū)控件，實(shí)現(xiàn)交互式繪制區(qū)功能。

????以繪制點(diǎn)、線實(shí)體為例，關(guān)鍵步驟如下：

Step 1.?注冊(cè)鼠標(biāo)事件：
????調(diào)用 Cesium 三維球控件?Cesium.WebSceneControl()?的?registerMouseEvent()?方法注冊(cè)鼠標(biāo)事件, 以下示例中的匿名函數(shù)為觸發(fā)鼠標(biāo)事件后執(zhí)行的方法，完成此步后，在三維場(chǎng)景中點(diǎn)擊鼠標(biāo)左鍵可觸發(fā)點(diǎn)擊事件，點(diǎn)擊完成后進(jìn)入匿名函數(shù)；

• Example：

  //注冊(cè)事件webGlobe.registerMouseEvent('LEFT_CLICK', function(e) {})

Step 2.?坐標(biāo)轉(zhuǎn)換:
????鼠標(biāo)事件執(zhí)行方法中的形參包含當(dāng)前鼠標(biāo)點(diǎn)擊的一些信息,可以獲取其中的 position 位置信息用于圖形繪制，其中鼠標(biāo)點(diǎn)擊獲取到的 position 位置坐標(biāo)為屏幕坐標(biāo)，需要將屏幕坐標(biāo)轉(zhuǎn)換為經(jīng)緯度坐標(biāo)進(jìn)行圖形繪制；

• Example:

  //屏幕坐標(biāo)轉(zhuǎn)世界坐標(biāo)var cartesian = webGlobe.viewer.getCartesian3Position(movement.position, cartesian);//世界坐標(biāo)轉(zhuǎn)地理坐標(biāo)（弧度）var cartographic = Cesium.Cartographic.fromCartesian(cartesian);//地理坐標(biāo)（弧度）轉(zhuǎn)經(jīng)緯度坐標(biāo)：緯度、經(jīng)度、高程var lng = Cesium.Math.toDegrees(cartographic.longitude);var lat = Cesium.Math.toDegrees(cartographic.latitude);var height = cartographic.height;

Step 3.?添加點(diǎn)、線實(shí)體:
????調(diào)用幾何繪制控制?CesiumZondy.Manager.EntityController?的?appendPoint()?方法/?appendLine()?方法傳入相關(guān)經(jīng)緯度坐標(biāo)信息以及其他的信息添加圖形，完成此步后可在三維場(chǎng)景中看到添加的點(diǎn)/線等圖形；

• Example:

  //構(gòu)造幾何繪制控制對(duì)象var entityController = new CesiumZondy.Manager.EntityController({ ?viewer: webGlobe.viewer});//添加點(diǎn)：經(jīng)度、緯度、高程、名稱、像素大小、顏色、外邊線顏色、邊線寬度entityController.appendPoint(lng, lat, height, '點(diǎn)', 10, new Cesium.Color(1, 0, 0, 1), new Cesium.Color(1, 1, 0, 1), 2);//添加線：名稱、點(diǎn)數(shù)組、線寬、線顏色、是否貼地形entityController.appendLine('不貼地線', allPoint, 2, new Cesium.Color(1, 0, 0, 0.8), true, {});

Step 4.?注銷鼠標(biāo)事件:
????調(diào)用 Cesium 三維球控件?Cesium.WebSceneControl()?的?unRegisterMouseEvent()?方法注銷已添加的鼠標(biāo)事件，完成此步后，點(diǎn)擊鼠標(biāo)不再觸發(fā)鼠標(biāo)事件。

• Example:

  //注銷鼠標(biāo)事件webGlobe.unRegisterMouseEvent('LEFT_CLICK');

標(biāo)注

????地圖標(biāo)注是將空間位置信息點(diǎn)與地圖關(guān)聯(lián)，通過圖標(biāo)、窗口等形式把點(diǎn)相關(guān)的信息展現(xiàn)到地圖上。地圖標(biāo)注也是WebGIS中的比較重要的功能之一，在大眾應(yīng)用中較為常見?；诘貓D標(biāo)注，豐富GIS應(yīng)用，可以為用戶提供更多個(gè)性化的地圖服務(wù)，如標(biāo)注興趣點(diǎn)等。

????地圖標(biāo)注的應(yīng)用比較靈活，提供用戶交互式標(biāo)注功能，以及在程序中預(yù)先加載標(biāo)注等多種方式。用戶交互式標(biāo)注，指在地圖上知道大概位置，用戶通過鼠標(biāo)交互添加標(biāo)注。如果已知要標(biāo)注點(diǎn)的位置信息與其他屬性，就可以直接在程序中處理并添加，在地圖上疊加顯示標(biāo)注點(diǎn)。地圖標(biāo)注的表現(xiàn)形式多樣，包括簡單的圖片標(biāo)注、冒泡信息窗口標(biāo)注、聚合標(biāo)注等。

類名/方法名API說明CesiumZondy.Manager.LabelLayer / appendBillboard()添加圖片標(biāo)注到地圖CesiumZondy.Manager.LabelLayer / appendLabel()添加文本標(biāo)注到地圖CesiumZondy.Manager.LabelLayer / appendLabelIcon()、appendLabelIconComm()添加圖片+文本標(biāo)注到地圖CesiumZondy.Manager.PopupController / appendPopup()PopUp 標(biāo)注，彈窗實(shí)現(xiàn)

圖片標(biāo)注

????具體實(shí)現(xiàn)：首先構(gòu)造CesiumZondy.Manager.LabelLayer注記圖層管理對(duì)象，調(diào)用appendBillboard()方法可實(shí)現(xiàn)圖片標(biāo)注的添加，需要設(shè)置基本必要信息，如：圖片標(biāo)注的經(jīng)緯度、高程、名稱、圖標(biāo)文件路徑、圖片寬度、高度等信息。

• Example:

  //構(gòu)造注記圖層管理對(duì)象var labelLayer = new CesiumZondy.Manager.LabelLayer({ ?viewer: webGlobe.viewer,})//添加圖片標(biāo)注（經(jīng)度、緯度、高程、名稱、圖片地址、圖標(biāo)寬度、圖標(biāo)高度）var icon = labelLayer.appendBillboard(114.3992, 30.5062, 0, '圖標(biāo)', './static/data/picture/icon.png', 50, 50)

文本標(biāo)注

????具體實(shí)現(xiàn)：首先構(gòu)造CesiumZondy.Manager.LabelLayer注記圖層管理對(duì)象，調(diào)用appendLabel()方法可實(shí)現(xiàn)文本標(biāo)注的添加，需要設(shè)置基本必要信息，如：文本標(biāo)注的經(jīng)緯度、高程、文本內(nèi)容；還可設(shè)置各項(xiàng)樣式信息：字體、顏色、樣式、標(biāo)簽位置等。

• Example:

  //構(gòu)造注記圖層管理對(duì)象var labelLayer = new CesiumZondy.Manager.LabelLayer({ ?viewer: webGlobe.viewer,})//添加文字標(biāo)注label = labelLayer.appendLabel( ?//經(jīng)度、緯度、高程 ?114.3992, ?30.5062, ?0, ?//文本內(nèi)容 ?'光谷廣場(chǎng)', ?{ ? ?//文字大小、字體樣式 ? ?font: '20pt 楷體', ? ?//文本顏色 ? ?fillColor: Cesium.Color.YELLOW, ? ?//文本樣式，F(xiàn)ILL：只填充；OUTLINE：只顯示輪廓；FILL_AND_OUTLINE：填充顏色并顯示輪廓 ? ?style: Cesium.LabelStyle.FILL_AND_OUTLINE, ? ?//邊線顏色 ? ?outlineColor: Cesium.Color.RED, ? ?//邊線寬度 ? ?outlineWidth: 2, ? ?//文本垂直方向與坐標(biāo)點(diǎn)的相對(duì)位置：LEFT、CENTER、RIGHT ? ?verticalOrigin: Cesium.VerticalOrigin.CENTER, ? ?//文本水平方向與坐標(biāo)點(diǎn)的相對(duì)位置：LEFT、CENTER、RIGHT ? ?horizontalOrigin: Cesium.HorizontalOrigin.CENTER, ?})

圖文標(biāo)注

????具體實(shí)現(xiàn)：關(guān)鍵接口為CesiumZondy.Manager.LabelLayer類提供的appendLabelIconComm()方法、appendLabelIcon()方法，實(shí)現(xiàn)圖文標(biāo)注的添加。在實(shí)際應(yīng)用場(chǎng)景中可根據(jù)具體應(yīng)用需求選擇調(diào)用不同的方法。

（1）調(diào)用appendLabelIcon()方法，設(shè)置各項(xiàng)基本信息，可實(shí)現(xiàn)圖文標(biāo)注的添加；

• Example:

  //構(gòu)造注記圖層管理對(duì)象var labelLayer = new CesiumZondy.Manager.LabelLayer({ ?viewer: webGlobe.viewer,})//方法一var labelIcon = labelLayer.appendLabelIcon( ?//文本內(nèi)容 ?'湖北省老年大學(xué)', ?//經(jīng)度、緯度、高度 ?114.3639, ?30.5603, ?0, ?//文字大小、字體 ?'16pt 宋體', ?//文字顏色 ?new Cesium.Color(0 / 255, 0 / 255, 0 / 255, 0.8), ?//圖片地址 ?'./static/data/picture/icon.png', ?//圖片寬度、高度 ?50, ?50, ?//最遠(yuǎn)顯示距離：相機(jī)到注記的距離大于該值 注記不顯示 ?10000000, ?//最近顯示距離：相機(jī)到注記的距離小于該值 注記不顯示 ?1, ?//圖片位置：'center','top','bottom' ?'center')

（2）調(diào)用appendLabelIconComm()方法，傳入構(gòu)造的位置、圖片、文本對(duì)象等參數(shù)信息，同樣也可實(shí)現(xiàn)圖文標(biāo)注的添加，此方法對(duì)接 Cesium 原生屬性，可實(shí)現(xiàn)更加豐富的效果；

• Example:

  //位置（x、y、z）var position = Cesium.Cartesian3.fromDegrees(114.36517991431259, 30.56206615740468, 10)//圖片對(duì)象var billboardGraphics = new Cesium.BillboardGraphics({ ?//圖片地址 ?image: './static/data/picture/icon.png', ?//圖片寬度 ?width: 64, ?//圖片高度 ?height: 64, ?//隨遠(yuǎn)近縮放 ?pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.5e5, 3.0, 1.5e7, 0.5), ?//隨遠(yuǎn)近隱藏 ?translucencyByDistance: new Cesium.NearFarScalar(1.5e5, 1.0, 1.5e7, 0.0),})//文本對(duì)象var labelGraphics = new Cesium.LabelGraphics({ ?//文本 ?text: '湖北省博物館', ?//文字大小、字體 ?font: '20pt 宋體', ?//文字顏色 ?fillColor: Cesium.Color.BLACK, ?//文本垂直位置 ?verticalOrigin: Cesium.VerticalOrigin.BOTTOM, ?//文本水平位置 ?horizontalOrigin: Cesium.HorizontalOrigin.BOTTOM, ?//偏移量 ?pixelOffset: new Cesium.Cartesian2(0.0, -64 / 4), //x,y方向偏移 相對(duì)于屏幕 ?//隨遠(yuǎn)近縮放 ?pixelOffsetScaleByDistance: new Cesium.NearFarScalar(1.5e2, 3.0, 1.5e7, 0.5), ?//隨遠(yuǎn)近隱藏 ?translucencyByDistance: new Cesium.NearFarScalar(1.5e5, 1.0, 1.5e7, 0.0),})//添加圖標(biāo)注記（文字內(nèi)容、描述、位置、圖片對(duì)象、文本對(duì)象）labelIcon1 = labelLayer.appendLabelIconComm('湖北省博物館', '坐落于湖北省武漢市武昌區(qū)東湖風(fēng)景區(qū)', position, billboardGraphics, labelGraphics)

????其中，位置對(duì)象需使用 Cesium.Cartesian3 類來構(gòu)造，圖片對(duì)象需由 Cesium.BillboardGraphics 構(gòu)造，文本對(duì)象需由 Cesium.LabelGraphics 構(gòu)造，這三個(gè)類都屬于 Cesium 原生提供的類，具體用法可參考其 API 文檔。

Popup標(biāo)注

????具體實(shí)現(xiàn)：關(guān)鍵接口為CesiumZondy.Manager.PopupController類提供的appendPopup()方法，實(shí)現(xiàn)氣泡彈窗的添加；可分別通過removePopup()、clearPopups()、refreshPopups()方法移除、更新 Popup 標(biāo)注。

• Example:

  //構(gòu)造氣泡彈窗控制對(duì)象var popupController = new CesiumZondy.Manager.PopupController({ ?viewer: webGlobe.viewer,})//添加PopUPvar popup = popupController.appendPopup( ?//容器div的id ?'popup', ?//文本 ?'<center>黃鶴樓</center>位于湖北省武漢市長江南岸的武昌蛇山之巔', ?//坐標(biāo)位置 ?Cesium.Cartesian3.fromDegrees(114.30252372618706, 30.544641875459394), ?//偏移量 ?[0, 0], ?//彈窗的關(guān)閉按鈕點(diǎn)擊回調(diào)函數(shù) ?function() { ? ?popupController.removePopup(popup, 'popup', {}) ?})//刷新popupController.refreshPopups()