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

來源:互聯網
上載者:User

標籤:目標   分解   user   amp   運行   layer   中心   內容   util   

 轉自原文 支援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資料顯示工具

工具鏈關係圖

離線地圖製作舉例

假設輸入為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的地圖解決方案

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.