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 写类方式之五
Jul 05 Javascript
JSON 数据格式介绍
Jan 13 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
JavaScript中匿名、命名函数的性能测试
Sep 04 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 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
用libTemplate实现静态网页的生成
2006/10/09 PHP
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
jQuery实现的导航下拉菜单效果示例
2016/09/05 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
pycham查看程序执行的时间方法
2018/11/29 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
三年级音乐教学反思
2014/01/28 职场文书
企业形象策划方案
2014/05/29 职场文书
书法大赛策划方案
2014/06/04 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
起诉意见书范文
2015/05/19 职场文书
演讲开场白台词大全
2015/05/29 职场文书
学生会干部任命书
2015/09/21 职场文书
只需要100行Python代码就可以实现的贪吃蛇小游戏
2021/05/27 Python
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers