mapbox矢量切片标准_开源方案搭建可离线的精美矢量切片地图服务-5.Mapbox离线项目实现...

项目成果展示(所有项目文件都在阿里云的共享云虚拟主机上，访问地图可以会有点慢，请多多包涵)。

1.中国地图离线实例

将所有的在线资源替换为本地资源，这里主要关注一下三种矢量切片的获取方式，

3.以及通过XYZ：http://test.sharegis.cn/mapbox/maptile/{z}/{x}/{y}.pbf直接访问切片虚拟目录获取切片，我们提供的在线例子就是通过这种方式，因为我只有虚拟云主机不能安装Geoserver，我把切好的切片放到网站根目录，通过XYZ直接请求切片文件。

这里mapbox样式代码省略，具体Mapbox样式请下载源码，或者参考上一篇文章-Mapbox样式设计进行设计。源码中maptile文件下包含所有中国地图离线矢量切片。

中国地图

html, body {

padding: 0;

margin: 0;

height: 100%;

overflow: hidden;

}

#map {

height: 100%;

z-index: 0;

}

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",

&#