Как отобразить несколько свойств geojson во всплывающем окне с помощью Mapbox-GL? - PullRequest
Новая
       8

Как отобразить несколько свойств geojson во всплывающем окне с помощью Mapbox-GL?

0 голосов
/ 17 февраля 2019

Я пытаюсь отобразить два свойства из файла геойсона во всплывающем окне на карте с точками.

Вот пример одного элемента из файла геойсона: 

{ "type": "Feature", "properties": { "LONG": 144.760809, "LAT": -37.866606, "STOP_ID": 19924, "STOP_NAME": "Aircraft  ", "2016_17_PATRONAGE": 294702, "2016_17_PATRONAGE_DAILY": 805.2, "METRO": "Yes" }, "geometry": { "type": "Point", "coordinates": [ 144.760809, -37.866606 ] } },

Я пытаюсь отобразить атрибуты STOP_NAME и 2016_17_PATRONAGE_DAILY в одном и том же всплывающем окне.

Я пытался просмотреть этот пример и этот пример , но ни один из подходов не работает.

Это мой код (работает): 

map.on('click', 'layername', function (e) {
    var coordinates = e.features[0].geometry.coordinates.slice();
    var name = e.features[0].properties.STOP_NAME;

    new mapboxgl.Popup()
    .setLngLat(coordinates)
    .setHTML(name)
    .addTo(map);
});

Я пробовал этот код, используя приведенные выше примеры: 

map.on('click', 'layername', function (e) {
    var coordinates = e.features[0].geometry.coordinates.slice();
    var name = e.features[0].properties.STOP_NAME;
    var patronage = e.features[0].properties.2016_17_PATRONAGE;

    new mapboxgl.Popup()
    .setLngLat(coordinates)
    .setHTML(name) + ' (' + properties.2016_17_PATRONAGE + ')')
    .addTo(map);
});

Это не сработалои я получил сообщение: «SyntaxError: идентификатор начинается сразу после числового литерала»

Я довольно новичок в Mapbox-GL-JS, поэтому буду признателен за любую помощь.

1 Ответ

0 голосов
/ 18 февраля 2019

Ты так близко.Просто измените эту строку setHTML, чтобы включить выражение, которое ссылается на оба свойства: 

.setHTML(e.features[0].properties.STOP_NAME + ' (' + e.feature[0].properties.2016_17_PATRONAGE + ')')

Для удобства я обычно делаю: 

var p = e.features[0].properties;

Так что это будет: 

.setHTML(p.STOP_NAME + ' (' + p.2016_17_PATRONAGE + ')')
...