4

MapboxGL JS を使用してブラウザーに表示されるベクター タイルを提供する Node.js で Web サーバーをセットアップしようとしています。ベクター タイルのデータは PostGIS データベースに保存されます。

ベクター タイルが読み込まれ、ブラウザーに表示されていることがわかるので、現在のセットアップは正しい方向に進んでいるようです。ただし、レンダリングされた結果は正しくありません (これは私のマップの一部のスクリーンショットです)。

間違ったタイル

緑の建物の足跡の上半分は、画像の下半分で繰り返されます。また、ズームインおよびズームアウト時に建物の位置が「変化」していることに気付きました。これは、タイルがオフセットまたは不適切な範囲でレンダリングされていることを示しています... インポートされたデータは 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());
        });
    });
}

カスタム ベクター データ ソースは、次のようにマップに含まれます。

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"
        }
    });
});
4

1 に答える 1

4

上記のコード例のマップは、不適切な空間参照系を使用しています。ベクター タイルはWeb メルカトル図法を使用しますが、mapnik マップは WGS84 で初期化されます。mercator.bboxメソッドとコンストラクターの両方に Web メルカトルを明示的に指定するとmapnik.Map、ベクター タイルはクライアントで正しくレンダリングされます。

var extent = mercator.bbox(options.x, options.y, options.z, false, '3857');

var map = new mapnik.Map(256, 256, '+init=epsg:3857');
于 2016-03-01T06:51:32.017 に答える