Web GIS 離線地圖
1，基於瓦片的離線地圖下載
博客園 阿凡盧 提供了離線地圖的下載工具，下載地址：http://pan.baidu.com/s/1cxGpXW 具體使用見 參考資料2
阿凡盧 提供的地圖下載軟件，對於導出的瓦片圖片的目錄是基於ArcGIS切片目錄，我編寫了將導出到Mysql數據庫中的瓦片數據導出為{type}/{z}/{x}/{y}.png 格式。具體步驟如下:
A 使用 阿凡盧 提供的地圖下載軟件將地圖導出到Mysql數據庫
B 使用我開發的軟件把Mysql數據庫中的瓦片數據導出到本地文件 點擊這里下載
導出的圖片目錄如下：
這二步做好了以后，在IIS上新建一個空的網站，把我們的地圖切片拷貝過去即可。
2，前端JS 用來加載地圖的瓦片數據
前端推薦使用 Leaflet ，這里我已經把相關的 css,js 下載到了本地。具體 代碼如下:
<html> <head> <title>離線地圖</title> <link rel="stylesheet" href="dist/leaflet.css" /> <!--[if lte IE 8]> <link rel="stylesheet" href="dist/leaflet-ie.css" /> <link rel="stylesheet" href="dist/locate-ie.css"/> <![endif]--> <link rel="stylesheet" href="dist/mobile.css" /> <link rel="stylesheet" href="dist/locate.css" /> <script src="dist/leaflet.js"></script> <script src="dist/proj4js-compressed.js"></script> <script src="dist/proj4leaflet.js"></script> <script src="dist/locate.js" ></script> </head> <body> <div id="map"></div> </body> <script type="text/javascript"> var map = L.map('map').setView([31.2269, 121.4648], 12); L.tileLayer('http://localhost:8080/1818940751/{z}/{x}/{y}.png', { attribution: '© Google China' }).addTo(map); L.marker([31.229243, 121.479950]).addTo(map) .bindPopup('DTS 1<br>31° 38° 49°') .openPopup(); </script>
效果圖如下：
參考資料：