ol.interaction.Select дает ошибку на ol.source.VectorTile

Question

Я пытаюсь изменить стиль функции в слое VectorTile после ее выбора. Однако в первый раз выберите взаимодействие запускается консоль выдает сообщение об ошибке:

Uncaught TypeError: feature.getId is not a function 
at ol.source.Vector.addToIndex_ (ol-debug.js:66819) 
at ol.source.Vector.addFeatureInternal (ol-debug.js:66772) 
at ol.source.Vector.addFeature (ol-debug.js:66759) 
at ol.source.Vector.<anonymous> (ol-debug.js:66919) 
at ol.Collection.boundListener (ol-debug.js:3441) 
at ol.Collection.ol.events.EventTarget.dispatchEvent (ol-debug.js:3859) 
at ol.Collection.insertAt (ol-debug.js:12466) 
at ol.Collection.push (ol-debug.js:12490) 
at ol.Collection.extend (ol-debug.js:12402) 
at ol.interaction.Select.handleEvent (ol-debug.js:70163) 

Я работал мой путь через код и понял, что преступник, вероятно, что функция под select случае не является ol.Feature но ol.render.Feature. У последнего нет функции getId(). Однако после первого раза modifyingCollection устанавливается как истина, и функция выбора работает, но новый стиль выбора никогда не устанавливается.

Есть ли другой способ выбора функций из файла ol.source.VectorTile, который не вызывает эту ошибку?

соответствующий код:

var select = new ol.interaction.Select({ 
    condition: ol.events.condition.click, 
    multi: false, 
    style: new ol.style.Style({ 
     fill: new ol.style.Fill({ 
      color: 'rgba(200,255,255,0.5)' 
     }) 
    }) 
}); 

map.addInteraction(select); 
    select.on('select', function(e) { 
     var features = e.target.getFeatures(); 
     features.forEach(function(feature) { 
      var props = feature.getProperties(); 
      console.log(props) 
     }) 
    }); 

var bagpanden = new ol.layer.VectorTile({ 
     source: new ol.source.VectorTile({ 
      attributions: 'BAG data: © <a href="https://www.kadaster.nl/bag">Kadaster</a> ' + 
      'Client: <a href="https://research.geodan.nl/">' + 
      'Geodan Research</a>', 
      format: new ol.format.MVT(), 
      tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}), 
      tilePixelRatio: 1.000000001, 
      url: 'http://research.geodan.nl/service/geoserver/gwc/service/tms/1.0.0/research%3Apand@World_3857@pbf/' + 
      '{z}/{x}/{-y}.pbf' 
     }), 
     style: createStyle() 
    }); 

Answer 1

Вы можете настроить ol.format.MVT создать ol.Feature экземпляры вместо ol.render.Feature. Это позволит сделать разбор немного медленнее, но даст вам предлагается с помощью метода getId():

format: new ol.format.MVT({ 
    featureClass: ol.Feature 
}) 

отметить также, что ol.interaction.Select не позволит выделить функции на векторном слое плитки. Вместо этого используйте Map#forEachFeatureAtPixel. Вы можете поддерживать литерал объекта или массив выделенных идентификаторов объектов и ссылаться на этот объект или массив в своей функции стиля, чтобы стиль отличался по-разному.

Если вы хотите создать запрос на растяжение: добавление метода getId() к ol.render.Feature было бы приятным дополнением.