Изменить свойство рисования объектов при нажатии - PullRequest
Новая
       24

Изменить свойство рисования объектов при нажатии

0 голосов
/ 20 апреля 2019

Я использую mapbox-gl-js с угловым 7. Я использую карту, указанную в https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/.

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

Инициализациякарта: 

map = new mapboxgl.Map({
  style: 'mapbox://styles/mapbox/light-v10',
  center: center,
  zoom: 15.5,
  pitch: 45,
  bearing: -17.6,
  container: 'map'
});

и добавление зданий: 

map.on('load', function() {
  const layers = map.getStyle().layers;
  map.addSource('custom', {
    type: 'geojson',
    data: geojson
  });

  let labelLayerId;
  for (let i = 0; i < layers.length; i++) {
    if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
      labelLayerId = layers[i].id;
      break;
    }
  }
  map.addLayer({
    id: '3d-buildings',
    source: 'composite',
    'source-layer': 'building',
    filter: ['==', 'extrude', 'true'],
    type: 'fill-extrusion',
    minzoom: 15,
    paint: {
      'fill-extrusion-color': '#aaa',
      'fill-extrusion-height': [
        'interpolate', ['linear'], ['zoom'],
        15, 0,
        15.05, ['get', 'height']
      ],
      'fill-extrusion-base': [
        'interpolate', ['linear'], ['zoom'],
        15, 0,
        15.05, ['get', 'min_height']
      ],
      'fill-extrusion-opacity': .6
    }
  }, labelLayerId);
});

Моя цель изменить цвет одного здания, нажав на него AND чтобы получить информацию о центре здания .Я много копался в структуре этих зданий и отчаянно искал какой-то «указатель», в котором я мог бы различать здания.Первым делом я создал прослушиватель onclick карты, который возвращал бы точку e, к которой я обратился: 

map.on('click', function(e) {
    const features = map.queryRenderedFeatures(e.point);
});

Затем я перебираю найденные объекты и проверяю, есть ли здание под моим щелчком.Это здание затем сохраняется как const building.

Я пытался добавить use map.setPaintProperty: 

map.setPaintProperty('3d-buildings', 'fill-extrusion-color', [
        'match',
        ['get', 'id'], 
        building.id, '#fbb03b',
        /* other */ '#ccc'
      ]);

Но я заметил, что мне нужно будет найти какой-то уникальный идентификатор, который я в итоге дална.

Я также попытался добавить: 

'fill-extrusion': [
    'case',
    ['boolean', ['feature-state', 'clicked'], true],
    '#aaa',
    '#fbb03b'
]

вместе с: 

map.setFeatureState({source: '3d-buildings', id: building.id}, { clicked: true});

Где я также боролся из-за отсутствия уникального идентификатора.

Я копался в следующих свойствах: 

building.layer
building.properties
building.geometry
building._vectorTileFeature.properties
building._vectorTileFeature._pbf
building._vectorTileFeature._values

Тем не менее, даже если бы я нашел тот, который, казалось, соответствовал моим целям, я не знал бы, как покрасить все здание.

ВашПомощь будет очень признателен, спасибо заранее.

...