本身作地圖

支持WEB、Android、IOS的地圖解決方案

工具鏈

GIS工具集

1. OpenGeo Suite
   包含PostGIS, GeoServer, GeoWebCache, OpenLayers, 和 QGIS

地圖準備

1. QGIS 
   導入、導出、編輯.shp,postgis,geotiff,geojson,dxf等多種GIS文件,給普通圖片配準到地理座標
   教程：http://www.qgistutorials.com/en/

2. DraftSight
   編輯CAD文件

3. SketchUp
   從CAD文件生成3D視圖

地圖服務

1. GeoServer
   地圖服務發佈。做爲war放入Tomcat或Jetty便可使用。可發佈geotiff,.shp,POSTGIS等多種GIS數據爲地圖。經過openlayer或QGIS瀏覽。

2. GeoWebCache
   緩存地圖瓦片，提升性能。已內置在最新版GeoServer中。

3. TileStream
   把.mbtile文件發佈爲地圖服務

離線地圖打包

1. TileMill
   將geotiff,geojson,csv,shp,postgis等文件美化、打包爲.mbtile瓦片地圖文件,存有地圖信息的sqlite文件。
   教程:https://www.mapbox.com/tilemill/docs/crashcourse/introduction/

2. mbutil
   將.mbtile文件分解爲普通圖片和json文件

地圖瀏覽

1. Mapbox.js
   在瀏覽器中顯示TMS地圖（JavaScript）。基於Leaflet。可配合TileSteam使用。Example:https://www.mapbox.com/mapbox.js/example/v1.0.0/

2. Mapbox IOS SDK
   在iOS設備中顯示TMS或.mbtile地圖，基於Route-Me

3. Mapbox Android SDK
   在Android設備中顯示TMS或.mbtile地圖，基於osmdroid
   例程：//depot/research/mapstudy/tstmapbox/

4. OsmDroid
   在Android設備中顯示TMS或.mbtile地圖
   例程：//depot/research/mapstudy/tstosmdroid/

5. osmbonuspack
   爲OsmDroid增長顯示POI等功能
   例程：//depot/research/mapstudy/tstosmbonuspack/

6. Leaflet
   在瀏覽器中顯示TMS地圖（Javascript）。

7. OpenLayers
   在瀏覽器中顯示TMS、WMS地圖（Javascript）。比Leaflet功能強大複雜。

8. Indoor.js
   Indoor 工具集，基於OpenSteetMap,TileMill,Leaflet。 目前尚不穩定。

9. d3.js
   Javascript數據顯示工具

工具鏈關係圖

離線地圖製做舉例

1. 假設輸入爲DWG,若原圖爲位圖（JPG/PNG），直接跳到第5步 
2. 在SketchUp中導入DWG。並用Make Faces 插件(YouTube)生成面 
3. 在SketchUp中拉伸爲3D模型
4. 導出,若是用render渲染更好 
5. 打開QGIS，"柵格"->配準工具。左邊第一個圖標打開底圖。點擊黃色齒輪。設置輸出爲base.tif。 目標空間參照系統爲EPSG:3857. 勾選「完成時載入到QGIS」 
6. 在圖上任點2點。在彈出框內輸入該點座標值。輸入像素座標便可。
7. 點第二個圖標完成配準。
8. 添加一個矢量圖層描述信標,類型爲「點」，新建屬性ccode，類型爲整數（信標內容碼）。新建屬性name,類型爲字符串。
9. 點擊黃色小鉛筆到編輯模式，再點擊 * 圖標，在圖上點擊要增長信標的位置。添加3個點，id和ccode分別爲1,2,3。再次點擊黃色小鉛筆退出編輯模式。
10. 添加一個矢量圖層描述信標,類型爲「多邊形」，新建屬性name，類型爲字符串.
11. 點擊黃色小鉛筆到編輯模式，再點擊 * 圖標，在圖上勾出圍欄區域。並分別命名。
12. 右鍵位圖圖層，另存爲GeoTiff 
13. 右鍵矢量圖層。另存爲GeoJson 
14. 打開TileMill,Project-->New project
15. Layers-->Add Layer, 選擇剛纔導出的base.tif,SRS選擇900913. 「Save & Style」 。點擊圖層#base上得放大鏡縮放到合適大小。
16. 刪除Contries圖層和相應的mss。把background-color改成和底圖一致 
17. "+ Add Layer" 添加剛纔導出的2個geojson文件
18. 選擇左側手指==>Teaser.下面圖層選擇爲hotarea.上面內容框中填入{{{name}}} 
19. Save之後。能夠看到熱區效果。 當鼠標移到熱區時。相應的name會顯示。
20. 將polygon-opacity,line-opacity和marker-opacity設爲0。點擊Export導出mbtiles. 放大圖片到zoom 16級，把中心標誌放到圖中央。shift+鼠標拖動框選地圖區域。點擊 Export導出爲文件。在~/Documents/MapBox/export中能夠找到導出的example.mbtiles文件 
21. 啓動地圖服務。在terminal中執行 tilestream --tiles=/Users/fangjian/Documents/MapBox/export 而後訪問http://localhost:8888/ 能夠看到地圖已經生效。訪問 http://localhost:8888/v2/example.json 能夠下載tilejson. 訪問 http://localhost:8888/v2/example.mbtiles能夠下載mbtiles文件。 若是隻製做離線地圖能夠跳過這步。
22. 解包example.mbtiles爲普通圖片和json文件.在.mbtiles所在目錄。運行mb-util example.mbtile example 
    圖片文件被解到了example目錄下
23. 複製metadata.json爲tile.json 改成example.json的格式 。將center和bounds改成數組（若是隻作離線文件能夠跳過）

24. 參考metadata.json 修改 https://www.mapbox.com/mapbox.js/example/v1.0.0/ 樣例

    <script>
    var map = L.mapbox.map('map');
    var stamenLayer = L.tileLayer('./{z}/{x}/{y}.png', {
      attribution: 'Map tiles by <a href="http://dreamvoc.com">DreamVoc</a>.',
      minZoom:14,
      maxZoom:17
    }).addTo(map);
    map.setView([-0.0047,0.0075], 16);
    </script>

25. 拷貝ccode.geojson和hotarea.geojson到當前目錄。編輯文件內容爲var ccode={... var hotarea={...map.featureLayer.setGeoJSON(ccode); 而後加入如下代碼

    <script src="ccode.geojson" ></script>
    <script src="hotarea.geojson" ></script>
    <script>
    map.featureLayer.setGeoJSON(ccode);
    </script>
    <script>
    L.geoJson(hotarea).addTo(map);
    </script>

26. 參考http://leafletjs.com/examples/choropleth.html加入熱區