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

本文详细介绍了如何将Mapbox地图服务离线部署,包括地图图层本地化、图标本地化和字体本地化的过程。通过示例代码展示了如何自定义xyz底图,使用本地图标和字体,并提供了相关工具的安装与使用方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一 离线部署说明

从官网抄一个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

});

43ce4591c621

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值