OpenLayers MVT 图层和设置样式答案

【问题标题】：OpenLayers MVT layers and setting a styleOpenLayers MVT 图层和设置样式
【发布时间】：2017-10-01 14:33:25
【问题描述】：

如何在 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 层，我无法生成并且不知道一个人住在哪里。

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

【问题讨论】：

标签： javascript geospatial openlayers

【解决方案1】：

ol.layer.VectorTile 不会监听功能上的样式更改，因为它已针对具有ol.render.Feature 功能而不是ol.Feature 的源进行了优化。因此，每当您更改特征样式时，您都必须调用 huclayer.changed() 以触发使用更新后的样式重新渲染。

【讨论】：