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 相关文章推荐
javascript下数值型比较难点说明
Jun 07 Javascript
javascript面向对象编程(一) 实例代码
Jun 25 Javascript
如何判断鼠标是否在DIV的区域内
Nov 13 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
JavaScript驾驭网页-DOM
Mar 24 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
微信公众号 摇一摇周边功能开发
Dec 08 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 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中文件下载功能实现超详细流程分析
2012/06/13 PHP
php中\r \r\n \t的区别示例介绍
2014/02/08 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
2013/09/25 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
3种js实现string的substring方法
2015/11/09 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
[03:36]2014DOTA2 TI小组赛综述 八强诞生进军钥匙球馆
2014/07/15 DOTA
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Python读大数据txt
2016/03/28 Python
Python将list中的string批量转化成int/float的方法
2018/06/26 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
介绍一下gcc特性
2015/10/31 面试题
好矿嫂事迹材料
2014/01/21 职场文书
生物制药自我鉴定
2014/01/25 职场文书
中文教师求职信
2014/02/22 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
禁止酒驾标语
2014/06/25 职场文书
活动总结结尾怎么写
2014/08/30 职场文书