Web GIS離線解決方案

本文轉載自查看原文 2017-06-02 19:44 1364 地圖

1、背景

在離線環境下（局域網中）的GIS系統中如何使用地圖？這里的地圖主要指的是地圖底圖，有了底圖切片數據，我們就可以看到地圖，在上面加上自己的業務數據圖層，進行相關操作。

要在離線環境下看到GIS地圖，就要有底圖切片數據，地圖的底圖切片數據在一定時間內是不會變化的，可以使用一些地圖下載器下載地圖切片，如這個地圖下載器。

在CS系統中可以基於GMap.Net來做，參考《百度谷歌離線地圖解決方案》。

下面介紹下Web系統如何使用GIS切片數據，開發web GIS系統。

2、使用GeoWebCache發布WMS服務

Geowebcache是基於Java的Web開源項目，主要用於緩存各種WMS數據源的地圖瓦片，它實現了多種服務接口，包括WMS-C，WMTS，TMS，KML。

Geowebcache作為一個獨立的開源項目，在最近被Geosever的幾個版本所集成，主要是對發布的WMS圖層建立緩存切片。

服務發布步驟：

1）官網下載 geowebcache-1.8.0-war.zip，直接解壓得到geowebcache.war文件，將該文件直接拷貝至tomcat目錄下的webapps下即可，啟動tomcat會對war包進行解壓。

2）修改geowebcache的配置文件geowebcache-core-context.xml。該文件在Tomcat的webapps\geowebcache\WEB-INF下，修改如下：

<bean id="gwcXmlConfig" class="org.geowebcache.config.XMLConfiguration">
<constructor-arg ref="gwcAppCtx" />
<!--<constructor-arg ref="gwcDefaultStorageFinder" />-->
    <constructor-arg value="D:\\GisMap\\" />
<!-- By default GWC will look for geowebcache.xml in {GEOWEBCACHE_CACHE_DIR},
         if not found will look at GEOSEVER_DATA_DIR/gwc/
         alternatively you can specify an absolute or relative path to a directory
         by replacing the gwcDefaultStorageFinder constructor argument above by the directory
         path, like constructor-arg value="/etc/geowebcache"     
    -->
<property name="template" value="/geowebcache.xml">
<description>Set the location of the template configuration file to copy over to the
        cache directory if one doesn't already exist.
</description>
</property>
</bean>

修改gwcXmlConfig實例化時使用固定路徑，該路徑可以為任意新建路徑文件夾。Geowebcache啟動之后會檢查此文件夾下是否存在gewebcache.xml文件，如果不存在則按模板新建立並讀取使用，如果存在則直接讀取使用。

3）修改第2步中的gewebcache.xml文件：

<layers>
    <arcgisLayer>
        <name>ARCGIS-Demo</name>
        <tilingScheme>D:\\GisMap\\Layer\\conf.xml</tilingScheme>
        <tileCachePath>D:\\GisMap\\Layer\\_alllayers</tileCachePath>
    </arcgisLayer>
</layers>

在layers節點里添加arcgisLayer節點（默認生成的gewebcache.xml的layers節點有許多其他冗余數據，可刪除可保留）。Name節點表示待添加圖層的名稱（這里配置為ARCGIS-Demo），titlingscheme節點為conf.xml文件的路徑，tileCachePath為瓦片數據的路徑。

4）瓦片地圖的准備

其中conf.xml為配置文件，conf.cdi為顯示區域約束文件，_alllayers文件夾下則存放了切片數據，Status.gdb為切片狀態情況記錄（可直接刪除）。

通過瓦片下載器下載瓦片地圖，然后生成的切片數據_alllayers文件夾：

L01-L10表示地圖縮放級數，按照ArcGIS切片目錄組織，切片命名規則也和ArcGIS切片數據命名規則一致。（conf.xml、conf.cdi和_alllayers在同級目錄）。

5)啟動tomcat，繼而啟動Geowebcache服務，瀏覽器訪問 localhost:8080/geowebcache，如果一切正確的話可以看到下面的頁面

該頁面簡單說明了Geowebcache的一些情況。

點擊“A list of all the layers and automatic demos”連接可以看到下面：

該頁面顯示了geowebcache.xml配置的圖層信息。圖中可以看到只配置了一個名字為ARCGIS-Demo的圖層，使用的EPSG3857坐標系，發布的圖片格式為png格式，點擊png鏈接即可看到瓦片地圖。

這里地圖顯示的級別和坐標系配置都來自conf.xml文件。這里的前端js使用的是Openlayers。查看網頁源碼：

View Code

個人比較喜歡leaflet這個GIS javascript庫，使用leaflet加載GeoWebCache發布的這個服務：

<!DOCTYPE html>
<html>
<head>
    <title>Leaflet - Offline Demo</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
</head>
<body>
    <div id="map" style="height:100vh;" ></div>
    <script type="text/javascript">
        
    var mapCenter = new L.LatLng(32.1280, 118.7742); //南京
        
    var map = new L.Map('map', {
        center : mapCenter,
        zoom : 4
    });

    var wmsLayer = L.tileLayer.wms("http://localhost:8080/geowebcache/service/wms", {
        layers: 'ARCGIS-Demo',
        format: 'image/png'
    });
    wmsLayer.addTo(map);

    var marker = new L.Marker(mapCenter);
    map.addLayer(marker);
    marker.bindPopup("<p>Hello! ;}</p>").openPopup();
        
    </script>
</body>
</html>

3、使用自定義的Http服務

GeowebCache本質上就是個Http服務，通過請求參數獲取配置文件中的路徑中的切片數據，返回給請求方。

我們可以自己寫個獨立的Http服務，從數據庫中讀取切片數據返回給請求方。

切片請求地址類似：http://localhost:8899/1818940751/{z}/{x}/{y}

其中“1818940751”是下載器下載的地圖類型，z/x/y分別是zoom和地圖切片行列號。

前端js使用leaflet加載：

var amapNormalUrl = 'http://localhost:8899/788865972/{z}/{x}/{y}';
var amapNormalLayer = new L.TileLayer(amapNormalUrl, {
    minZoom : 1,
    maxZoom : 18,
    attribution : '高德普通地圖'
});

var mapCenter = new L.LatLng(32.1280, 118.7742); //南京
var map = new L.Map('map', {
        center : mapCenter,
        zoom : 9,
        minZoom: 1,
        maxZoom: 18,
        layers : [ amapNormalLayer ]
});

前端js可以自定義投影Projection算法，而國內google地圖、高德地圖和騰訊地圖都是標准的墨卡托投影，可以直接用leaflet加載。

配合一些畫圖插件，再配合一些后台POI檢索服務，如：

《使用Lucene索引和檢索POI數據》

《使用Solr進行空間搜索》

則能做出如下效果：