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()以触​​发具有更新样式的重新渲染。