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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
Dec 05 Javascript
js实现点击切换TAB标签实例
Aug 21 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
Nov 24 Javascript
基本DOM节点操作
Jan 17 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
vue封装第三方插件并发布到npm的方法
Sep 25 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 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 根据IP地址控制访问的代码
2010/04/22 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
javascript中length属性的探索
2011/07/31 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
js实现表格字段排序
2014/02/19 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
Smartour 让网页导览变得更简单(推荐)
2019/07/19 Javascript
讲解Python中运算符使用时的优先级
2015/05/14 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
Under Armour美国官网:美国知名高端功能性运动品牌
2016/09/05 全球购物
瑞贝卡·泰勒官方网站:Rebecca Taylor
2016/09/24 全球购物
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
测绘工程个人的自我评价
2013/11/10 职场文书
新闻学专业个人求职信写作
2014/02/04 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
个人课题方案
2014/05/08 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
红高粱观后感
2015/06/10 职场文书
部门主管竞聘书
2015/09/15 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
详解Oracle块修改跟踪功能
2021/11/07 Oracle
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技