[原创.数据可视化系列之一]使用openlayers 3 显示聚合数据
2016-05-19 17:04
309 查看
在地图上显示点数据是最常用的地图展示功能之一,但是如果很多点在地图上显示,或造成密密麻麻的一片,无法正常看清楚,这个时候,一般有两种解决方案,一种是根据数据重要程度进行标注,重要的显示大一些,不重要的显示小点,比如百度地图就是这样的;另一种方法是使用聚合,让相邻的点聚合成一个点,也能解决这个问题。
使用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
使用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
相关文章推荐
- Supervisor 管理进程,Cloud Insight 监控进程,完美!
- 修改Tomcat的网站根目录
- centos6.7环境之kvm虚拟化quem工具配置及使用详解
- open-falcon监控windows机器
- Supervisor 管理进程,Cloud Insight 监控进程,完美!
- 专注docker安全:Security Scanning
- 修改Tomcat的网站根目录
- centos6.7环境之kvm虚拟化quem工具配置及使用详解
- Linux
- 在linux下用tomcat部署java web项目的过程与注意事项(转)
- Linux pfctl命令 (网速限制)
- Linux权限操作 [转]
- Linux驱动之设备模型(9)-platform
- Linux驱动之设备模型(8)
- Linux驱动之设备模型(7)
- Linux驱动之设备模型(6)
- 使用tempest测试openstack
- linux下查看磁盘空间 [转]
- Linux驱动之设备模型(5)
- Tomcat性能优化