javascript - 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.功能。因此，无论何时更改要素样式，都必须调用 huclayer.changed() 以触发使用更新样式的重新渲染。