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

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

开源⽅案搭建可离线的精美⽮量切⽚地图服务-5.Mapbox离线项⽬实现
系列⽂章⽬录
项⽬成果展⽰（所有项⽬⽂件都在阿⾥云的共享云虚拟主机上，访问地图可以会有点慢，请多多包涵）。

01：中国地图：
1.中国地图离线实例
将所有的在线资源替换为本地资源，这⾥主要关注⼀下三种⽮量切⽚的获取⽅式，
这⾥mapbox样式代码省略，具体Mapbox样式请下载源码，或者参考上⼀篇⽂章-进⾏设计。

源码中maptile⽂件下包含所有中国地图离线⽮量切⽚。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>中国地图</title>
<meta charset="utf-8"/>

<script src="../js/mapbox-gl.js"></script>
<link href="../css/mapbox-gl.css" rel="stylesheet"/>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
#map {
height: 100%;
z-index: 0;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
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",
"http://localhost:61477/maptile/{z}/{x}/{y}.pbf"
//"http://127.0.0.1:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=china:china_map&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&FORM ]
}
},
"layers": [{
"id": "background",
//地图背景
"type": "background",
"layout": {},
"paint": {
"background-color": {
"base": 1,
"stops": [
[
11,
"hsl(35, 32%, 91%)"
],
[
13,
"hsl(35, 12%, 89%)"
]
]
}
},
"interactive": true
}, {
"id": "river",
"type": "line",
"source": "china",
"source-layer": "river",
"minzoom": 5,
"maxzoom": 15,
"paint": {
"line-color": "#a0cfdf",
"line-width": {
"base": 1.4,
"stops": [
[
8,
0.5
],
[
20,
15
]
]
}
}
}
//篇幅限制，其他样式这⾥不做展⽰了，详细的请看代码…….
],
"_ssl": true
}
});
//添加缩放控件
map.addControl(new mapboxgl.NavigationControl());
</script>
</body>
</html>
2.德国-德累斯顿市实例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>德国-dresden</title>
<meta charset="utf-8"/>

<script src="../js/mapbox-gl.js"></script>
<link href="../css/mapbox-gl.css" rel="stylesheet"/>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
#map {
height: 100%;
z-index: 0;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = new mapboxgl.Map({
container: 'map',
center: [13.741891, 51.054211],
zoom: 10,
style: {
"version": 8,
//我使⽤的这个版本sprite要写全路径
"sprite": "http://localhost:61477/sprites/sprite",
//字体.pbf⽂件获取
"glyphs": "../fonts/{fontstack}/{range}.pbf",
"sources": {
"germany": {
//⽮量类型
"type": "vector",
//服务类型 tms，要使⽤wmts请换成wmts
"scheme": "tms",
"tiles": [
//获取GeoServer ⽮量切⽚服务,可以是⼀下⼏种⽅式
"http://localhost:8080/geoserver/gwc/service/tms/1.0.0/germany:germany_map@EPSG:900913@pbf/{z}/{x}/{y}.pbf",
//虚拟⽬录
//"/mapbox/maptile1/{z}/{x}/{y}.pbf"
//"http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=germany:germany_map&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&F ]
}
},
"layers": [
{
"id": "background",
"type": "background",
"layout": {},
"paint": {
"background-color": {
"base": 1,
"stops": [
[
11,
"hsl(35, 32%, 91%)"
],
[
13,
"hsl(35, 12%, 89%)"
]
]
}
},
"interactive": true
},
{
//⽔⾯
"id": "water",
"type": "fill",
"source": "germany",
"source-layer": "gis_osm_water_a_07_1",
"layout": {},
"paint": {
"fill-color": "hsl(196, 80%, 70%)"
},
"interactive": true
},
{
//墓地
"id": "cemetery",
"type": "fill",
"source": "germany",
"source-layer": "gis_osm_pofw_a_07_1",
"layout": {},
"paint": {
"fill-color": "hsl(75, 37%, 81%)"
},
"interactive": true
},
{
//建筑物
"id": "building",
"type": "fill",
"source": "germany",
"source-layer": "gis_osm_buildings_a_07_1",
"minzoom": 15,
"layout": {},
"paint": {
"fill-color": {
"base": 1,
"stops": [
[
15,
"hsl(35, 11%, 88%)"
],
[
16,
"hsl(35, 8%, 85%)"
]
]
},
"fill-opacity": {
"base": 1,
"stops": [
[
15.5,
],
[
16,
1
]
]
},
"fill-outline-color": "hsl(35, 6%, 79%)"
},
"interactive": true
}
],
"_ssl": true
}
});
map.addControl(new mapboxgl.NavigationControl());
</script>
</body>
</html>
3⼩结
这篇主要讲了⼀下Mapbox离线项⽬的两个例⼦，将我们提供的两个在线项⽬例⼦的源码分享给⼤家，相信⼤家通过这⼏篇⽂章会对Mapbox js离线项⽬部署有了清晰的认识，下篇我主要分享⼀下常⽤的Mapbox .pbf字体库。

待续。

作者：ATtuing
本⽂版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在⽂章页⾯明显位置给出原⽂链接。