var clusterSourceForLayer = new ol.source.Cluster({ source: clusterSource, distance: 50 }) 1. 2. 3. 4. 5. 这里的distance就是指的聚合的距离。 实际上就是将原来的普通的new ol.source.Vector图层数据源更换为ol.source.Cluster 4、新建聚合图层 var clusterLayer = new ol.layer.Vector({ source:...
var clusterSource = new ol.source.Cluster({ distance: parseInt(distance.value, 10), source: source }); 2.添加到ol.layer.Vector图层中,并根据feature属性设置对应style var styleCache = {}; var clusters = new ol.layer.Vector({ source: clusterSource, style: function(feature) { var size = fe...
layer.setOpacity用于设置图层的透明度。 clusterLayer.getSource().setDistance()用于设置聚合图层的点位聚合距离。 ol.source.Cluster聚合图层资源的构造函数,可通过source instanceof ol.source.Cluster判断图层是不是聚合图层。 feature.set('count', 1)给feature设置自定义属性,后期可通过feature.get('count')获取。
点聚合.png 这主要是使用了Openlayers中的ol/source/Cluster,可以为Cluster对象设定一个distance值,用来限制点与点之间最小的像素距离。具体用法如下所示,为了方便以后复用,单独写成了一个工具类: classClusterUtil{constructor(map,features,distance){this.map=map//地图this.features=features//要素列表this.distance=...
clusterDistance是设置的聚合距离,在这个范围内的点就会聚合在一起。接下来设置聚合点集群的图层: clusters = new ol.layer.Vector({ source: clusterSource, style:function(feature) { return setClusterStyle(feature); } });这里style是聚合后在图上显示的feature的style,并不是最开始添加到features数组里的...
vargeometryFunc=function(feature){returnfeature.getGeometry().getInteriorPoint();}varvectorLayer=newol.layer.Vector({source:newol.source.Cluster({distance:distance,//调用方法时候输入的聚合距离source:newol.source.Vector({features:features}),//获取到的feature数组geometryFunction:geometryFunc//获取多边形内...
{ source: new Cluster({//矢量图层的数据源为聚合类型 distance: 40,//聚合距离 source: new VectorSource({//聚合数据来源features: features }) }), style: styleFunction//聚合样式 }); //selectStyleFunction = selectStyleFunction; map.addLayer(layer); //缩放至范围 map.getView().setCenter([...
创建矢量图层: //矢量图层vectorlayerlet vectorlayer =newol.layer.Vector({ source:source,//矢量图层源style:style,//矢量图层样式opacity:1,//透明度,默认为1visible:true,//是不显示,默认trueextent:[100,34,103,36],//可选参数,图层渲染范围,[minLon,minLat,maxLon,maxLat]zIndex:1,//图层渲染索引,...
const Cluster = new ol.source.Cluster({ source: source, distance: 100 }) Style 聚合数据源 + 要素 准备好之后,就只差要素的样式和上图了。下面来看看! const Style = (options) => new ol.style.Style(options); const Fill = (options) => new ol.style.Fill(options); ...
{fromLonLat} from 'ol/proj'; // 创建矢量数据源 const vectorSource = new VectorSource(); // 创建聚合数据源 const clusterSource = new ClusterSource({ distance: 40, source: vectorSource }); // 创建矢量图层,并设置聚合样式 const clusterLayer = new VectorLayer({ source: clusterSource, style...