स्व MapboxGL क्लाइंट को गलत तरीके से गाया के लिए वेक्टर टाइलें की मेजबानी की

वोट
3

मैं Node.js में एक वेब सर्वर है कि वेक्टर टाइल्स में कार्य करता है एक ब्राउज़र MapboxGL जे एस का उपयोग करने में प्रदर्शित करने के लिए स्थापित करने के लिए कोशिश कर रहा हूँ। वेक्टर टाइल्स के लिए डेटा एक 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
        }
    });
});
26/02/2016 को 03:28
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


1 जवाब

वोट
3

ऊपर के उदाहरण कोड में नक्शा एक गलत स्थानिक संदर्भ प्रणाली का उपयोग करता है। वेक्टर टाइल्स का उपयोग वेब मरकेटर प्रक्षेपण , लेकिन mapnik मानचित्र WGS84 में initialised है। जब स्पष्ट रूप से दोनों के लिए वेब मर्केटर उपलब्ध कराने के mercator.bboxविधि और mapnik.Mapनिर्माता, वेक्टर टाइल्स ग्राहक में सही ढंग से प्रस्तुत करना:

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

var map = new mapnik.Map(256, 256, '+init=epsg:3857');
01/03/2016 को 04:51
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more