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 地理服务器是 2.11

我得到了我尝试与之交互的层的良好表示，但绝对没有基于逐个特征的动态样式。尽管帖子另有建议，但我看不出我可以动态地做到这一点。还有一些帖子建议您不能在 MVT 层上的功能上设置样式，但没有引用它的文档。我没有收到任何错误，我已经对上面的代码做了相当多的简化以使其易于查看，但是 jsfiddle 需要一个实时的 MVT 层，我无法生成并且不知道它在哪里。

选择交互确实为我提供了一个很好的活动和非活动功能列表。如果你不能让它显示选择的内容，那有什么意义呢？

Answer 1

ol.layer.VectorTile 不监听功能的样式更改，因为它经过优化以使用具有 ol.render.Feature 功能而不是 ol.Feature 的源。因此，无论何时更改功能样式，都必须调用 huclayer.changed() 以触发使用更新后的样式重新渲染。

OpenLayers MVT 层和设置样式

OpenLayers MVT layers and setting a style

javascript

geospatial

openlayers