使用“打开图层群集”指定最小群集大小

Question

使用OpenLayers 3，如何指定最小簇大小，以便具有5个或更少地图标记的簇不会聚集，而是显示单个地图标记？有没有办法在集群层的ol.layer.Vector对象中执行此操作？

addMarker()

Answer 1

您可以检查代码中有多少功能。如果您有太多，可以根据已有的矢量源创建一个群集源，将其添加到新的矢量图层。如果没有，可以使用现有的矢量源创建矢量图层。

由于没有方法可以动态地将源设置为图层，因此应使用所需的源创建矢量图层。如果您想了解它如何使用5种以上的功能，只需取消注释注释行。

＆＃13;

＆＃13;

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
  })
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;