Невозможно отобразить векторные точки на карте map GL - PullRequest
Новая
       11

Невозможно отобразить векторные точки на карте map GL

3 голосов
/ 12 апреля 2019 
<!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>

Я размещаю сервер node-mapnik на 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

Чтение файла protobuf с использованием https://github.com/mapbox/vector-tile-js Я получаю следующее: 

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, что он правильно отображает растр, поэтому должно быть что-то, что я не делаю правильно

1 Ответ

1 голос
/ 16 апреля 2019

Разобрался с ответом, оказалось, что я динамически установил Id слоя прямо перед тем, как он получит вывод из узла.

Запрос закрытия этого SO, так как он не может никому помочь в будущем

...