Question

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>

<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoic2x5IiwiYSI6IjdiYzFmZmY5NTExOTQ0MTExMGVhZDBkZTIwMmRlYjJhIn0.hOz2brurCBMGWGU5EI-waQ';

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v10',
    center: [-3.69964599609375, 40.417874374140474], // starting position [lng, lat]
    zoom: 13 // starting zoom
});

map.on('load', function () {
    map.addLayer({
        'id': 'population',
        'type': 'circle',
        'source': {
                    "type": "vector",
                    "tiles": ["http://localhost:4000/windwalker_test/tiles/test_table/{z}/{x}/{y}.pbf"]

        },
        'source-layer': 'defaultLayer',
        'paint': {
            'circle-color': 'red'
        }
    });
});



</script>

</body>
</html>

我正在http://localhost:4000上托管一个具有点数据的节点映射服务器。来自服务器的样本矢量pbf为：https://www.dropbox.com/s/m3f5pnt5rjcfxxw/test_table_13_4011_3088.pbf?dl=0

将其渲染为栅格的Mapnik是这样的：https://i.imgur.com/JDH0lQV.png

使用https://github.com/mapbox/vector-tile-js读取protobuf文件，我得到以下信息：

VectorTile {
    layers: {
        defaultLayer: VectorTileLayer {
            version: 2,
            name: 'defaultLayer',
            extent: 4096,
            length: 5,
            _pbf: {
                buf: < Buffer 1 a cc 03 78 02 0 a 0 c 64 65 66 61 75 6 c 74 4 c 61 79 65 72 28 80 20 1 a 07 61 64 64 72 65 73 73 22 2 a 0 a 28 43 61 6 c 6 c 65 20 64 65 20 50 c3 a9 72 65 7 a... > ,
                pos: 463,
                type: 2,
                length: 463
            },
            _keys: ['address', 'cartodb_id', 'name'],
            _values: ['Calle de Pérez Galdós 9, Madrid, Spain',
                1,
                'Hawai',
                'Calle de la Palma 72, Madrid, Spain',
                2,
                'El Estocolmo',
                'Plaza Conde de Toreno 2, Madrid, Spain',
                3,
                'El Rey del Tallarín',
                'Manuel Fernández y González 8, Madrid, Spain',
                4,
                'El Lacón',
                'Calle Divino Pastor 12, Madrid, Spain',
                5,
                'El Pico'
            ],
            _features: [107, 187, 278, 366, 443]
        }
    }
}

该信息似乎是正确的。但是，当我查看这些点所在的地图时，看不到它们。我想念什么？

我已经尝试过type: line和type: fill并使用line-color和fill-color。我也和circle-radius一起玩，没有运气

如果您更改扩展范围，则mapnik服务器将生成png或pbf，因此我已经确认，在使用type：raster并指定png时，它将正确呈现栅格，因此一定有我做错的事情

Answer 1

想出了答案，原来我在从节点输出之前就动态设置了层ID。

请求关闭此SO，因为它将来无法帮助任何人

无法在mapbox GL上渲染矢量点

1 个答案: