GitHub地址:https://github.com/QingyaFan/openlayers-examples
1. 描述
点聚集
指在某个缩放级别下,将临近(一般用像素距离衡量)的点聚合为一个点要素显示,这在房屋中介的等的地图找房
功能中很常见,如下图。但是这样的例子并不恰当,地图找房
里的聚集确切的说并不是点聚集,他们是在每一级别显示某一级区块,然后在区块多边形的质心或者什么地方设置一个点要素,用预先统计好的数量给这个点要素设置样式而已。
01.png)
而我们要做的是动态聚类,在每一个地图缩放级别,动态扫描每个要素周围的要素,生成聚集的点要素。这里,我们利用USGS的地震数据,结合openlayers尝试实现全球地震点聚集可视化的功能。最终结果如图:
2. 实现
- 数据
地理数据可视化,我们必须要找到合适的数据,要求呈现点状分布,且有一定的聚集分布现象,我在USGS官网上找到了他们对于地震统计的数据,geojson格式,对外开放,且地震分布肯定有聚集现象,地震多发带如四大地震带必定地震较多。
https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson
- 可视化
openlayers提供了一个点聚集图层数据源
类型ol.source.Cluster
,结合矢量图层即可构造一个简单的聚集图层。点聚集图层数据源
的distance类型控制聚集的阈值,当两点间像素距离小于20时便聚集为一个点。
// 聚类图层
earthquakeCluster = new ol.layer.Vector({
source: new ol.source.Cluster({
distance: 80,
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson'
})
})
});
我们还没有给聚类要素设置要素,相信我,使用默认的样式很难看,且找不到聚类的痕迹,我就不贴了。接下来我们给聚类图层设置样式,要求是每个聚类要素大小要根据该