Question

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

我收到一个geojson文件，并对其进行处理，以创建带有下一个句子的数据库：CREATE TABLE IF NOT EXISTS countries ( table_id SERIAL, properties jsonb not null, geom geometry(GeometryZ,4326), primary key (table_id));

我的当前设置似乎朝着正确的方向发展，因为我可以看到矢量图块正在加载并显示在浏览器中。但是，渲染结果不正确（这是我的地图的一部分的屏幕截图）：

呈现错误的内容是什么？

代码如下：

var express = require('express');
var SphericalMercator = require('sphericalmercator');
var mercator = new SphericalMercator({
    size: 256 //tile size
});

const { pool } = require('../postgressql/config');

var app = express();

app.get('/:namelayer/:z/:x/:y.pbf', (req, res, next) => {
    var options = {
        x: parseInt(req.params.x),
        y: parseInt(req.params.y),
        z: parseInt(req.params.z),
        layerName: req.params.namelayer
    };
    const bbox = mercator.bbox(options.x, options.y, options.z, false, '3857');
    const sql = `
        SELECT ST_AsMVT(q, '${options.layerName}', 4096, 'geom')
        FROM (
            SELECT
                table_id, properties,
                ST_AsMVTGeom(
                    geom,
                    ST_MakeEnvelope(${bbox[0]}, ${bbox[1]}, ${bbox[2]}, ${bbox[3]}, 4326),
                    4096,
                    256,
                    false
                ) AS geom
            FROM ${'public.'+options.layerName} c
        ) q;
    `;

    try {
        pool.query(sql, (error, results) => {
            if (error) {
                return res.status(500).json({
                    ok: false,
                    message: error
                });
            }

            const tile = results.rows[0];
            // set the response header content type
            res.setHeader('Content-Type', 'application/x-protobuf');

            // trigger catch if the vector tile has no data, (return a 204)
            if (tile.st_asmvt.length === 0) {
                res.status(204);
            }  

            // send the tile!
            res.send(tile.st_asmvt);
        });
    } catch (e) {
        res.status(404).send({
            error: e.toString(),
        });
    }
});


module.exports = app;

我遵循了来自这些站点的想法：

Answer 1

很明显，您遇到投影问题。看起来黑色叠加层在垂直方向上比底图更向两极延伸，并且向北偏移。

要确定问题出在哪里很难说，因为您没有包含客户端代码。矢量图块可能会在EPSG：3857投影中完美呈现，但是您将它们叠加在稍微不同的投影上（也许EPSG：3785）。

您已禁用ST_AsMVTGeom的{{1}}参数这一事实也表明您的边界框计算不正确，您正在解决该问题。

在gis.stackexchange.com上发布问题可能会得到更好的答案

为什么MapboxGL Client的服务器矢量磁贴呈现不正确

1 个答案: