Openlayers绘制聚合标注

本文实例为大家分享了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、结果展示

初始化界面

随意更改地图的分辨率（进行缩放操作），标注点的数量也会跟着改变

单击左上角的移除聚合标签按钮，则会清空界面上的所有标注

单击左上角的添加聚合标签按钮，则会在界面上重新添加聚合标注

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Openlayers绘制地图标注

    本文实例为大家分享了Openlayers绘制地图标注的具体代码,供大家参考,具体内容如下 1.标注的简介 标注简单点说就是通过图标.文字等方式将我们想展示的内容显示在地图上,着重突出人们所关注的专题内容,从而为用户提供个性化的地图服务: 2.标注方式 在Openlayers3里面,有两种对地理位置点进行标注的方法,一种是通过创建矢量图层然后设置其样式的方法,还有一种就是创建Overlay覆盖层的方法:对于第一种方式,本质上创建的还是一个矢量对象,只是将其表现形式更换了一下,用Style样式进行包

  • Openlayers绘制聚合标注

    本文实例为大家分享了Openlayers实现聚合标注的具体代码,供大家参考,具体内容如下 1.聚合标注 聚合标注是指在不同的地图分辨率下,通过聚合的方式来展示标注点的一种方法,其目的就是为了减少当前视窗中加载的标注点的数量,从而提高客户端的渲染速度,有点类似于ArcGIS的点抽稀. 2.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ht

  • vue+openlayers绘制省市边界线

    vue+openlayers绘制省市边界线

    本文实例为大家分享了vue+openlayers绘制省市边界线的具体代码,供大家参考,具体内容如下 1.创建项目 vue init webpack ol_vue 2.安装ol依赖包 npm install ol 3.引入axios npm install axios --save 文件目录:src/main.js import Vue from 'vue' import router from './router' import App from './App' import axios fro

  • vue项目中openlayers绘制行政区划

    vue项目中openlayers绘制行政区划

    vue项目中openlayers画行政区划(区域范围),供大家参考,具体内容如下 原理 在地图上画需要的范围,实际上就是在地图上打上一圈点,然后依次将这些点用线连接,就形成了范围 引用相应的ol模块 import VectorLayer from 'ol/layer/Vector' import VectorSource from 'ol/source/Vector' import { Map, View, Feature } from 'ol' import { Style, Icon, St

  • 基于Cesium实现绘制圆形,正方形,多边形,椭圆图形标注

    基于Cesium实现绘制圆形,正方形,多边形,椭圆图形标注

    目录 官方案例 绘制矩形 绘制多边形 绘制椭圆 绘制圆形 绘制立方体 绘制椭圆柱体 绘制多边柱体 绘制圆柱体 立体串串 好难形容 又平面又立体的板板 “回”字 绘制立方体,扭转一定角度的 在天上飘着的椭圆柱体 绘制椎体 平面图形的串串 这个是啥子嘞,就是向cesium上面添加圆形.正方形啥的. 官方案例 https://sandcastle.cesium.com/?src=Geometry%20and%20Appearances.html 官网写的很好了,但是有一些没有注释,所以说刚入门的小可爱

  • Vue使用openlayers实现绘制圆形和多边形

    Vue使用openlayers实现绘制圆形和多边形

    目录 绘制圆形 绘制多边形 绘制 编辑多边形 完成绘制 这个地方我就简单点写吧,因为一些东西比较乱,有的包啥的就按照官网API开发文档根据报错提示自己添加就可以了,我这个地方就不重复写了. 绘制圆形 这里的绘制圆是指当后台返回数据,告诉你以某个经纬度坐标为圆心,或者是顶点,以 r 为半径绘制,不是鼠标手动绘制. 首先绘制圆,首先有一个数据源和一个图层来存放绘制的圆形,这个很简单.然后创建变量自己该就可以,我估计都搞openlayer了,这些基础应该不至于不知道,我这边就写关键代码,我想应该没问题

  • 如何利用Python快速绘制海报级别地图详解

    如何利用Python快速绘制海报级别地图详解

    目录 1 简介 2 利用prettymaps快速制作海报级地图 2.1 prettymaps的几种使用方式 2.1.1 圆形模式 2.1.2 圆角矩形模式 2.1.3 添加文字内容 总结 1 简介 基于Python中诸如matplotlib等功能丰富.自由度极高的绘图库,我们可以完成各种极富艺术感的可视化作品,关于这一点我在系列文章在模仿中精进数据可视化中已经带大家学习过很多案例了. 而今天我要给大家介绍的这个Python库prettymaps非常的有趣,基于它,我们只需要简单的代码就可以对地球

  • 利用Python快速绘制海报地图

    利用Python快速绘制海报地图

    目录 利用Python快速绘制海报地图 1 简介 2.1 prettymaps的几种使用方式 2.1.1 圆形模式 2.1.2 圆角矩形模式 2.1.3 添加文字内容 2 利用prettymaps快速制作海报级地图 利用Python快速绘制海报地图 1 简介 基于Python中诸如matplotlib等功能丰富.自由度极高的绘图库,我们可以完成各种极富艺术感的可视化作品,关于这一点我在系列文章在模仿中精进数据可视化中已经带大家学习过很多案例了. 而今天我要给大家介绍的这个Python库prett

  • python分分钟绘制精美地图海报

    python分分钟绘制精美地图海报

    目录 1 简介 2 利用prettymaps快速制作海报级地图 2.1 prettymaps的几种使用方式 2.1.1 圆形模式 2.1.2 圆角矩形模式 2.1.3 添加文字内容 结尾:  1 简介 今天我要给大家介绍的这个Python库prettymaps非常的有趣,基于它,我们只需要简单的代码就可以对地球上给定坐标和范围的任意地区进行地图可视化. 2 利用prettymaps快速制作海报级地图 遗憾的是prettymaps暂时还不能通过pip或conda直接进行安装,但可以利用pip配合g

  • 利用OpenLayer绘制扇形的示例代码

    利用OpenLayer绘制扇形的示例代码

    目录 创建openlayers地图 绘制扇形方法 我在网上看了很多说是绘制扇形的方法,但是我用的时候都不是很好玩,所以说呢,我自己整理了一下,符合了我想要的效果,尽管我能力有限,还是决定分享一下,因为找资料太难了! 我比较懒,就不废话了,直接上代码! 创建openlayers地图 包我就不复制了,根据官网提供的API自己引用吧! openlayers API地址 创建地图 // 实例化Map map = new Map({ // 创建一个地图 layers: [new TileLayer({ s

随机推荐