一 离线部署说明
从官网抄一个HelloWorld的例子,完整代码如下:
Display a mapbody { 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:图层的名称,可以当做是图层别名,用以描述图层的。