1. 程式人生 > >局域網Cesium離線影像及瓦片影像地圖加載

局域網Cesium離線影像及瓦片影像地圖加載

情況 tar lac 3d模型 mco geo pen 級別 bottom

1、Cesium簡介

優點:

  1. cesium展示地圖數據效果比較好,解析2D地圖各種不同服務類型的數據源,比如百度地圖、天地圖、arcgis地圖、BingMap、openStreetMap、MapBox等等;解析地形圖加載;解析3D模型,包括動態加載以及3Dtitles切片形式加載展示,尤其是3Dtitles,大大的加快了展示3D模型的展示效率;
  2. Cesium封裝部分地圖控件,直接調用即可,不用自己寫;

缺點:

  1. 跟商業3DGIS軟件對比,比如skyline,cesium三維分析功能較弱, cesium官網關於三維分析的例子難以找到(需要自己底層去實現),大多是以展示數據以及渲染數據為主的例子;
  2. 尚未提供交互式標繪工具Draw接口,2DGIS一般都是提供Draw工具的,比如arcgis api以及openlayer api;cesium想要繪制點、線、面,只能通過代碼來繪制,貌似不能在線手動畫;
  3. 沒有地圖量算工具、地圖比例尺、拉框縮放等,這些地圖基本工具,在cesium都需要自己來寫實現。

2、軟件下載瓦片並發布地圖服務方式

軟件環境:

cesium1.25,tomcat7

1,首先使用XX地圖下載器,破解版4.6,下載全球高德影像圖,我下載1-7級,大概幾百兆,比較快,第八級1個多G,指數級增長,學習階段不需要太多。

下載操作:首先縮小地圖,框選全球地圖,雙擊,彈出下載頁面,經緯度可以手動調整,-180,180 -90 90,確定即可下載。其它都默認。

2,下載完成後,如下圖:

技術分享圖片 技術分享圖片

點擊導出按鈕,如上右圖。存儲格式選擇“瓦片:tms”,圖片格式png即可,選擇保存位置,導出。

3,將導出的瓦片目錄復制到tomcat wabapps目錄下,文件名GlobalTMS,下面1-7級瓦片。

4,Cesium中顯示影像,代碼如下:

var url=‘http://localhost:8080/geoserver/wms‘; //Geoserver URL   
var viewer = new Cesium.Viewer(‘cesiumContainer‘,{  
    imageryProvider:new Cesium.WebMapServiceImageryProvider({   
        url : url,         
        layers: ‘nurc:Arc_Sample‘// Here just give layer name   
    }),  
    baseLayerPicker:false  
});  
var layers = viewer.imageryLayers;  
var blackMarble = layers.addImageryProvider(Cesium.createTileMapServiceImageryProvider({  
    url : ‘/GlobalTMS‘,  
    credit : ‘北京市昌平區‘  
}));  

5,保存文件後,顯示效果:

技術分享圖片

3、爬蟲瓦片下載方式

使用Cesium可以直觀的看基於DEM切片產生的Terrain地形數據,有種身臨其境的感覺,但缺點是Cesium默認缺省加載了微軟Bing提供的地形以及遙感影像數據,可以跟蹤日誌,總提示讓你申請微軟的Bing地圖Key。如果Cesium在絕對離線,即不連接互聯網的情況下,第一步加載Bing地形圖時候就拋出了異常,後面的圖層也無法加載,整個地圖區域將顯示漆黑的天空,這就意味著需要在底層,取消對Bing地形圖的訪問。

  由於Cesium超乎尋常的大,未壓縮情況下有6Mb多,好處是 可以看清楚代碼結構。這樣就可以跟蹤分析,如何取消對Bing地圖的訪問(如采用一般的文本編輯器,基本會死掉,Sublime也會經常卡死,因此我使用宇宙中最強大的IDE-VS2015)。打開Cesium.js後搜索代碼行,有一個createDefaultImageryProviderViewModels函數,裏面加載在線地圖服務近10多種,其中一些就是Bing地圖,還有其他互聯網在線地圖商提供的地圖服務。由於我的場景是物理隔絕的網絡,即不能使用在線地圖服務,因此,全部將這些代碼註釋掉,返回空的providerViewModels。

技術分享圖片 技術分享圖片

註釋後保存,編寫測試代碼發現加載後的地圖有黑色天空變成了藍色,當然,很醜陋。

為了避免藍色地球,預先加載了一張全球地圖作為背景效果如上右圖。

接下來,采用爬蟲爬取谷歌地形圖和影像圖,硬盤越大越好,縮放級別越高越好,使用IIS發布後,調用如下接口在Cesium中顯示地形圖,代碼如下:

layersTerrainMap.addImageryProvider(Cesium.createTileMapServiceImageryProvider({
  url: ‘http://192.168.198.183/Google_DEM/‘,
  credit: ‘Google_DEM‘
}));

技術分享圖片

參考文章

Cesium:局域網離線影像及瓦片影像地圖加載

Cesium - 離線使用方法

Cesium簡介以及離線部署運行

Cesium

局域網Cesium離線影像及瓦片影像地圖加載