如何在MapBox GL JS中使用OpenMapTiles服務器？

Question

在OpenMapTiles的文檔中 ，據說它可以為MapBox GL JS提供矢量切片。

但是為兩個項目挖掘文檔我沒有找到一個選項：如何配置自托管MapBox GL JS庫以使用我自己托管的OpenMapTiles服務器中的切片？

Answer 1

我也可以成功使用Klokantech的tileserver-gl

但是，我真的想要一些比這更簡約的東西。 更小的東西，更適合我的智力低下。

碰巧在npm中有一個MBTiles模塊。 這使得設置節點tileserver非常容易。 我在這里和這里的博客中解釋它。 他們都是同一個博客。

這是服務器的js代碼（部分來自manuelroth的Git GIST ）。 我建議閱讀上面的博客（ 此處和此處 ），其中顯示了一個結合顯示和服務器端的簡約示例。 （通過查看示例可以避免一些問題）。

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);

Answer 2

您可以使用mapbox-gl-js服務器脫機示例 ，它有一個很好的示例來執行此操作。

Answer 3

如果您安裝https://openmaptiles.com/server/，您將獲得包含Mapbox GL JS本地副本在內的所有資產的自托管矢量圖塊地圖。

如果您單擊樣式旁邊的“查看器”按鈕，您將獲得一個示例查看器 - 即使沒有Internet連接也可以運行 - 使用本地矢量切片，本地資源和本地JavaScript。

這是開始開發應用程序的地方。