Mapbox本地离线部署

一 离线部署说明

从官网抄一个HelloWorld的例子,完整代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Display a map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYW56aGlodW4iLCJhIjoiY2lsdnhjdjN5MDFvMHVia3NpYTlnbmUzaSJ9.twlExCjpR7uwH2IiFC7aDA';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
    center: [-74.50, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
});
</script>
</body>
</html>
Mapbox HelloWorld

从该例子看,平常的js库只需要将js,css存放本地就可以离线使用了,但是mapbox比较特殊:

  • 声明了一个accessToken,通过这个accessToken 才能访问mapbox在线的地图,样式等。
  • mapbox的map构造,直接一个style,定制了整个地图的样式。本地离线部署,必须要知道这个style的定义才行。

查询官网Style Specification资料,style除了这个url声明之外,还可以通过以下方式定义:

{
    "version": 8,
    "name": "Mapbox Streets",
    "sprite": "mapbox://sprites/mapbox/streets-v8",
    "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
    "sources": {...},
    "layers": [...]
}

参数说明如下:

  • version:样式版本,当前必须必须设置8。
  • name:样式名称,设置一个可读的名称描述即可。
  • sprite:mapbox地图使用的图标。
  • glyphs:mapbox地图使用的标注字体。
  • sources: mapbox地图使用的地图服务资源定义。
  • layers: mapbox地图使用的图层定义。

明显的,当我们尝试将mapbox离线本地化时,应当解决如下内容:

  • mapbox-gl.js,mapbox-gl.css存储本地服务器
  • layers,sources 图层本地化
  • sprite 图标本地化
  • glyphs 字体本地化

二 图层本地化

先保持HelloWorld的所有内容不变,尝试自定义一个xyz的osm底图,替换原底图即可。

 "sources": {
     "osm-tiles": {
         "type": "raster",
         "tiles": [
                 "http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
          ],
          "tileSize": 256
       }
  },
  "layers":[{
      "id": "123",
       "type": "raster",
       "source": "osm-tiles",
       "source-layer": "osmtiles"
  }]

sources参数说明:

  • sources是地图资源对象,以key,value组成,sources里的key不能重复,唯一声明一个地图资源的组成。
  • value里的type是资源的类型,必须是 vector, raster, raster-dem, geojson, image, video中的一种。当前声明是xyz的png图片组成的底图,所以声明类型是raster。
  • value里的tiles是xyz底图的url模板组合,tileSize声明一个切片宽高,一般切片都是是256*256的,所以此处声明256 。

layers参数说明:

  • layers是个数组,数组每一项代表一个图层。
  • id是每个图层的主键,每个图层的id必须不能重复。
  • type,声明一个图层的类型。
  • source,图层的地图数据来源,指向sources里的某个key的资源定义,比如sources里定义了一个osm-tiles的资源,该图层数据来源指向这个资源,即将key的值输入此处。
  • source-layer:图层的名称,可以当做是图层别名,用以描述图层的。

完整的代码和效果如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Display a map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYW56aGlodW4iLCJhIjoiY2lsdnhjdjN5MDFvMHVia3NpYTlnbmUzaSJ9.twlExCjpR7uwH2IiFC7aDA';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style:{
        "version": 8,
        "name": "Mapbox Streets",
        "sprite": "mapbox://sprites/mapbox/streets-v8",
        "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
         "sources": {
             "osm-tiles": {
                 "type": "raster",
                 "tiles": [
                   "http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
                  ],
                 "tileSize": 256
             }
        },
      "layers":[{
          "id": "123",
           "type": "raster",
           "source": "osm-tiles",
           "source-layer": "osmtiles"
      }]
    },
    center: [-74.50, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
});
</script>
</body>
</html>
图层本地化效果

实际使用时,使用mapbox加载wms,wmts,xyz这种栅格或者矢量切片等地图图层等。加载自己的地图服务这个初级目标达成。

三 图标本地化

3.1 图标离线使用

mapbox明显是偏向于互联网应用的地图库,它使用sprite这种将所有图标放一起的方式,减少小图片资源请求次数,在高并发的应用情况下,起到优化应用的目的,比如高德,百度地图都是使用sprite形式组合的地图图标,我们先尊重这样的设计。
上个例子中,图标定义形式是:"sprite": "mapbox://sprites/mapbox/streets-v8",初次接触一脸懵逼,不知道这个是啥意思,简单点,我们f12打开networ查看如图:

sprites请求

浏览器根据我们的定义,实际发送了两个url请求,一个png图片,一个json位置描述信息。暂时将这两个文件存储本地服务器:
sprites本地存储

然后仅仅将之前的代码,仅仅更改url为本地服务器的url即可:

 "sprite": "http://localhost:8080/mapbox_build/sprite/sprite",

这样,sprite图标的问题就解决了。

3.2 图标生成工具

mapbox提供了一个spritezero工具,用于自定义生成mapbox的sprite。spritezero工具用于将一个文件夹的svg矢量图片,转换成一个sprite的png图片和一个json文件。
本文简单介绍下,方便以后创建自己地图的sprite。
环境约束
操作系统:centos 7.2,win下基本装不上。
node:node6.3.0,其他高版本亲测很多难以装上。

3.2.1 安装node6.3.0

[root@localhost ~]# cd /usr/local
[root@localhost local]# wget http://nodejs.org/dist/v6.3.0/node-v6.3.0.tar.gz
[root@localhost local]# tar -zxvf node-v6.3.0.tar.gz
[root@localhost local]# vi /etc/profile
#编辑内容如下:
export NODE_HOME=/usr/local/node-v6.3.0
export PATH=$NODE_HOME/bin:$PATH
#保存退出

#启用profile生效
[root@localhost local]# source /etc/profile

#查看node,npm版本
[root@localhost local]# node -v
v6.3.0
[root@localhost local]# npm -v
3.10.3

#linux下root执行权限,重要,一定要操作
[root@localhost local]# chown -R root.root ./node-v6.3.0

3.2.2 安装spritezero,spritezero-cli

npm install -g @mapbox/spritezero
npm install -g @mapbox/spritezero-cli --unsafe-perm

3.2.3 sprite创建

icons输入资源

将icons下的svg图标转成sprite:

[root@localhost test]# spritezero sprite ./icons
输出结果

神奇的生成了一个叫sprite.png和sprite.json文件。

四 字体本地化

mapbox中使用的字体,也是pbf格式而不是tff格式,需要使用工具转换,查询资料发现,genfontgl这个node库可以执行将tff文件转成mapbox可用的pbf字体。

4.1 全局安装genfontgl

[root@localhost local]# npm i genfontgl -g

4.2 字体转换

用法:genfontgl OpenSans-Regular.ttf [output location]
示例:将OpenSans-Regular.ttf转换成pbf存到当前目录。

[root@localhost test]# genfontgl OpenSans-Regular.ttf ./
Process OpenSans-Regular.ttf

转换效果:


字体转换结果文件.png

4.3 字体应用

本地字体

将转换完成的字体,存放到本地服务器,修改glyphs参数即可:

 "glyphs": "http://localhost:8080/mapbox_build/fonts/{fontstack}/{range}.pbf",

疑问:fontstack,range这个参数占位是干嘛的?实际上,fontstack和range会被具体的字体类型和这个字在字体中所处的实际范围给替换了,我们先用一个矢量图层的样式来说明:

map.on('load', function () {
    map.addLayer({
        "id": "points",
        "type": "symbol",
        "source": {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-77.03238901390978, 38.913188059745586]
                    },
                    "properties": {
                        "title": "Mapbox DC",
                        "icon": "monument"
                    }
                }, 
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-122.414, 37.776]
                    },
                    "properties": {
                        "title": "Mapbox SF",
                        "icon": "harbor"
                    }
                }]
            }
        },
        "layout": {
            "icon-image": "{icon}-15",--矢量数据中properties的icon注入
            "text-field": "{title}",--矢量数据的properties中tile注入
            "text-font": ["Open Sans Regular"],  --字体,fontstack占位符就是对应这个声明。
            "text-offset": [0, 0.6],
            "text-anchor": "top"
        }
    });
});

mapbox大量使用注入的形式,比如文字标注绑定了矢量数据的title字段,图标绑定了icon字段,字体用我们转换后的本地字体。
完整代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Display a map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.54.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYW56aGlodW4iLCJhIjoiY2lsdnhjdjN5MDFvMHVia3NpYTlnbmUzaSJ9.twlExCjpR7uwH2IiFC7aDA';
var map = new mapboxgl.Map({
    container: 'map', // container id
    style:{
        "version": 8,
        "name": "Mapbox Streets",
        "sprite": "http://localhost:8080/mapbox_build/sprite/sprite",
        "glyphs": "http://localhost:8080/mapbox_build/fonts/{fontstack}/{range}.pbf",
         "sources": {
             "osm-tiles": {
                 "type": "raster",
                 "tiles": [
                   "http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
                  ],
                 "tileSize": 256
             }
        },
      "layers":[{
          "id": "123",
           "type": "raster",
           "source": "osm-tiles",
           "source-layer": "osmtiles"
      }]
    },
    center: [-74.50, 40], // starting position [lng, lat]
    zoom: 9 // starting zoom
});




map.on('load', function () {
    map.addLayer({
        "id": "points",
        "type": "symbol",
        "source": {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-77.03238901390978, 38.913188059745586]
                    },
                    "properties": {
                        "title": "Mapbox DC",
                        "icon": "monument"
                    }
                }, 
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-122.414, 37.776]
                    },
                    "properties": {
                        "title": "Mapbox SF",
                        "icon": "harbor"
                    }
                }]
            }
        },
        "layout": {
            "icon-image": "{icon}-15",
            "text-field": "{title}",
            "text-font": ["Open Sans Regular"],
            "text-offset": [0, 0.6],
            "text-anchor": "top"
        }
    });
});
</script>
</body>
</html>
标注与图标

4.4 可能遇到的问题

4.4.1 npm install EACCES: permission denied

原因是npm的存储目录没有操作权限,解决方法:

[root@localhost local]# chown -R root.root /usr/local/node-v6.3.0

4.4.2 genfontgl命令,ibstdc++.so.6: version `GLIBCXX_3.4.20' not found

版本问题,具体操作参考《关于libstdc++.so.6: version `GLIBCXX_3.4.20' not found问题解决》

五 最终部署

我们已经逐渐将字体,图标,图层,资源都采用本地的服务,但上面例子还是公网的mapbox-gl和accessToken,其实当资源都是使用本地的,accessToken 就没用了,我们只用把js,css也放到本地就可以了,完整代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>hello world</title>
    <meta charset="utf-8" />
    <script src='./plugin/mapbox-gl.js'></script>
    <link href='./plugin/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>
     <div id='map'></div>
     <script>
        //mapboxgl.accessToken = 'pk.eyJ1IjoiZnJlZWdpcyIsImEiOiJjam04dXRudWwwNXczM3Fqb3dkd201dGZzIn0.jvDsB3YWibUpk1oR9vva1A';
        var map = new mapboxgl.Map({
            container: 'map',
            style: {
                 "version": 8,
                 "name": "Mapbox Streets",
                 "sprite": "http://localhost:8080/mapbox_build/sprite/sprite",
                 "glyphs": "http://localhost:8080/mapbox_build/fonts/{fontstack}/{range}.pbf",
                 "sources": {
                    "osm-tiles": {
                        "type": "raster",
                        'tiles': [
                            "http://c.tile.openstreetmap.org/{z}/{x}/{y}.png"
                        ],
                        'tileSize': 256
                    }
                  },
                  "layers":[{
                         "id": "123",
                         "type": "raster",
                         "source": "osm-tiles",
                         "source-layer": "osmtiles"
                  }]
            },
            center: [-96, 37.8],
            zoom: 3
        });




map.on('load', function () {
    map.addLayer({
        "id": "points",
        "type": "symbol",
        "source": {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-77.03238901390978, 38.913188059745586]
                    },
                    "properties": {
                        "title": "Mapbox DC",
                        "icon": "monument"
                    }
                }, 
                {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-122.414, 37.776]
                    },
                    "properties": {
                        "title": "Mapbox SF",
                        "icon": "harbor"
                    }
                }]
            }
        },
        "layout": {
            "icon-image": "{icon}-15",
            "text-field": "{title}",
            "text-font": ["Open Sans Regular"],
            "text-offset": [0, 0.6],
            "text-anchor": "top"
        }
    });
});
     </script>
</body>
</html>

所有的资源都是本地了,可以做离线应用了。本地使用的话,mapbox的很多在线服务我们是使用不了了的,都要自己离线开发定制自己的服务。

推荐阅读更多精彩内容