[原創.數據可視化系列之一]使用openlayers 3 顯示聚合數據

      在地圖上顯示點數據是最經常使用的地圖展現功能之一，可是若是不少點在地圖上顯示，或形成密密麻麻的一片，沒法正常看清楚，這個時候，通常有兩種解決方案，一種是根據數據重要程度進行標註，重要的顯示大一些，不重要的顯示小點，好比百度地圖就是這樣的；另外一種方法是使用聚合，讓相鄰的點聚合成一個點，也能解決這個問題。

　　使用openlayers 3 地圖組件比較容易解決這個問題，關鍵是  ol.source.Cluster 對象，這個對象有兩個參數，一個是聚合距離，一個是原始的點數據。代碼片斷以下：

　　1：初始化ol3 map對象：

            this.ol2d = new ol.Map({

layers: [],//地圖圖層
target: 'map2d',//地圖控件
controls: ol.control.defaults({
attributionOptions: 
({
collapsible: false
})
}),
view : new ol.View({
center : ol.proj.transform([ 178.1833, 41.3833 ], 'EPSG:4326', 'EPSG:3857'), zoom : 3  //初始座標範圍和放大級別。
})])
});

 2：準備Json數據並添加：　　

$.getJSON(options.url, function(result) {
 

var features=[];
$(result).each(function(i, val) {

geom = new ol.geom.Point(ol.proj.transform([ val.lat, val.lng ], 'EPSG:4326', 'EPSG:3857'));

feature = new ol.Feature(geom);
features.push(feature);

feature.data = val;

});

// 添加到矢量數據源
var vectorSource = new ol.source.Vector({
features : features
});

//添加到聚合數據源，若是不用這個的話，就會獲得許多的點
var clusterSource = new ol.source.Cluster({
distance: 40,
source: vectorSource
});

//設定圖層數據源
tmpLayer.setSource(null);
tmpLayer.setSource(clusterSource);
tmpLayer.setStyle(createStyle);

that.setLayerVisible(options.id, true);

});

　　 

　　完整js源代碼：http://dataxiu.com/xius/www/admin/yl/map2d.js