java離線地圖web GIS製做

 

由於項目需求，要作一個web地圖，以前作太高德的在線地圖，它提供了一系列的API，而且因爲是國產的，因此開發起來比較容易，如今因爲項目是內網使用的，因此須要使用離線地圖，由此便開始了：

Web GIS離線解決方案:

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

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

首先開發web GIS 主要是採用一些前端框架，目前主流的gis前端框架是 openlayers 和 Leaflet   至於二者優劣，讀者可自行百度，我在項目中使用的是 Leaflet 

 

打開地圖下載器（工具在底部的github項目裏，可自行下載）

 找到 MapDownloader.exe.config 文件 進行修改

 

具體的就是修改我紅框中的內容：該數據庫地址，用戶名密碼等扽，改爲本身的就行

 

修改保存，雙擊 

 

而後作一些設置

 

 

 首先選擇mysql數據庫，其次選擇你要下載地圖的地方，我這裏選擇的是北京，根據本身的需求進行選擇，選擇的位置過大，下載的時間就會很長

接下來選擇地圖，這一步操做十分重要我在這一步耽誤了很長時間，一開始的時候沒有選擇地圖，結果出現地圖不顯示的狀況，後臺換百度，谷歌都不行，換了高德就沒問題了，我的能夠依狀況選擇

 

就是這個菜單，選擇須要下載的地圖提供方，選擇完畢以後，雙擊彈出提示框

這是讓你選擇下載的級別，通俗來講就是地圖的精細程度，級別越大地圖就能顯示的越精準，須要注意的是，當級別超過15，地圖的數據量會特別大，這裏給出級別爲15的地圖的樣子，我的能夠根據狀況來斷定

級別選到15大概就是這個樣子

 

 

等待下載完成以後，進入你的mysql 數據庫 發現新建了一張數據表

 

 

 接下來要作的就是把這張數據庫表的數據，導出成瓦片地圖（其實就是一張張有規律的256*256圖片）

 

打開 GISMysqlToLocal.exe（後面會給出下載地址）

 

該填寫的填寫完整，而後點擊導出就能夠導出圖片了，導出完成後，進入你導出的文件夾內 ，能夠看到導出的內容是這樣的

 

都是文件夾套文件夾的形式，而後會到導出的文件夾下，使用Ngix啓動服務，也就是把這裏圖片都放到web服務器裏面，你可使用Nginx,也可使用Apache,甚至於tomcat

這裏我只介紹一下用tomcat配置靜態資源訪問

咱們都知道tomcat能夠配置靜態資源和動態資源，可是實際工做過程當中，咱們都是把靜態資源跟動態資源放到一個項目的源代碼裏，進行打包部署，那麼對於咱們的離線地圖，靜態資源是十分大的，

把離線地圖跟咱們的代碼放到一個項目裏面顯然不現實，因此咱們須要把靜態資源放到其餘路徑

如：

/data/googlemaps

那咱們把文件放到這個目錄，瀏覽器如何訪問呢，使用tomcat的話，在此處配置

​<Host name="localhost" appBase="webapps" unpackWARs="true" autoDeploy="true">  
    <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs" prefix="localhost_access_log."   
        suffix=".txt" pattern="%h %l %u %t "%r" %s %b" />  
    <!--在Host標籤下加入Context標籤，path指的是服務器url請求地址（例如127.0.0.1/data），  
        docBase指的是服務器文件的路徑，reloadable指的是在omcat不重啓的狀況下實時同步本地目錄,
      一個虛擬主機下能夠配置多個Comtext標籤-->      
    <Context path="/" docBase="//usr/local/tomcat/webapps/officeMap"     reloadable="true" debug="0"  crossContext="true"/>
    <Context path="/googleMap" docBase="/data/googleMap" reloadable="true" debug="0" crossContext="true"/>  
</Host>        

注意標註顏色的地方，通常咱們都只是在Host標籤下配置一個Context標籤(你的應用)，實際上是能夠配置兩個標籤，表示同一個端口的不一樣地址，重啓tomcat以後，這樣當你訪問     http://localhost:8080/googleMap/hello.png，就能夠訪問靜態資源了

固然你直接訪問你的應用 localhost:8080 也是沒有問題的

固然你習慣哪一個都行(生產環境推薦Nginx，測試環境推薦使用tomcat，由於能夠省的配置Nginx)，只要我以後能夠經過瀏覽器去訪問就能夠（我這裏使用了一個http-server的一個工具，不過須要先安裝Node，具體看我的需求了），啓動完成以後，測試使用瀏覽器訪問 具體就是 「ip+端口+路徑」 能訪問到圖片說明服務已經啓動成功，  暫且先不用管他

 

接下來編寫html頁面

 第一步引入js css

標箭頭的是必需要引入的

接下來

#定義一個DIV做爲地圖的容器，必定要爲它設置wdith,height
<div id="map">


</div>

接下來寫js

    var map
    #這個地址就是你剛纔啓動服務器的地址 788865972 表明你導出圖片的最上層文件夾，這個文件夾也是自動生成的
    var osmUrl = 'http://localhost/788865972/{z}/{x}/{y}.png';
    var osmAttrib = '<b style="color:#dddddd">高德地圖</b>';
    var osm;
    $(function () {

        osm = L.tileLayer(osmUrl, {
            minZoom: 5,
            maxZoom: 15,
            attribution: osmAttrib

        });

　　map = L.map('map')
    .setView([39.908419, 116.397743], 10)
    .addLayer(osm);

 以上就是地圖的初始化方法：

寫完以後，保存雙擊html 就應該能夠看到地圖了

紅框是我後加的內容，至此離線地圖基本已經建立完成了，要想實現更多的功能，好比地圖搜索，地圖標記能夠看個人源碼，以及官網的API

 

特別須要提一點的是關於離線地圖的搜索，是須要你內網的數據庫裏面有位置信息，而後把第三方的位置信息抓取過來，放到本身的數據庫裏進行搜索等等，並不是leafletjs所自有的

不過Leaflet的功能仍是很是豐富的

能夠自行到官網查看：http://leafletjs.com/

 

關於搜索的擴展功能，個人後臺源碼裏已經寫了，首先本身須要建立一張數據庫表，此表須要有你抓取座標的經緯度，名稱，位置信息等字段，座標抓取方法，可自行百度，單須要記住一點，你用地圖下載器下載的什麼地圖，抓取座標信息

就抓取哪一個地圖的座標信息，我測試的數據是在網上下載的，若是你須要最新的數據，那麼須要本身去抓取。我後臺使用springboot寫的，建表sql，已經下載地圖工具都包含在裏面了，直接下載源碼，打開地圖下載器，下載地圖，而後導出瓦片圖片

再抓取一些座標信息，就能夠看到地圖，而且實現搜索功能了

 

源碼鏈接：https://github.com/chenwuwen/OffineMap