无法在 mapbox GL 上渲染矢量点

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 that has point data. A sample vector pbf from the server is: https://www.dropbox.com/s/m3f5pnt5rjcfxxw/test_table_13_4011_3088.pbf?dl=0

上托管一个 node-mapnik 服务器

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 上渲染矢量点

Unable to render vector points on mapbox GL

dictionary

mapbox

mapbox-gl