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

OpenLayers MVT图层和设置样式

1 个答案: