Open Layers Clusteringで最小クラスタサイズを指定する

Question

OpenLayers 3では、5つのマップマーカー以下のクラスタがクラスタ化されず、代わりに個々のマップマーカーを表示するように最小クラスタサイズを指定するにはどうすればよいですか？クラスタ層のol.layer.Vectorオブジェクト内でこれを行う方法はありますか？

let clusterSource = new ol.source.Cluster({ 
    distance: CLUSTER_DISTANCE, 
    source: features 
}); 
let clusterLayer = new ol.layer.Vector({ 
    source: source, 
    style: function(feature, resolution) { } 
}); 

Answer 1

コードにはいくつの機能があるかチェックインできます。あまりにも多い場合は、すでに追加したベクトルソースに基づいて新しいベクトルレイヤーにクラスターソースを作成することができます。そうでない場合は、既存のベクターソースでベクターレイヤーを作成することができます。

ソースをレイヤーに動的に設定する方法がないため、ベクターレイヤーを目的のソースで作成する必要があります。 5つ以上の機能でどのように動作するかを見たい場合は、コメント行のコメントを外してください。

var features = [ 
 
    new ol.Feature({ 
 
    \t geometry: new ol.geom.Point([0,0]) 
 
    }), 
 
    new ol.Feature({ 
 
    \t geometry: new ol.geom.Point([100000,500000]) 
 
    }), 
 
    new ol.Feature({ 
 
    \t geometry: new ol.geom.Point([500000,100000]) 
 
    }), 
 
    new ol.Feature({ 
 
    \t geometry: new ol.geom.Point([5000000,1000000]) 
 
    }), 
 
    new ol.Feature({ 
 
    \t geometry: new ol.geom.Point([1000000,500000]) 
 
    }) 
 
    /*,new ol.Feature({ 
 
    \t geometry: new ol.geom.Point([1800000,800000]) 
 
    })*/ 
 
\t ], 
 
    source = new ol.source.Vector({ 
 
    \t features: features 
 
    }); 
 

 
var layer; 
 
if (features.length > 5) { 
 
    var clusterSource = new ol.source.Cluster({ 
 
    distance: parseInt(40, 10), 
 
    source: source 
 
    }); 
 

 
    var styleCache = {}; 
 
    layer = new ol.layer.Vector({ 
 
    source: clusterSource, 
 
    style: function(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: '#AAA' 
 
      }), 
 
      fill: new ol.style.Fill({ 
 
       color: '#DDD' 
 
      }) 
 
      }), 
 
      text: new ol.style.Text({ 
 
      text: size.toString(), 
 
      fill: new ol.style.Fill({ 
 
       color: '#B144FF' 
 
      }) 
 
      }) 
 
     }); 
 
     styleCache[size] = style; 
 
     } 
 
     return style; 
 
    } 
 
    }); 
 
} else { 
 
    layer = new ol.layer.Vector({ 
 
    source: source 
 
    }); 
 
} 
 

 
var map = new ol.Map({ 
 
    layers: [ 
 
    \t new ol.layer.Tile({ 
 
    \t \t source: new ol.source.OSM() 
 
\t \t }), 
 
    layer 
 
    ], 
 
    target: 'clusterMap', 
 
    view: new ol.View({ 
 
    center: [0, 0], 
 
    zoom: 2 
 
    }) 
 
});

<link href="https://openlayers.org/en/v3.20.1/css/ol.css" rel="stylesheet"/> 
 
<script src="https://openlayers.org/en/v3.20.1/build/ol.js"></script> 
 
<div id="clusterMap" class="map"></div>