OpenLayers MVT 圖層和設置樣式

Question

如何在 MVT 切片圖層中的要素上設置要素樣式？

我嘗試了大量在 geoJSON 層上工作的東西（就像我只是簡單地更改為 geoJSON），但 MVT 等效項並不好，因為 geoJSON 層是 89MB 而 MVT 是 3MB。

這是我所做的：

 var stySimple = new ol.style.Style({ fill: new ol.style.Fill({ color: 'transparent' //#ADD8E6' }), stroke: new ol.style.Stroke({ color: '#880000', width: 1 }) }); var styleClick = new ol.style.Style({ fill: new ol.style.Fill({ color: '#ADD8E6' }), stroke: new ol.style.Stroke({ color: '#008800', width: 2 }) }); var layer = 'aw:gis_hucs'; var huclayer = new ol.layer.VectorTile({ style: stySimple, source: new ol.source.VectorTile({ tilePixelRatio: 1, // oversampling when > 1 tileGrid: ol.tilegrid.createXYZ({ maxZoom: 19 }), format: new ol.format.MVT({featureClass: ol.Feature}), url: 'http://geo.host.org:8080/geoserver/gwc/service/tms/1.0.0/' + layer + '@EPSG%3A' + projection_epsg_no + '@pbf/{z}/{x}/{-y}.pbf' }) }); var map = new ol.Map({ target: 'map', layers: [ huclayer ], view: new ol.View({ center: ol.proj.fromLonLat([-84.32470703125, 33.8799896240234]), zoom: 7 }) }); hoverInteraction = new ol.interaction.Select({ condition: ol.events.condition.pointerMove, layers: [huclayer], style: styleClick /****** NO BUENO 1 */ }); map.on('click', function(e) { var features = []; map.forEachFeatureAtPixel(e.pixel, function(feature, layer) { features.push(feature); }); features.forEach(function(cv) { cv.setStyle(styleClick); /****** NO BUENO 2 */ } ); }); map.addInteraction(hoverInteraction); hoverInteraction.on('select', function(e) { if (e.deselected) e.deselected.forEach(function(cv) { cv.setStyle(null); }); if (e.selected) e.selected.forEach(function(cv) { cv.setStyle(styleClick); /****** NO BUENO 3 */ }); console.log(e); });

我非常沮喪，沮喪和沮喪。 您應該如何設置 MVT 圖層上要素的樣式？

OL 是 4.1.12 Geoserver 是 2.11

我得到了我試圖與之交互的層的良好表示，但絕對沒有逐個特征的動態樣式。 盡管帖子另有建議，但我認為我無法動態地做到這一點。 還有一些帖子建議您不能在 MVT 層上的功能上設置樣式，但沒有引用它的文檔。 我沒有收到任何錯誤，我已經對上面的代碼進行了大量簡化以使其易於查看，但是 jsfiddle 需要一個實時 MVT 層，我無法生成該層，並且不知道該層位於何處。

選擇交互確實給了我一個很好的活動和非活動功能列表。 如果您不能讓它顯示所選內容，那有什么意義呢？

Answer 1

ol.layer.VectorTile不偵聽特征的樣式更改，因為它經過優化以處理具有ol.render.Feature特征而不是ol.Feature 。 因此，無論何時更改特征樣式，都必須調用huclayer.changed()以觸​​發具有更新樣式的重新渲染。