聚合标注,是指在不同地图分辨率下,通过聚合方式展现标注点的一种方法。
其设计目的是为了减少当前视图下加载标注点的数量,提升客户端渲染速度。因为如果在地图上添加很多标注点,当地图缩放到小级别(即大分辨率)时会出现标注重叠的现象,既不美观,渲染效率也会受到影响。此时,可以根据地图缩放级数(zoom)的大小,将当前视图的标注点进行聚合显示。
OpenLayers也考虑到加载大数据量标注点的情况,提供了相应的聚合标注功能,以提升显示速度,增强用户体验。OpenLayers封装了支持聚合的矢量要素数据源(ol.source.Cluster),通过此数据源实现矢量要素的聚合功能。
下面的示例模拟加载10000个随机矢量点要素,使用ol.source.Cluster数据源,实现矢量要素聚合显示的功能。
代码如下:
<body> <input type="radio" id="addFeatures" name="cluster" />添加聚合标注 <input type="radio" id="removeFeatures" name="cluster" />移除聚合标注 <div id="map"></div> <script> var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: [0, 0], zoom: 3 }) }); //此示例创建10000个要素 var count = 10000; var features = new Array(count); var e = 4500000; for(var i = 0; i < count; i++){ var coordinates = [2*e*Math.random()-e, 2*e*Math.random()-e]; features[i] = new ol.Feature( new ol.geom.Point(coordinates) ); } //矢量要素数据源 var source = new ol.source.Vector({ features: features }); //聚合标注数据源 var clusterSource = new ol.source.Cluster({ distance: 40, //聚合的距离参数,即当标注间距离小于此值时进行聚合,单位是像素 source: source //聚合的数据源,即矢量要素数据源对象 }); //加载聚合标注的矢量图层 var styleCache = {}; //用于保存特定数量的聚合群的要素样式 var clusters = new ol.layer.Vector({ source: clusterSource, style: function (feature, resolution){ var size = feature.get('features').length; //获取该要素所在聚合群的要素数量 var style = styleCache[size]; console.log(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; } }); map.addLayer(clusters); //添加聚合标注 document.getElementById('addFeatures').onclick = function(){ //当前聚合标注数据源中的要素 var currentFeatures = clusterSource.getSource().getFeatures(); //如果聚合标注数据源中没有要素,则重新添加要素 if(currentFeatures.length == 0){ clusterSource.getSource().addFeatures(features); clusters.setSource(clusterSource); map.addLayer(clusters); } } //移除聚合标注 document.getElementById('removeFeatures').onclick = function(){ clusterSource.getSource().clear(); //移除聚合标注数据源中的所有要素 map.removeLayer(clusters); //移除标注图层 } </script> </body>
ol.source.Cluster的关键参数如下:
- source:聚合要素的数据源,本示例设置的是加载包含10000个随机矢量要素的矢量数据源对象。
- distance:聚合距离参数,当标注间距离小于此值时进行聚合,本示例设置的是40个像素。