Openlayers绘制聚合标注


Posted in Javascript onSeptember 28, 2020

本文实例为大家分享了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、结果展示

初始化界面

Openlayers绘制聚合标注

随意更改地图的分辨率(进行缩放操作),标注点的数量也会跟着改变

Openlayers绘制聚合标注

单击左上角的移除聚合标签按钮,则会清空界面上的所有标注

Openlayers绘制聚合标注

单击左上角的添加聚合标签按钮,则会在界面上重新添加聚合标注

Openlayers绘制聚合标注

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
完美的js图片轮换效果
Feb 05 Javascript
微信小程序实战之自定义toast(6)
Apr 18 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
Openlayers绘制地图标注
Sep 28 #Javascript
Openlayers实现图形绘制
Sep 28 #Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 #Javascript
Openlayers实现地图全屏显示
Sep 28 #Javascript
Openlayers学习之加载鹰眼控件
Sep 28 #Javascript
Openlayers显示地理位置坐标的方法
Sep 28 #Javascript
Openlayers学习之地图比例尺控件
Sep 28 #Javascript
You might like
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
PHP+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
PHP 修复未正常关闭的HTML标签实现代码(支持嵌套和就近闭合)
2012/06/07 PHP
Linux下 php7安装redis的方法
2018/11/01 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
JQ获取动态加载的图片大小的正确方法分享
2013/11/08 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
2013/11/25 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
JavaScript实现带箭头标识的多级下拉菜单效果
2015/08/27 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
python实现带声音的摩斯码翻译实现方法
2015/05/20 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
python中upper是做什么用的
2020/07/20 Python
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
幼儿园家长会欢迎词
2014/01/09 职场文书
勾股定理课后反思
2014/04/26 职场文书
八项规定整改方案
2014/10/01 职场文书
给老婆道歉的话
2015/01/20 职场文书
语文教师求职信范文
2015/03/20 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书