javascript - 使用 Open Layers 集群指定最小集群大小

Question

使用 OpenLayers 3，如何指定最小簇大小，以便具有 5 个或更少 map 标记的簇不会聚集，而是显示单个 map 标记？有没有办法在簇层的 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({
    	geometry: new ol.geom.Point([0,0])
    }),
    new ol.Feature({
    	geometry: new ol.geom.Point([100000,500000])
    }),
    new ol.Feature({
    	geometry: new ol.geom.Point([500000,100000])
    }),
    new ol.Feature({
    	geometry: new ol.geom.Point([5000000,1000000])
    }),
    new ol.Feature({
    	geometry: new ol.geom.Point([1000000,500000])
    })
    /*,new ol.Feature({
    	geometry: new ol.geom.Point([1800000,800000])
    })*/
	],
  source = new ol.source.Vector({
  	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: [
  	new ol.layer.Tile({
  		source: new ol.source.OSM()
		}), 
    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>