我想使用Mapbox GL渲染我从PostGIS请求生成的矢量切片。我为npm使用Mapnik,sphericalmecator和pg插件构建了一个tile服务器。我将tile端点添加到Mapbox GL的样式表中,并确认请求了正确的tile,但是tile不会在地图上呈现。我使用相同的后端作为传单插件,它工作正常,所以我不确定我必须改变后端。任何建议表示赞赏。代码如下。
这是我正在加载的index.html文件。
var map = new mapboxgl.Map({
container: 'map',
style: 'outdoors-v7.json',
center: [47.4333, 19.2500],
zoom: 9
});
map.on('style.load', function() {
map.addSource("parcelLayer", {
"type": "vector",
"tiles": ["http://localhost:5001/data/city/lots/budapest/{z}/{x}/{y}.pbf"],
});
map.addLayer({
"id": "parcelLayer",
"type": "fill",
"source": "parcelLayer",
"layout": {
"visibility": "visible"
},
"paint": {
"fill-color": '#ff0000',
"fill-opacity": 1
}
});
});
这是地图正在呼叫的路线。
var express = require('express');
var router = express.Router();
var conString = require('../../database').conString;
var pg = require('pg');
var SphericalMercator = require('sphericalmercator');
var mapnik = require('mapnik');
var zlib = require('zlib');
mapnik.register_default_fonts();
mapnik.register_default_input_plugins();
var mercator = new SphericalMercator({
size: 256
});
router.get('/:city_name/:z/:x/:y.pbf', function(req, res) {
var city_name = req.params.city_name;
var bbox = mercator.bbox(
+req.params.x,
+req.params.y,
+req.params.z,
false,
'4326'
);
pg.connect(conString, function(err, client, done){
var config_object = {
'medellin' : {
'attributes': ['cobama', 'subtipo_lote', 'tipo_lote', 'estrato', 'zona', 'usopredial', 'npisos', 'calificacion']
},
'lima' : {
'attributes': ['objectid', 'id_lote', 'tip_uso', 'id_dist', 'estado']
},
'budapest': {
'attributes': ['id', 'tags']
}
};
var handleError = function(err) {
// no error occurred, continue with the request
if(!err) return false;
// An error occurred, remove the client from the connection pool.
// A truthy value passed to done will remove the connection from the pool
// instead of simply returning it to be reused.
// In this case, if we have successfully received a client (truthy)
// then it will be removed from the pool.
if(client){
done(client);
}
console.log(err);
// res.writeHead(500, {'content-type': 'text/plain'});
// res.end('An error occurred');
return true;
};
// handle an error from the connection
if(handleError(err)) return;
if(city_name === 'medellin' || city_name === 'lima' || city_name === 'budapest'){
client.query('SELECT row_to_json(fc) FROM ( SELECT "FeatureCollection" As type, array_to_json(array_agg(f)) As features FROM (SELECT 'Feature' As type, ST_AsGeoJSON(lg.wkb_geometry)::json As geometry, row_to_json((SELECT l FROM (SELECT ' + config_object[city_name]['attributes'].join(', ') + ' ) As l )) As properties FROM ' + city_name + '_parcels As lg WHERE st_intersects(lg.wkb_geometry, st_makeenvelope(' + bbox.toString() + ', 4326) ) ) As f ) As fc', function(err, result){
if (err) {
console.log('error in the query');
return console.error('error running query', err);
}
// handle an error from the connection
if(handleError(err)) return;
var vtile = new mapnik.VectorTile(+req.params.z, +req.params.x, +req.params.y);
if( (typeof result.rows[0] !== 'undefined') && (result.rows[0].row_to_json.features !== null )){
try {
vtile.addGeoJSON(JSON.stringify(result.rows[0].row_to_json), 'lots');
console.log(result.rows[0].row_to_json.features[0]);
} catch (e) {
console.log('came back with an error');
console.log(e);
}
}
res.setHeader('Content-Encoding', 'deflate');
res.setHeader('Content-Type', 'application/x-protobuf');
zlib.deflate(vtile.getData(), function(err, pbf) {
done();
// res.writeHead(200);
res.send(pbf);
});
});
}
});
});
请询问您可能遇到的任何其他问题。