Слой идентификатора Mapbox не может быть выбран - PullRequest
Новая
       8

Слой идентификатора Mapbox не может быть выбран

0 голосов
/ 19 сентября 2018

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

map.addLayer({
  "id": "circle",
  "type": "circle",
  "source": "companies",
  "paint": {
     "circle-radius": 20,
     "circle-color": "#C6DB3E",
     "circle-opacity": {
        "stops": [[3, 0.1], [22, 0.8]]
     }
  }
});

И здесь я выбираю этот слой для запуска всплывающего окна: 

map.on('click', function (e) {
var features = map.queryRenderedFeatures(e.point, {
  layers: ["circle"]
});

if (!features.length) {
  return;
}

var feature = features[0];

console.log(feature);

// Populate the popup and set its coordinates and content
var popup = new mapboxgl.Popup()
  .setLngLat(feature.geometry.coordinates)
  .setHTML('...')
  .addTo(map);
});

Но проблема возникает, когда я изменил слой, чтобы использовать динамический радиус круга,и слой теперь выглядит так: 

map.addLayer({
  "id": "circle",
  "type": "circle",
  "source": "companies",
  "paint": {
     "circle-radius": {
        property: 'Size',
        type: 'identity'
     },
     "circle-color": "#C6DB3E",
     "circle-opacity": {
        "stops": [[3, 0.1], [22, 0.8]]
     }
  }
});

Эти слои также правильно печатаются на карту.Но я не могу нажать на него, чтобы получить всплывающее окно.Таким образом, после изменения радиуса круга, ID не кликабелен.Забавно, что если я укажу идентификаторы консоли с помощью map.getStyle (). Layer, идентификатор появится в консоли со всеми другими слоями.Нет ошибок.

Ответы [ 2 ]

0 голосов
/ 29 сентября 2018

Я обновил mapbox, и он работал нормально, с кодом, который я написал в вопросе.Я также попробовал то, что вы предложили, и это тоже работает.Спасибо @Eczajk!В конце я получил этот код для радиуса круга: 

"circle-radius": {
        property: 'Size',
        type: 'exponential',
        stops: [
           [4, 4],
           [170, 170]
        ]
     }

И вот объясненный пример: https://www.mapbox.com/help/gl-dds-map-tutorial/

0 голосов
/ 19 сентября 2018

Синтаксис стиля для circle-radius недопустим.См. Спецификация стиля Mapbox для выражений или этот другой ответ .

Также: Вы можете упростить обработчик щелчков, предоставив id изслой в качестве второго параметра: 

map.on('click', 'circle', function (e) {

  var features = e.features;

  if (!features.length) {
    return;
  }

  var feature = e.features[0];
  var popup = new mapboxgl.Popup()
    .setLngLat(feature.geometry.coordinates)
    .setHTML(feature.properties.someProperty)
    .addTo(map);
});

Mapbox имеет пример этого на своем сайте: https://www.mapbox.com/mapbox-gl-js/example/popup-on-click/

...