Cesium離線切片地圖伺服器搭建和程式碼實現
阿新 • • 發佈：2018-11-09
Cesium離線切片地圖伺服器搭建和程式碼實現
地圖資料
我對地圖下載器可以下載的幾種地圖資料進行測試發現可以直接製作離線地圖伺服器的切片有以下幾種：
- 高德衛星地圖 ，下載切片只能下載到第8級，有文字標註；
- 天地圖墨卡託版，下載切片國內可以下載到18級，國外大概到12級左右；
- ArcGIS瓦片地圖 ，可以下載0-16級，無文字標註；
- Google衛星切片地圖 可以載入0-19級，有文字標註；
- Google地形切片地圖 可以載入0-19級，無文字標註，無山脈起伏，有山體等高線，城市區域顯示為等高線；
- ArcGIS離線動態地圖切片服務 ，可以對資料樣式進行控制，成本較高；
- GeoServer 釋出地圖服務資料，可以對資料樣式進行控制，開源免費。
搭建地圖伺服器
-
上述資料中ArcGIS資料釋出出來即可使用。
-
GeoServer釋出的地圖伺服器在Cesium載入資料不出現，需做跨域處理：
1）cesium載入資源都不允許跨越，所有需要配置下需要跨越的站點，如geoserver等，
跨域設定：
2）將cors-filter-2.4.jar和java-property-utils-1.9.1.jar，兩個jar包檔案放入geoserver目錄下webapps\geoserver\web-inf\lib中。3）開啟geoserver目錄下webapps\geoserver\web-inf中的web.xml
4）新增過濾器程式碼：
<filter> <filter-name>CORS</filter-name> <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class> </filter>5）新增過濾器路由程式碼：
<filter-mapping> <filter-name>CORS</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>
6）新增完畢後，重啟geoserver
7）如果目錄中存在maven，需要在pom.xml中，新增
<dependency>
<groupId>com.thetransactioncompany</groupId>
<artifactId>cors-filter</artifactId>
<version>[ version ]</version>
</dependency>
以上方法參考網友說明，具體作者忘記，如有侵權聯絡刪除內容
3. 使用Tomcat搭建虛擬路徑也需要對Tomcat做以上跨域處理，處理後製作Tomcat虛擬服務地址參考tomcat建立虛擬路徑
Jar包地址
載入離線谷歌瓦片地圖資料
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>谷歌地圖離線切片</title>
<link rel="stylesheet" href="../Build/Widgets/widgets.css" />
<script src="../Build/Cesium.js"></script>
</head>
<body style="margin: 0px;padding: 0px;">
<div id="cesiumContainer" style="width: 100%;height: 900px;background-color: rosybrown;"></div>
</body>
<script>
var viewer = new Cesium.Viewer('cesiumContainer',{
//需要進行視覺化的資料來源的集合
animation: false, //是否顯示動畫控制元件
shouldAnimate : true,
homeButton: false, //是否顯示Home按鈕
fullscreenButton: false, //是否顯示全屏按鈕
baseLayerPicker: false , //是否顯示圖層選擇控制元件
geocoder: false, //是否顯示地名查詢控制元件
timeline: false, //是否顯示時間線控制元件
sceneModePicker: false, //是否顯示投影方式控制元件
navigationHelpButton: false, //是否顯示幫助資訊控制元件
infoBox: false, //是否顯示點選要素之後顯示的資訊
requestRenderMode: true, //啟用請求渲染模式
scene3DOnly: false, //每個幾何例項將只能以3D渲染以節省GPU記憶體
sceneMode: 3, //初始場景模式 1 2D模式 2 2D迴圈模式 3 3D模式 Cesium.SceneMode
//fullscreenElement: document.body, //全屏時渲染的HTML元素 暫時沒發現用處
imageryProvider:new Cesium.createTileMapServiceImageryProvider({
url : '127.0.0.1:8080/googleTile',
credit:"googleTile",
})
});
var layers = viewer.imageryLayers;
viewer._cesiumWidget._creditContainer.style.display="none"; //遮蔽loge廣告
</script>
</html>
