为MapboxGL客户端自行托pipe的vector切片呈现不正确

我正在尝试在Node.js中设置一个Web服务器，该服务器使用MapboxGL JS提供要在浏览器中显示的vector图块。 vector图块的数据存储在PostGIS数据库中。

我目前的设置似乎正确的方向，因为我可以看到vector瓷砖被加载和显示在浏览器中。 然而，渲染的结果是不正确的（这是我的地图的一个截图）：

绿色build筑脚印的上半部分重复在图像的下半部分。 我还注意到，在放大和缩小时，build筑物会发生“变化”的位置，这表明某种程度上，这些贴图会被渲染为偏移量或不正确的程度。导入的数据位于SRID 4326中。

这是我的代码：

var zlib = require('zlib'); var express = require('express'); var mapnik = require('mapnik'); var Promise = require('promise'); var SphericalMercator = require('sphericalmercator'); var mercator = new SphericalMercator({ size: 256 //tile size }); mapnik.register_default_input_plugins(); var app = express(); app.get('/vector-tiles/:layerName/:z/:x/:y.pbf', function(req, res) { var options = { x: parseInt(req.params.x), y: parseInt(req.params.y), z: parseInt(req.params.z), layerName: req.params.layerName }; makeVectorTile(options).then(function(vectorTile) { zlib.deflate(vectorTile, function(err, data) { if (err) return res.status(500).send(err.message); res.setHeader('Content-Encoding', 'deflate'); res.setHeader('Content-Type', 'application/x-protobuf'); res.send(data); }); }); }); function makeVectorTile(options) { var extent = mercator.bbox(options.x, options.y, options.z, false, '4326'); var map = new mapnik.Map(256, 256); map.extent = extent; var layer = new mapnik.Layer(options.layerName); layer.datasource = new mapnik.Datasource({ type: 'postgis', dbname: 'databasename', table: options.layerName, user: 'username', password: 'password' }); layer.styles = ['default']; map.add_layer(layer); return new Promise(function (resolve, reject) { var vtile = new mapnik.VectorTile(parseInt(options.z), parseInt(options.x), parseInt(options.y)); map.render(vtile, function (err, vtile) { if (err) return reject(err); resolve(vtile.getData()); }); }); } 

自定义vector数据源包含在地图中，如下所示：

 var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/light-v8', zoom: 10, center: [13.739910, 51.051151] }); map.on('style.load', function () { map.addSource('local', { type: 'vector', tiles: ["http://localhost:3333/vector-tiles/building/{z}/{x}/{y}.pbf"] }); map.addLayer({ "id": "park", "source": "local", "type": "fill", "source-layer": "building", "paint": { "fill-color": "#5DC73A" } }); }); 

Answer 1

上述示例代码中的地图使用了不正确的空间参考系统。 vector图块使用Web墨卡托投影 ，但mapnik地图在WGS84中初始化。 当向mercator.bbox方法和mapnik.Map构造函数明确提供web mercator时，vector图块将在客户端中正确呈现：

 var extent = mercator.bbox(options.x, options.y, options.z, false, '3857'); var map = new mapnik.Map(256, 256, '+init=epsg:3857');