2017-02-07 30 views
1

我試圖改變VectorTile圖層中一個特徵的樣式,一旦它被選中。然而在第一次選擇交互觸發控制檯報告一個錯誤:ol.interaction.Select在ol.source.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被設置爲true並且選擇功能起作用,但是新的選擇樣式從未被設置。

是否有不同的方式從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%[email protected][email protected]/' + 
      '{z}/{x}/{-y}.pbf' 
     }), 
     style: createStyle() 
    }); 

回答

2

您可以配置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將是一個值得歡迎的改進。