如何在沒有樣式函數的情況下動態設置集羣層的樣式

Question

如何在Openlayers 3中將集羣層的樣式定義爲ol.style.Style對象而不是函數？

我正在使用僅接受ol.style.Style對象進行造型的庫（ol3-google-maps）。該official cluster example使用樣式功能，在每個集羣特徵的數量動態地添加到它的圖標：

style: function(feature, resolution) { 
    console.log(feature); 
    var size = feature.get('features').length; 
    var style = styleCache[size]; 
    if (!style) { 
    style = [ 
     new ol.style.Style({ 
     image: new ol.style.Circle({ 
      radius: 10, 
      stroke: new ol.style.Stroke({ 
      color: '#fff' 
      }), 
      fill: new ol.style.Fill({ 
      color: '#3399CC' 
      }) 
     }), 
     text: new ol.style.Text({ 
      text: size.toString(), 
      fill: new ol.style.Fill({ 
      color: '#fff' 
      }) 
     }) 
     }) 
    ]; 
    styleCache[size] = style; 
    } 
    return style; 
} 

Answer 1

OL3風格的功能是偉大的，當風格取決於特徵的某些屬性，如子功能的數量一個集羣。沒有其他方式可以在樣式中使用動態屬性。

您可以對羣集層使用不依賴於羣集大小（不顯示功能數量）的通用樣式，如this example。

但是，您也可以爲每個要素設置非動態樣式，而不是每個圖層。這種風格可以根據它的屬性來計算，給你一些風格功能的可能性。

This example是不使用普通樣式函數的官方示例的修改。相反，它會監聽羣集源的addfeature和changefeature事件，並根據其屬性自身的屬性設置樣式（請參閱下面的代碼）。

這不是說這不是一個通用的解決方案或樣式函數的替代品，儘管它對羣集來源應該可以很好地工作。值得注意的是，你失去了基於分辨率生成樣式的可能性。如果該功能被其他圖層使用，則可能不希望將樣式設置爲功能。您還必須考慮性能問題。

var styleCache = {}; 
var styleFunctionIsChangingFeature = false 
var styleFunction = function (evt) { 
    if (styleFunctionIsChangingFeature) { 
     return; 
    } 
    var feature = evt.feature; 
    var size = feature.get('features').length; 
    var style = styleCache[size]; 
    if (!style) { 
     style = new ol.style.Style({ 
      image: new ol.style.Circle({ 
       radius: 10, 
       stroke: new ol.style.Stroke({ 
        color: '#fff' 
       }), 
       fill: new ol.style.Fill({ 
        color: '#3399CC' 
       }) 
      }), 
      text: new ol.style.Text({ 
       text: size.toString(), 
       fill: new ol.style.Fill({ 
        color: '#fff' 
       }) 
      }) 
     }); 
     styleCache[size] = style; 
    } 
    styleFunctionIsChangingFeature = true 
    feature.setStyle(style); 
    styleFunctionIsChangingFeature = false 
}; 

clusterSource.on('addfeature', styleFunction); 
clusterSource.on('changefeature', styleFunction);