一、简介随着计算机的发展,浏览器的不断进步与完善,现今大部分浏览渲染效率有了很大的改善, 但是由于浏览器厂商的不同,浏览器种类繁多,性能不一,并且很多用户还使用着不少老的浏览, 那些如IE6、7等的老式浏览器渲染能力有限,在处理大量数据的时候无法满足用户的需求, 为此聚散的思想诞 ...
一、简介
随着计算机的发展,浏览器的不断进步与完善,现今大部分浏览渲染效率有了很大的改善, 但是由于浏览器厂商的不同,浏览器种类繁多,性能不一,并且很多用户还使用着不少老的浏览, 那些如IE6、7等的老式浏览器渲染能力有限,在处理大量数据的时候无法满足用户的需求, 为此聚散的思想诞生了,聚散图将非重点的批量数据进行合并,只渲染少量数据,散开并突出重要信息点, 减少了浏览器的负荷,解决了大数据量渲染的性能问题。
- 原理:按区域将多个离散点进行计算,合并成为一个聚散点进行显示,在某种情况下(如点击聚散点或者移动到聚散点内部时)将特定的聚散点还原为离散点
- 特点:由于浏览器渲染数据的限制,无法显示大量数据,聚散图可以合并离散点,提高浏览器显示的数据上限。
- 应用场景:多用于数据量特别大的场景,一次性绘制在浏览器导致浏览器负荷过重,所以将数据进行合并,这样整个页面的聚散点数量不至于过多,减少浏览器压力, 同时需要获取离散点信息时可以还原对应的聚散点,即保证了浏览器装载了所有数据,又能保证浏览器负荷在可接受范围内。
二、使用
接下来我们一起看一下聚散图的使用方式:
1、创建聚散图图层
首先创建一个聚散图对象。由于聚散图只负责矢量数据的渲染,所以初始化只需要设置一个图层的名称即可。
//创建一个名为“Cluster”的聚散图层。clusterLayer = new SuperMap.Layer.ClusterLayer("Cluster");
2、添加到地图
然后将此图层添加到map里面。
//向map中添加图层map.addLayers([clusterLayer]);
3、添加数据
首先需要获取一个点数组(SuperMap.Feature.Vector数组), 数据可以从服务器查询准备好的点数据集,也可以使用本地数据,不过都只能是点数据。 如下的形式:
var features = [feature1,feature2,......,featureN];
添加点数据
//将数据添加到图层中clusterLayer.addFeatures(features);
即可实现类似如下效果,地图放大缩小时点数据会自动聚散或者散开:
4、事件处理
上述的聚散图的聚散点的散开和聚散都是自动计算的,用户不能点击聚散点进行散开,如果需要点击聚散点进行散开, 则需要添加SelectCluster控件。如下:
//创建聚散选择控件。var select = new SuperMap.Control.SelectCluster(clusterLayer);//将控件添加到map上map.addControl(select);//激活控件。select.activate();
这样当用户点击聚散点时会散开,如下:
聚散图支持很多事件,如:
- click:点击事件(包括聚散点和非聚散点)
- clickout:点击要素外
- over:移进要素事件
- out:移出要素事件
- dblclick:双击事件
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:GIS可视化——聚散图
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。