廢話不多說,今天就先在Eclipse上搭建Cesium開發環境吧~
零、Cesium簡介
Cesiumjs 是一套javascript庫,用來渲染3D地球,2D區域地圖,和多種GIS要素。不需要安裝任何插件就能在支持最新HTML5標准的瀏覽器上運行。支持WebGL硬件加速,非常適合動態數據在GIS圖層上的展示,是一個跨平台,開源,非常有前途的webgis表現層庫。
Cesiumjs源自 Analytical Graphics, Inc. (AGI) 公司為他們客戶開發一個虛擬地球項目,后來將cesium項目貢獻給開源社區並一直活躍開發中。(AGI 開發的 STK Terrain Server 是一種針對Cesium-應用的流式高分辨率服務器)另一個公司級的貢獻者是NICTA (National ICT Australia) 澳大利亞最大的信息與通訊技術中心,NICTA的員工們貢獻了瓦片地圖服務、地形處理等cesium的核心功能。並一直使用cesium開發環境監測分析、交通基礎設施建模仿真優化等領域的應用。
此前我對比了一些GIS開源框架,相對來說Cesium是比較適合web gis的,只要瀏覽器支持webgl就可以無需下載任何插件運行,目前大多數主流瀏覽器都支持webgl,包括很多手機自帶的瀏覽器也逐漸開始支持webgl,因此webgl的普及也必定是大勢所趨。
一、開發環境
1、系統:windows 7/8/10均可
2、jdk:1.8.0_144
3、服務器:apache-tomcat-9.0.8
4、cesium:Cesium-1.54
5、IDE:eclipse+jsp
【新手請自行搜索jdk的下載及配置、Tomcat的下載及配置,eclipse的下載及配置~】
二、代碼測試
1、首先,我們需要從Cesium的官網下載最新的包:
Cesium的官方網站:https://cesiumjs.org/,點擊這個按鈕來獲取最新的Cesium:下載Cesium。Github站點為:https://github.com/AnalyticalGraphicsInc/cesium.git但是速度太慢了。
2、接下來,使用Eclipse建立一個新的Dynamic Web Project項目,如下圖 所示:
在“Project Name”中輸入“CesiumStudy”。
3、將Cesium包解壓,解壓縮后的目錄如下圖所示:
4、將解壓縮后的Build文件夾下面的Cesium子目錄復制到項目的目錄下,如下圖所示:
=====〉
5、在項目CesiumStudy上右鍵單擊,添加Html File,在“File Name”中輸入index.html,如下圖所示:
之后在index.html文件中輸入以下的測試代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<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="./Cesium/Cesium.js"></script>
<style> @import url(./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>
var viewer = new Cesium.Viewer('cesiumContainer'); </script>
</body>
</html>
注意代碼中藍色加粗處的路徑設置。
6、啟動server,查看頁面的運行效果圖,操作如下所示:
apache-tomcat-9.0.8服務器start以后,也可以使用任意一款瀏覽器,輸入網址訪問測試網頁:
http://localhost:8888/CesiumStudy/index.html(8888位端口號,每台計算機在用的端口號可能不一樣,根據實際情況調整)。效果如下圖所示:
7、此外,也可以將該Web項目部署到webapps文件夾下,即在默認安裝目錄的webapps(即C:\Program Files\apache-tomcat-9.0.8\webapps)下新建目錄“CesiumStudy”,再將CesiumStudy項目的webContent目錄下的Cesium文件夾和index.html文件復制到新建的CesiumStudy目錄下,如下圖所示:
之后運行C:\Program Files\apache-tomcat-9.0.8\bin\startup.bat來啟動apache-tomcat-9.0.8服務器。服務器啟動成功后,在瀏覽器中輸入如下地址:
http://localhost:8080/CesiumStudy/cesium/Apps/HelloWorld.html
我們就可以運行基於開源Cesium的測試頁面啦,並且在右上角可以切換各種地圖。效果如下圖所示:
這樣一來,Cesium的基本開發環境就搭建好了。
如果我們想要隱藏下方的版權信息,在下面這句代碼
var viewer = new Cesium.Viewer('cesiumContainer');
后面加上下面這句代碼就可以實現啦!
viewer._cesiumWidget._creditContainer.style.display="none";
去掉版權信息后如下圖,看起來清爽了許多!!!