標籤:目標 分解 user amp 運行 layer 中心 內容 util
轉自原文 支援WEB、Android、IOS的地圖解決方案
工具鏈GIS工具集
- OpenGeo Suite
包含PostGIS, GeoServer, GeoWebCache, OpenLayers, 和 QGIS
地圖準備
QGIS
匯入、匯出、編輯.shp,postgis,geotiff,geojson,dxf等多種GIS檔案,給普通圖片配准到地理座標
教程:http://www.qgistutorials.com/en/
DraftSight
編輯CAD檔案
SketchUp 從CAD檔案產生3D視圖
地圖服務
GeoServer
地圖服務發布。作為war放入Tomcat或Jetty即可使用。可發布geotiff,.shp,POSTGIS等多種GIS資料為地圖。通過openlayer或QGIS瀏覽。
GeoWebCache
緩衝地圖瓦片,提高效能。已內建在最新版GeoServer中。
TileStream
把.mbtile檔案發布為地圖服務
離線地圖打包
TileMill
將geotiff,geojson,csv,shp,postgis等檔案美化、打包為.mbtile瓦片地圖檔案,存有地圖資訊的sqlite檔案。
教程:https://www.mapbox.com/tilemill/docs/crashcourse/introduction/
mbutil
將.mbtile檔案分解為普通圖片和json檔案
地圖瀏覽
Mapbox.js
在瀏覽器中顯示TMS地圖(Javascript)。基於Leaflet。可配合TileSteam使用。Example:https://www.mapbox.com/mapbox.js/example/v1.0.0/
Mapbox IOS SDK
在IOS裝置中顯示TMS或.mbtile地圖,基於Route-Me
Mapbox Android SDK
在Android裝置中顯示TMS或.mbtile地圖,基於osmdroid
常式://depot/research/mapstudy/tstmapbox/
OsmDroid
在Android裝置中顯示TMS或.mbtile地圖
常式://depot/research/mapstudy/tstosmdroid/
osmbonuspack
為OsmDroid增加顯示POI等功能
常式://depot/research/mapstudy/tstosmbonuspack/
Leaflet
在瀏覽器中顯示TMS地圖(Javascript)。
OpenLayers
在瀏覽器中顯示TMS、WMS地圖(Javascript)。比Leaflet功能強大複雜。
Indoor.js
Indoor 工具集,基於OpenSteetMap,TileMill,Leaflet。 目前尚不穩定。
d3.js
Javascript資料顯示工具
工具鏈關係圖
離線地圖製作舉例
假設輸入為DWG,若原圖為位元影像(JPG/PNG),直接跳到第5步
在SketchUp中匯入DWG。並用Make Faces 外掛程式(YouTube)產生面
在SketchUp中展開為3D模型
匯出,如果用render渲染更好
開啟QGIS,"柵格"->配准工具。左邊第一個表徵圖開啟底圖。點擊黃色齒輪。設定輸出為base.tif。 目標空間參照系統為EPSG:3857. 勾選“完成時載入到QGIS”
在圖上任點2點。在彈出框內輸入該點座標值。輸入像素座標即可。
點第二個表徵圖完成配准。
添加一個向量圖層描述信標,類型為“點”,建立屬性ccode,類型為整數(信標內容碼)。建立屬性name,類型為字串。
點擊黃色小鉛筆到編輯模式,再點擊 * 表徵圖,在圖上點擊要增加信標的位置。添加3個點,id和ccode分別為1,2,3。再次點擊黃色小鉛筆退出編輯模式。
添加一個向量圖層描述信標,類型為“多邊形”,建立屬性name,類型為字串.
點擊黃色小鉛筆到編輯模式,再點擊 * 表徵圖,在圖上勾出圍欄地區。並分別命名。
右鍵位元影像圖層,另存新檔GeoTiff
右鍵向量圖層。另存新檔GeoJson
開啟TileMill,Project-->New project
Layers-->Add Layer, 選擇剛才匯出的base.tif,SRS選擇900913. “Save & Style” 。點擊圖層#base上得放大鏡縮放到合適大小。
刪除Contries圖層和相應的mss。把background-color改為和底圖一致
"+ Add Layer" 添加剛才匯出的2個geojson檔案
選擇左側手指==>Teaser.下面圖層選擇為hotarea.上面內容框中填入{{{name}}}
Save以後。可以看到熱區效果。 當滑鼠移到熱區時。相應的name會顯示。
將polygon-opacity,line-opacity和marker-opacity設為0。點擊Export匯出mbtiles. 放大圖片到zoom 16級,把中心標誌放到圖中央。shift+滑鼠拖動框選地圖地區。點擊 Export匯出為檔案。在~/Documents/MapBox/export中可以找到匯出的example.mbtiles檔案
啟動地圖服務。在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檔案。 如果只製作離線地圖可以跳過這步。
解包example.mbtiles為普通圖片和json檔案.在.mbtiles所在目錄。運行mb-util example.mbtile example
圖片檔案被解到了example目錄下
複製metadata.json為tile.json 改為example.json的格式 。將center和bounds改為數組(如果只做離線檔案可以跳過)
參考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>
拷貝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>
加入熱區參考文章 http://leafletjs.com/examples/choropleth.html。
支援WEB、Android、IOS的地圖解決方案