開源方案搭建可離線的精美矢量切片地圖服務-5.Mapbox離線項目實現

時間  2019-11-21
標籤 開源 方案 搭建 離線 精美 矢量 切片 地圖 服務 5.mapbox mapbox 項目 實現 简体版
原文   原文鏈接

系列文章目錄

開源方案搭建可離線的精美矢量切片地圖服務-1.開篇（附成果演示地址）css

開源方案搭建可離線的精美矢量切片地圖服務-2.PostGIS+GeoServer矢量切片 html

開源方案搭建可離線的精美矢量切片地圖服務-3.Mapbox個性化地圖定製入門git

開源方案搭建可離線的精美矢量切片地圖服務-4.Mapbox樣式設計github

開源方案搭建可離線的精美矢量切片地圖服務-5.Mapbox離線項目實現api

開源方案搭建可離線的精美矢量切片地圖服務-6.Mapbox之.pbf字體庫app

開源方案搭建可離線的精美矢量切片地圖服務-7.Arcgis Pro企業級應用字體

開源方案搭建可離線的精美矢量切片地圖服務-8.mapbox 之sprite大圖圖標文件生成（附源碼）網站

項目成果展現（全部項目文件都在阿里雲的共享雲虛擬主機上，訪問地圖能夠會有點慢，請多多包涵）。

01：中國地圖：http://test.sharegis.cn/mapbox/html/3china.html

02：德國-德累斯頓市：http://test.sharegis.cn/mapbox/html/6germany.htmlui

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文件下包含全部中國地圖離線矢量切片。

image

<!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.德國-德累斯頓市實例

image

<!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

本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文連接。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程