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面向对象编程
Mar 02 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
JavaScript数组的栈方法与队列方法详解
May 26 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
详解AngularJS 模块化
Jun 14 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
微信小程序实现手势滑动效果
Aug 26 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和ACCESS写聊天室(二)
2006/10/09 PHP
PHP 登录记住密码实现思路
2013/05/07 PHP
php操作MongoDB类实例
2015/06/17 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
python实现人人网登录示例分享
2014/01/19 Python
Python中的ctime()方法使用教程
2015/05/22 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
python 请求服务器的实现代码(http请求和https请求)
2018/05/25 Python
Python日志模块logging基本用法分析
2018/08/23 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
应届生的求职推荐信范文
2013/11/30 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
《湘夫人》教学反思
2014/02/21 职场文书
普通党员对照检查材料
2014/09/24 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
人力资源部工作计划
2019/05/14 职场文书