因為項目需求，要做一個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