Mapbox - указатель при нажатии не определен - PullRequest
Новая
       69

Mapbox - указатель при нажатии не определен

0 голосов
/ 14 октября 2019

Я пытаюсь добавить всплывающее окно к значкам моей карты в Mapbox GL JS. До сих пор я был неудачным.

Когда я создаю слой, в данных слоя я указал несколько свойств. Однако, когда я пытаюсь добавить всплывающее окно к значку, все свойства отсутствуют. Попытка получить к ним доступ просто возвращает undefined.

Добавление слоя: 

function addRedAirports() {
    map.addSource('hoggitRed', {
        type: 'geojson',
        cluster: true,
        clusterMaxZoom: 14, // Max zoom to cluster points on
        clusterRadius: 10, // Radius of each cluster when clustering points (defaults to 50)
        data: redAirportArray[0]
    });
    map.addLayer({
        "id": 'reds',
        "type": "symbol",
        "source": "hoggitRed",
        "layout": {
            "icon-image": "redIcon",
            "icon-size": 0.075,
            "icon-anchor": "bottom",
            "icon-allow-overlap": true
        }
    });

Вот содержимое данных (redAirportArray [0]). Я перебираю API для получения этих данных.

Когда я передаю эти данные в mapbox, свойства становятся полными и правильными. Однако, когда я пытаюсь получить доступ к ним для всплывающего окна, я получаю неопределенный. В журнале консоли в слое mapbox не отображается ни одно из введенных свойств ..

(Я немного сокращал этот код ... каждый цикл я создаю элемент, а затем помещаю его в коллекцию элементов. Я объединилдва в этом фрагменте для простоты) 

let redAirportArray = [{
    "type": "FeatureCollection",
    "features": [{
    "type": "Feature",
    "properties": { //SETTING THE PROPERTIES
        "test": 'test',
        "ID": airportsRed[x].Id,
        "team": airportsRed[x].Coalition
    },
    "geometry": {
        "type": "Point",
        "coordinates": [airportsRed[x].LatLongAlt.Long, airportsRed[x].LatLongAlt.Lat]
    }
}]

Добавление всплывающего окна при нажатии 

map.on('click', 'reds', function (e) {
    var coordinates = e.features[0].geometry.coordinates.slice();
    let team = e.features[0].properties.ID;


    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
    coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }

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

Заранее спасибо, и я надеюсь, что вы можете помочь!

1 Ответ

0 голосов
/ 16 октября 2019

Учитывая способ добавления вашего слоя, вы ищете properties в неправильном месте. e.features[0] не определено, поскольку e - это функция, которую вы только что нажали. Ваш всплывающий код должен выглядеть примерно так: 

map.on('click', 'reds', function (e) {
    var coordinates = e.geometry.coordinates.slice(); // Changed
    let team = e.properties.ID; // Changed


    while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
    coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
    }

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