Openlayers绘制聚合标注
更新时间：2020年09月28日 15:01:50 作者：桃李不言_下自成蹊
这篇文章主要为大家详细介绍了Openlayers实现聚合标注，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Openlayers实现聚合标注的具体代码，供大家参考，具体内容如下
1、聚合标注
聚合标注是指在不同的地图分辨率下，通过聚合的方式来展示标注点的一种方法，其目的就是为了减少当前视窗中加载的标注点的数量，从而提高客户端的渲染速度，有点类似于ArcGIS的点抽稀。
2、代码实现
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="../lib/ol/ol.js"></script>
<script type="text/javascript">
window.onload = function () {
//初始化地图
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: new ol.proj.fromLonLat([116.28, 39.54]),
zoom: 8
})
});
//创建要素的数量
//10000个点没有任何压力，50000个点稍微有些卡了，100000个点可以把浏览器卡崩溃
var count = 10000;
//创建一个要素数组
var features = new Array(count);
//坐标偏移量
var e = 8500000;
for (var i = 0; i < count; i++) {
//要素坐标
var coordinates = [3 * 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];
//如果当前样式不存在则创建
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中
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中移除聚合标注图层
map.removeLayer(clusters);
};
};
</script>
</head>
<body>
<input type="button" name="name" value="添加聚合标签" id="addFeatures" />
<input type="button" name="name" value="移除聚合标签" id="removeFeatures" />
<div id="map"></div>
</body>
</html>
3、结果展示
初始化界面
随意更改地图的分辨率（进行缩放操作），标注点的数量也会跟着改变
单击左上角的移除聚合标签按钮，则会清空界面上的所有标注
单击左上角的添加聚合标签按钮，则会在界面上重新添加聚合标注
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
ES6中Array.find()和findIndex()函数的用法详解
ES6为Array增加了find()，findIndex函数。find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined，而findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。下面通过实例详解，需要的朋友参考下吧2017-09-09
这篇文章主要为大家介绍了你不知道的Git log竟然还有这种用法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
微信小程序--onShareAppMessage分享参数用处(页面分享)
本篇文章主要介绍了微信小程序的页面分享onShareAppMessage分享参数用处的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
这篇文章主要介绍了微信js-sdk上传与下载图片接口用法,结合实例形式分析了基于上传图片接口(uploadImage)和下载图片接口(downloadImage)针对图片操作的相关技巧,需要的朋友可以参考下2016-10-10
js跳转页面的方法有很多，本文搜集整理了一些，个人感觉还不错，希望对大家有所帮助2014-02-02
最近一直在学习d3.js，大家都知道d3.js是一个非常不错的数据可视化库，我们可以用它来做一些比较酷的东西，比如可以来显示一些简单的网络拓扑图，这篇文中就通过实例代码给大家介绍了如何利用d3.js实现简单的网络拓扑图，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-11-11
许多人对JavaScript的原型及原型链仍感到困惑，网上的文章又大多长篇大论，令读者不明觉厉。下面小编将用最简洁明了的图文介绍JavaScript的原型及原型链。2016-08-08
这篇文章主要为大家详细介绍了javascript实现前端input密码输入强度验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
这篇文章主要为大家介绍了微信小程序tabBar自定义弹窗遮挡不住解决技巧详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
一下用面向对象的相关概念来解释js中的仿面向对象，因为js中不像其他语言，不存在面向对象语言的相关特性2011-05-05
最新评论