linux 离线地图开发包,Mapbox本地离线部署

一 离线部署说明

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

Display a map

body { margin:0; padding:0; }

#map { position:absolute; top:0; bottom:0; width:100%; }

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

});

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：图层的名称，可以当做是图层别名，用以描述图层的。