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 demo 基本技巧
Dec 18 Javascript
JQuery for与each性能比较分析
May 14 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
js获取图片宽高的方法
Nov 25 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
Bootstrap Table使用整理(三)
Jun 09 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
vue 组件内获取actions的response方式
Nov 08 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实现批量查询清除一句话后门的代码
2008/01/20 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
[推荐]javascript 面向对象技术基础教程
2009/03/03 Javascript
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
对python中的*args与**kwgs的含义与作用详解
2019/08/28 Python
浅析使用Python搭建http服务器
2019/10/27 Python
python flask中动态URL规则详解
2019/11/22 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
python数据抓取3种方法总结
2021/02/07 Python
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
竞选学习委员演讲稿
2014/09/01 职场文书
2015年底工作总结范文
2015/05/15 职场文书
一个都不能少观后感
2015/06/04 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
入党积极分子培养联系人意见
2015/08/12 职场文书
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL
springboot实现string转json json里面带数组
2022/06/16 Java/Android