如何为 MapBox GL JS 使用 OpenMapTiles 服务器？答案

【问题标题】：How to use OpenMapTiles server for MapBox GL JS?如何为 MapBox GL JS 使用 OpenMapTiles 服务器？
【发布时间】：2018-02-03 22:50:52
【问题描述】：

在 OpenMapTiles 的docs 中，据说它可以为 MapBox GL JS 提供矢量图块。

但是为这两个项目挖掘文档我没有找到一个选项：如何配置自托管 MapBox GL JS 库以使用我自托管 OpenMapTiles 服务器中的图块？

【问题讨论】：

标签： javascript mapbox mapbox-gl-js openmaptiles

【解决方案1】：

我也用了能够成功使用Klokantech的tileserver-gl

但是，我真的想要比这更简约的东西。更小更适合我低智商的东西。

碰巧在 npm 中有一个 MBTiles 模块。这使得设置节点 tileserver 变得非常容易。我在博客中解释 here 和 here。他们都是同一个博客。

这是服务器的 js 代码（部分借自 manuelroth 的 this Git GIST）。我建议阅读上面的博客（here 和 here），它展示了一个结合了显示和服务器端的极简示例。（有一些问题可以通过查看示例来避免）。

var express = require("express"),
    app = express(),
    MBTiles = require('mbtiles'),
    p = require("path");


// Enable CORS and set correct mime type/content encoding
var header = {
  "Access-Control-Allow-Origin":"*",
  "Access-Control-Allow-Headers":"Origin, X-Requested-With, Content-Type, Accept",
  "Content-Type":"application/x-protobuf",
  "Content-Encoding":"gzip"
};

// Serve the fonts as static files
//app.use('/fonts', express.static('fonts'))
app.use('/fonts', express.static('fonts', {
    setHeaders: function setHeaders(res, path, stat) {
        res.header('Access-Control-Allow-Origin', '*');
        res.header('Access-Control-Allow-Methods', 'GET');
        res.header('Access-Control-Allow-Headers', 'Content-Type');
    }
}))

app.use('/sprite', express.static('sprite', {
    setHeaders: function setHeaders(res, path, stat) {
        res.header('Access-Control-Allow-Origin', '*');
        res.header('Access-Control-Allow-Methods', 'GET');
        res.header('Access-Control-Allow-Headers', 'Content-Type');
    }
}))


// Route which handles requests like the following: /<mbtiles-name>/0/1/2.pbf
app.get('/:source/:z/:x/:y.pbf', function(req, res) {
    console.log('req.params.source : ' + req.params.source)
    console.log('MBTiles file : ' +  p.join(__dirname, req.params.source + '.mbtiles'))
    console.log(req.params.z + '/' + req.params.x + '/' + req.params.y)
  new MBTiles(p.join(__dirname, req.params.source + '.mbtiles'), function(err, mbtiles) {
    mbtiles.getTile(req.params.z, req.params.x, req.params.y, function(err, tile, headers) {
      if (err) {
        res.set({"Content-Type": "text/plain"});
        res.status(404).send('Tile rendering error: ' + err + '\n');
      } else {
        res.set(header);
        res.send(tile);
      }
    });
    if (err) console.log("error opening database");
  });
});

// Starts up the server on port 3000
console.log('__dirname : ' + __dirname)
console.log('command line args:')
process.argv.forEach(function (val, index, array) {
  console.log(index + ': ' + val);
});
console.log('Listening on port: ' + 3000);
app.listen(3000);

【讨论】：

太棒了！但我仍然无法得到一件事：如何告诉 mapbox 客户端从我的服务器获取图块，而不是从 mapbox
@Terion - 您的问题的答案可以在here 和here 找到，它们是同一个博客。该博客显示了显示端的完整代码和设置文件。 ------ osm-bright-gl-style,json 修改为："sources": { "openmaptiles": { "type": "vector", "tiles":["http://localhost:3000/tiles/{z}/{x}/{y}.pbf"], "maxzoom": 14 } },。

【解决方案2】：

你可以使用mapbox-gl-js server offline example，它有一个很好的例子来做到这一点。

【讨论】：

【解决方案3】：

如果您安装 https://openmaptiles.com/server/，您将获得一个自托管的矢量瓦片地图，其中包含所有资产，包括 Mapbox GL JS 的本地副本。

如果您单击样式旁边的“查看器”按钮，您将获得一个示例查看器 - 即使没有互联网连接也可以运行 - 使用本地矢量图块、本地资源和本地 JavaScript。

这是开始开发应用程序的地方。

【讨论】：