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 相关文章推荐
JS按回车键实现登录的方法
Aug 25 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
详解Vuex管理登录状态
Nov 13 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
vue中如何让子组件修改父组件数据
Jun 14 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
v-slot和slot、slot-scope之间相互替换实例
Sep 04 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
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
thinkPHP模板引擎用法示例
2016/12/08 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
js实现简单进度条效果
2020/03/25 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
[02:17]快乐加倍!DOTA2食人魔魔法师至宝+迎霜节活动上线
2019/12/22 DOTA
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
python进程类subprocess的一些操作方法例子
2014/11/22 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
python 一维二维插值实例
2020/04/22 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
JAVA和C++的区别
2013/10/06 面试题
一套C#面试题
2013/10/09 面试题
餐饮业创业计划书范文
2014/01/06 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
房产委托公证书
2014/04/08 职场文书
销售提升方案
2014/06/07 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
搭建Yolov5服务器
2022/04/30 Servers