開源方案搭建可離線的精美矢量切片地圖服務-5.Mapbox離線項目實現
阿新 • • 發佈：2018-06-23
map 項目文件 全路徑 tps 矢量 out min 項目實現 title
項目成果展示（所有項目文件都在阿裏雲的共享雲虛擬主機上，訪問地圖可以會有點慢，請多多包涵）。
01：中國地圖：http://test.sharegis.cn/mapbox/html/3china.html
02：德國-德累斯頓市：http://test.sharegis.cn/mapbox/html/6germany.html
1.中國地圖離線實例
將所有的在線資源替換為本地資源，這裏主要關註一下三種矢量切片的獲取方式，
1.通過tms服務http://localhost:8080/geoserver/gwc/service/tms/1.0.0/china:china_map@EPSG:900913@pbf/{z}/{x}/{y}.pbf的方式獲取矢量切片，
2.示例中還有wmts服務http://127.0.0.1:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=china:china_map&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/x-protobuf;type=mapbox-vector&TILECOL={x}&TILEROW={y}的方式獲取矢量切片。
3.以及通過XYZ：http://test.sharegis.cn/mapbox/maptile/{z}/{x}/{y}.pbf直接訪問切片虛擬目錄獲取切片，我們提供的在線例子就是通過這種方式，因為我只有虛擬雲主機不能安裝Geoserver，我把切好的切片放到網站根目錄，通過XYZ直接請求切片文件。
這裏mapbox樣式代碼省略，具體Mapbox樣式請下載源碼，或者參考上一篇文章-Mapbox樣式設計進行設計。源碼中maptile文件下包含所有中國地圖離線矢量切片。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>中國地圖</title> <meta charset="utf-8" /> <!--<script src=‘https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js‘></script>--> <script src="../js/mapbox-gl.js"></script> <link href="../css/mapbox-gl.css" rel="stylesheet" /> <style> html, body { padding: 0; margin: 0; height: 100%; overflow: hidden; } #map { height: 100%; z-index: 0; } </style> </head> <body> <div id=‘map‘></div> <script> var map = new mapboxgl.Map({ container: ‘map‘, center: [105.7350860781, 34.3459367715], zoom: 3, style: { "version": 8, //我使用的這個版本sprite要寫全路徑 "sprite": "http://localhost:63336/sprites/sprite", //字體.pbf文件獲取 "glyphs": "../fonts/{fontstack}/{range}.pbf", "sources": { "china": { //矢量類型 "type": "vector", //服務類型 tms，要使用wmts服務請換成wmts "scheme": "tms", "tiles": [ //獲取GeoServer 矢量切片服務,可以是一下幾種方式 //"http://localhost:8080/geoserver/gwc/service/tms/1.0.0/china:china_map@EPSG:900913@pbf/{z}/{x}/{y}.pbf", "http://localhost:61477/maptile/{z}/{x}/{y}.pbf" //"http://127.0.0.1:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=china:china_map&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/x-protobuf;type=mapbox-vector&TILECOL={x}&TILEROW={y}" ] } }, "layers": [{ "id": "background", //地圖背景 "type": "background", "layout": {}, "paint": { "background-color": { "base": 1, "stops": [ [ 11, "hsl(35, 32%, 91%)" ], [ 13, "hsl(35, 12%, 89%)" ] ] } }, "interactive": true }, { "id": "river", "type": "line", "source": "china", "source-layer": "river", "minzoom": 5, "maxzoom": 15, "paint": { "line-color": "#a0cfdf", "line-width": { "base": 1.4, "stops": [ [ 8, 0.5 ], [ 20, 15 ] ] } } } //篇幅限制，其他樣式這裏不做展示了，詳細的請看代碼……. ], "_ssl": true } }); //添加縮放控件 map.addControl(new mapboxgl.NavigationControl()); </script> </body> </html>
2.德國-德累斯頓市實例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>德國-dresden</title> <meta charset="utf-8" /> <!--<script src=‘https://api.mapbox.com/mapbox-gl-js/v0.44.2/mapbox-gl.js‘></script>--> <script src="../js/mapbox-gl.js"></script> <link href="../css/mapbox-gl.css" rel="stylesheet" /> <style> html, body { padding: 0; margin: 0; height: 100%; overflow: hidden; } #map { height: 100%; z-index: 0; } </style> </head> <body> <div id=‘map‘></div> <script> var map = new mapboxgl.Map({ container: ‘map‘, center: [13.741891, 51.054211], zoom: 10, style: { "version": 8, //我使用的這個版本sprite要寫全路徑 "sprite": "http://localhost:61477/sprites/sprite", //字體.pbf文件獲取 "glyphs": "../fonts/{fontstack}/{range}.pbf", "sources": { "germany": { //矢量類型 "type": "vector", //服務類型 tms，要使用wmts請換成wmts "scheme": "tms", "tiles": [ //獲取GeoServer 矢量切片服務,可以是一下幾種方式 "http://localhost:8080/geoserver/gwc/service/tms/1.0.0/germany:germany_map@EPSG:900913@pbf/{z}/{x}/{y}.pbf", //虛擬目錄 //"http://test.sharegis.cn/mapbox/maptile1/{z}/{x}/{y}.pbf" //"http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=germany:germany_map&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORMAT=application/x-protobuf;type=mapbox-vector&TILECOL={x}&TILEROW={y}" ] } }, "layers": [ { "id": "background", "type": "background", "layout": {}, "paint": { "background-color": { "base": 1, "stops": [ [ 11, "hsl(35, 32%, 91%)" ], [ 13, "hsl(35, 12%, 89%)" ] ] } }, "interactive": true }, { //水面 "id": "water", "type": "fill", "source": "germany", "source-layer": "gis_osm_water_a_07_1", "layout": {}, "paint": { "fill-color": "hsl(196, 80%, 70%)" }, "interactive": true }, { //墓地 "id": "cemetery", "type": "fill", "source": "germany", "source-layer": "gis_osm_pofw_a_07_1", "layout": {}, "paint": { "fill-color": "hsl(75, 37%, 81%)" }, "interactive": true }, { //建築物 "id": "building", "type": "fill", "source": "germany", "source-layer": "gis_osm_buildings_a_07_1", "minzoom": 15, "layout": {}, "paint": { "fill-color": { "base": 1, "stops": [ [ 15, "hsl(35, 11%, 88%)" ], [ 16, "hsl(35, 8%, 85%)" ] ] }, "fill-opacity": { "base": 1, "stops": [ [ 15.5, 0 ], [ 16, 1 ] ] }, "fill-outline-color": "hsl(35, 6%, 79%)" }, "interactive": true } ], "_ssl": true } }); map.addControl(new mapboxgl.NavigationControl()); </script> </body> </html>
3小結
這篇主要講了一下Mapbox離線項目的兩個例子，將我們提供的兩個在線項目例子的源碼分享給大家，相信大家通過這幾篇文章會對Mapbox js離線項目部署有了清晰的認識，下篇我主要分享一下常用的Mapbox .pbf字體庫。
源碼鏈接：https://pan.baidu.com/s/16a48D7Qodf4xX-3YZOX7ZQ 密碼：po5s
github地址：https://github.com/HuHongYong/Mapbox-js-offline
待續。。。。。。。。。。。。。。。。。。。。。
作者：ATtuing
出處：http://www.cnblogs.com/ATtuing
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。
開源方案搭建可離線的精美矢量切片地圖服務-5.Mapbox離線項目實現