.mbtiles文件。客户端（浏览器）端。缺少的部分：如何自托管Mapbox矢量图块（
.mbtiles），以便可以通过mapbox-gl.js对其进行使用？ >我知道Mapbox Studio可以将矢量图块上传到Mapbox服务器，并让其托管图块。但这对我来说是没有选择的，我想将矢量切片托管在自己的服务器上。请参阅我的答案以获取关于Tilelive的有效解决方案。 .4.0：<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.js'></script>
，并在JavaScript脚本中创建mapboxgl.Map：
var map = new mapboxgl.Map({
container: 'map',
center: [46.8104, 8.2452],
zoom: 9,
style: 'c.json'
});
.mbtiles样式文件配置矢量切片源：{
"version": 6,
"sprite": "https://www.mapbox.com/mapbox-gl-styles/sprites/bright",
"glyphs": "mapbox://fontstack/{fontstack}/{range}.pbf",
"constants": {
"@land": "#808080",
"@earth": "#805040",
"@water": "#a0c8f0",
"@road": "#000000"
},
"sources": {
"osm_roads": {
"type": "vector",
"url": "tile.json"
}
},
"layers": [{
"id": "background",
"type": "background",
"paint": {
"background-color": "@land"
}
}, {
"id": "roads",
"type": "line",
"source": "osm_roads",
"source-layer": "roads",
"paint": {
"line-color": "@road"
}
}]
}
...，并且
c.json中具有以下TileJSON规范： ...指向运行在
tile.json上的TileStream服务器。TileStream已开始于：
{
"tilejson": "2.1.0",
"tiles": [
"http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
],
"minzoom": 0,
"maxzoom": 12
}
...文件夹中包含我的
localhost:8888文件。使用此设置，我可以打开网页，但只能看到背景层。在浏览器网络跟踪中，我可以看到放大后确实加载了图块，但是浏览器JavaScript错误控制台包含几种形式的错误
node index.js start --tiles="..\tiles"
不是
..\tiles图像，而是ProtoBuf文件，图块URL osm_roads.mbtiles实际上更有意义，但这不起作用。有什么想法吗？
#1 楼
正如@Greg指出的那样，您应该使用Tilelive来托管自己的矢量图块，而不是TileStream（我的第一次尝试）。Tilelive本身不是服务器，而是一个处理框架中的图块的后端框架。来自不同来源的不同格式。但这是基于Node.js的，因此您可以将其直接转换为服务器。要从Mapbox Studio导出的
.mbtiles源读取图块，您需要使用node-mbtiles tilelive模块。出现在您选择的目的地。解决方法：只需在.mbtiles中获取最新的export-xxxxxxxx.mbtiles文件即可。 > 这是我的简约方法，大致基于以下实现：
安装Node.js />
在文件
~/.mapbox-studio/cache中实现服务器： npm install tilelive mbtiles express 注意：
server.js标头启用跨域资源共享（CORS），因此从其他服务器提供服务的网页可以访问图块。用
var express = require('express');
var http = require('http');
var app = express();
var tilelive = require('tilelive');
require('mbtiles').registerProtocols(tilelive);
//Depending on the OS the path might need to be 'mbtiles:///' on OS X and linux
tilelive.load('mbtiles://path/to/osm_roads.mbtiles', function(err, source) {
if (err) {
throw err;
}
app.set('port', 7777);
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
app.get(/^\/v2\/tiles\/(\d+)\/(\d+)\/(\d+).pbf$/, function(req, res){
var z = req.params[0];
var x = req.params[1];
var y = req.params[2];
console.log('get tile %d, %d, %d', z, x, y);
source.getTile(z, x, y, function(err, tile, headers) {
if (err) {
res.status(404)
res.send(err.message);
console.log(err.message);
} else {
res.set(headers);
res.send(tile);
}
});
});
http.createServer(app).listen(app.get('port'), function() {
console.log('Express server listening on port ' + app.get('port'));
});
});
运行它设置
Access-Control-Allow-...中使用Mapbox GL JS的网页： node server.js 指示位置瓷砖源并使用以下
minimal.html设置图层样式： <!DOCTYPE html >
<html>
<head>
<meta charset='UTF-8'/>
<title>Mapbox GL JS rendering my own tiles</title>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.4.0/mapbox-gl.js'></script>
<style>
body { margin:0; padding:0 }
#map { position:absolute; top:0; bottom:50px; width:100%; }
</style>
</head>
<body>
<div id='map'>
</div>
<script>
var map = new mapboxgl.Map({
container: 'map',
center: [46.8, 8.5],
zoom: 7,
style: 'minimal.json'
});
</script>
</body>
</html>
为网页提供服务并为之高兴。
#2 楼
自己托管矢量图块相对简单。 MBTiles包含必须向Web公开的.pbf文件。就是这样。最简单的方法是使用简单的开源服务器（例如TileServer-PHP）并将MBTiles文件与项目文件放置在同一文件夹中。 TileServer为您完成所有托管配置（CORS，TileJSON，正确的gzip标头等）。安装意味着只需要在启用PHP的Web服务器上解压缩即可。
如果要在笔记本电脑上启动TileServer-PHP，可以使用Docker。随时可用的容器位于DockerHub上。
在Mac OS X和Windows下，它可以在几分钟内通过Kitematic图形用户界面运行：https：//kitematic.com/。在Kitematic中，只需搜索“ tileserver-php”，然后启动包含项目的随时可用的容器/虚拟机。然后单击“卷”，然后将您的MBTiles文件拖放到该文件夹中。您将获得一个运行中的矢量图块主机！
此类矢量图块可以在MapBox Studio中作为源打开，或与MapBox GL JS WebGL查看器一起显示。
如果您使用mbutil之类的实用程序将单个.pbf从MBtiles容器中解包出来，则甚至可以将矢量切片作为任何文件夹托管在任何Web服务器，云存储甚至GitHub上，并设置为CORBA，TileJSON和gzip正确。 Bellow是一个GitHub项目，也演示了这种方法。
请尝试使用此查看器：
并查看相关的存储库：
https://github.com/klokantech/tileserver-php
https://github.com/klokantech/vector-tiles-sample
https://github.com/klokantech/ mapbox-gl-js-offline-example
评论
对于我来说，到目前为止，这是上述所有选项中最简单的一种，感谢您的发帖。
–割草机
15-10-29在11:49
PGRestAPI，听起来不错，但对我而言安装失败。我永远无法成功安装PGRestAPI。因此，此php tile服务器是我唯一的选择，它可以完美运行。
–hoogw
16年11月14日在17:13
这是最有趣的，您能否详细说明如何正确设置CORS和TileJSON以提供pbf文件？我已经从download.geofabrik.de/europe下载了一个pbf文件，但是链接的项目包含许多包含许多pbf文件的目录。
– php_nub_qq
19年5月30日19:33
#3 楼
我不是在吹牛角，而是https://github.com/spatialdev/PGRestAPI是我一直在从事的一个项目，该项目托管从Mapbox Studio导出的.mbtiles矢量图块。文档，但基本上是将.mbtiles文件拖放到/ data / pbf_mbtiles中，然后重新启动节点应用程序。它将通过该文件夹进行读取，并为您的矢量图块提供端点。您还可以指向PostGIS实例并获取动态矢量图块。我们将它们与https://github.com/SpatialServer/Leaflet.MapboxVectorTile结合使用，这是一个Leaflet / Mapbox矢量图块库，我们也一直在努力。
评论
不幸的是，不再积极开发PGRestAPI
–拉斐尔
17年6月26日在18:26
#4 楼
感谢您提出的重大问题。我不知道他们最终发布了矢量瓦片的稳定版本。此外，您可能必须使用此答案，因为它是“任何想法”的想法来源。题。我还没有一个正在运行的工作室。我认为您遇到的问题之一是您正在使用tilejson文件。您需要使用tilejson服务才能使用此类文件。因此，我认为您需要将“源”部分更改为嵌入式URL。尝试
"sources": {
"osm_roads": {
"type": "vector",
"url": "http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
}
},
或
"sources": {
"osm_orads": {
"type": "vector",
"tiles": [
"http://localhost:8888/v2/osm_roads/{z}/{x}/{y}.png"
],
"minzoom": 0,
"maxzoom": 12
}
},
当他们使用
mapbox://作为协议时，它是别名/简写服务的符号。在视频的8:40左右对“来源”部分进行了简要讨论。另一步骤是将矢量数据带回到MapBox Studio中并渲染数据/创建样式表。当您的c.json文件是样式表时，osm_roads将是第一步。您可能需要图块实时服务器来处理图块流，如视频15:01所述。该视频说您需要在xml文件中添加其他元数据。这里的奇怪之处是您在其他地方引用了.pbf和样式表，但您提供的url是生成的tile .png文件是从矢量数据生成的。
如果具有MapBox键，则无需说。对于您自己的托管，我相信您将不得不将github样式和字形复制到您自己的服务器上。再次注意，字形标记中有一个mapbox：//协议。可能不需要这两个标记，因为您是通过图标来渲染普通线和多边形，而不是POI。值得一看。
最后，视频说明您可以将生成的矢量层带回工作室以对其进行样式设置。您可能要参考您的矢量层，然后在工作室中首先应用id：background和id：roads样式。视频中说，实时直播是MapBox Studio背后的服务器。这里的想法是确保在尝试提供动态渲染的最终矢量图块之前，已经理解并解决了所有第二步问题。
评论
好的，谢谢@Greg的想法。将会进一步调查并返回我的发现。
–安德烈亚斯·比尔格（Andreas Bilger）
2014年12月10日20:16
#5 楼
与提到的主要解决方案相比，https://github.com/osm2vectortiles/tileserver-gl-light易于使用-无需摆弄JSON文件。您只需使用tileserver-gl-light filename.mbtiles 运行它，然后它就会为您提供服务。它可以使用预先定义的Mapbox GL样式，例如bright-v9；在运行服务器之后，您只需将消耗这些切片的任何内容指向
http：// localhost：8080 / styles / bright-v9.json
#6 楼
您可能想尝试一下我们的tilehut.js服务器。它基本上完成了您所需的一切=托管矢量切片，并附带了精美的示例/文档...并与openshift结合使用，仅需5分钟即可完成设置。请看看：https://github.com/bg/tilehut
https://github.com/bg/tilehut/tree/master/examples/simplemap_vector
https://github.com/bg/tilehut#your-own-hosted-tileserver-in-5-minutes
#7 楼
超级超级，但是现在GeoServer提供了pbf（矢量切片格式）评论
友善的建议，除非绝对没有其他方法，否则请避免使用Geoserver。
– Sanctus
19年11月25日在18:31
#8 楼
此页面上的每个答案都会运行一台服务器，以响应切片请求。在诸如AWS S3之类的服务上静态静态地托管矢量地图图块是容易，便宜且快速的。也许对于行星提取物来说很难做到这一点，但是对于美国西海岸而言，到目前为止对我来说效果很好。 ：https://github.com/addresscloud/serverless-tiles一旦有了Tippecanoe或OpenMapTiles的图块，就将
.mbtiles文件分割为mb-util目录：mb-util file.mbtiles tiles_folder
然后使用AWS CLI将它们复制到S3：
aws s3 cp tiles_folder s3://bucket_name/folder_path/ --recursive --content-type application/x-protobuf
#9 楼
您可以考虑使用其他服务来提供平铺服务；Tegola（用Go语言编写）
Tiler
这里对此主题有很好的介绍
评论
请注意，您需要三个///来定义mbtiles文件：tilelive.load（'mbtiles：//path/to/osm_roads.mbtiles'，function（err，source）{
– CDavis
2014-12-16在0:41
@cdavis：这似乎取决于操作系统：Linux和OS X需要三个///，例如mbtiles：////usr/local/osm_roads.mbtiles。但是在Windows上，如果您指定磁盘，例如，只需两个// mbtiles：//D/data/osm_roads.mbtiles。
–安德烈亚斯·比尔格（Andreas Bilger）
2014年12月16日19:34
真的很有帮助，非常感谢，帮助我在5英尺内送达矢量mbtiles！
–Bwyss
15年7月16日在14:13
嗨，安德烈亚斯（Andreas）-我无法使用它-地图显示出来，但这只是一个大的空白灰色方块。我不确定您从哪里获得mbtiles信息。我试过从tilemill导出一些默认mbtile。
–割草机
15年10月28日在16:16
Tilelive似乎不再由mapbox维护。有其他选择/建议吗？
– mireille raad
19 Mar 20 '19在2:11