Openlayers(五)点位聚合Cluster

这篇具有很好参考价值的文章主要介绍了Openlayers(五)点位聚合Cluster。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Openlayers(五)点位聚合Cluster

1.业务问题

由于点位在地图上显示过多,会造成页面卡顿、点位标注信息相互叠加导致看不清

openlayers 聚合,vue3,openlayers,前端

优化后效果

openlayers 聚合,vue3,openlayers,前端
不断放大层级
openlayers 聚合,vue3,openlayers,前端

2.聚合类Cluster

OpenLayers 中聚合是通过 ol.source.Cluster 实现,聚合的原理是将距离比较近的点位合并为一个点,并计算合并后点位的属性值。

在聚合源 ol.source.Cluster 中,当一个点被添加进来时,会检查该点与已有聚合点的距离是否在指定的聚合距离之内,如果是,则将该点加入到该聚合点中,同时更新聚合点的属性值(例如点数等)。如果该点与已有聚合点的距离都超出聚合距离,则将该点作为新的聚合点,加入到聚合源中。

在渲染时,对于聚合后的点,可以根据聚合点的属性值设置不同的样式,以区别于普通的点位。

重要参数说明

let clusterPondSource = new  Cluster({
  distance: 100, 
  source: new Vector()
});

distance: 聚合的距离,单位是像素

在聚合时,OpenLayers会计算每个点在屏幕上的像素位置,并根据像素位置计算聚合距离。因此,聚合距离不是以地理距离的方式计算的,而是以屏幕上的像素距离为基础。聚合距离的大小取决于地图缩放级别、地图分辨率和聚合距离参数的值。

聚合代码

在原本代码基础上,只需要把VectorLayer中数据源source替换成聚合类Cluster

import Cluster from "ol/source/Cluster"

//加载前端图片地址
 const iconTag   = reactive({
  title: `/public/title.png`,
  pond:`/public/pond.svg`
})

let clusterPondSource = new  Cluster({
  distance: 100, 
  source: new Vector()
});

let layerPondIcon = new VectorLayer({
  id: "layerPondIcon",
  title: 'layerPondIcon',
  source: clusterPondSource,
  zIndex: 1000,
  style: function (feature, resolution) {
    return  clusterStyle(feature,iconTag.pond,'#33C7CCFF')
  }
})

聚合样式

其中

let count = feature.get(“features”).length;

获取点位个数,判断当前点位如果数量大于1为聚合点,加载自定义圆。如果只有一个点位,显示我们原本点位。

function clusterStyle(feature,imgSrc,fillColor){
  let count = feature.get("features").length;
  if (count > 1) {
      //聚合样式
    return new Style({
      image: new Circle({ // 圆形
        radius: 15, // 半径
        stroke: new Stroke({ // 边框
          color: '#fff'
        }),
        fill: new Fill({ // 填充
          color: fillColor
        })
      }),
      text: new Text({
        fill: new Fill({
          //文本填充样式(即文字颜色)
          color: "#ffffff",
        }),
        font: "bold 14px sans-serif",
        text: count > 1 ? count.toString() : feature.get("features")[0].values_.name
      }),

    });
  } else {
      //默认样式
    return new Style({
      image: new Icon({
        src: imgSrc,
      }),
      text: new Text({
        textAlign: 'center',            //位置
        textBaseline: 'middle',         //基准线
        font: 'normal 13px 微软雅黑',    //文字样式
        offsetY: -25,    // Y轴偏置
        text: feature.get("features")[0].values_.name,      //文本内容
        fill: new Fill({       //文本填充样式(即文字颜色)
          color: '#FFF89A'
        }),
        stroke: new Stroke({
          color: '#12a2ee',
          width: 2
        })
      })
    });
  }
}

Select事件替换

在监听select事件的回调函数中判断当前选中的是单个点还是聚合点,如果是聚合点位,点击会放大地图层级,如果是单个点位,加载之前业务。文章来源地址https://www.toymoban.com/news/detail-734520.html

  let selectSingleClick = new Select({ style: null });
  myMap.value.addInteraction(selectSingleClick);
  // feature点击事件
  selectSingleClick.on("select", (e) => {
    let selectedFeatures = e.selected;
    if (selectedFeatures.length > 0) {
      let feature = selectedFeatures[0];
      let features = feature.get('features');
      if (features.length === 1) {
        // 单个点位
        // 执行之前的业务逻辑
        console.log('之前业务')
      } else {
        // 聚合点
        // 放大地图层级
        myMap.value.getView().animate({
          center: feature.getGeometry().getCoordinates(),
          zoom: myMap.value.getView().getZoom() + 1
        });
      }
    }

到了这里,关于Openlayers(五)点位聚合Cluster的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue+openlayers,初始化openlayers地图,实现鼠标移入、点击、右键等事件

    主要功能:初始化openlayers地图,实现鼠标移入、点击、右键等事件,以及获取当前图标的feature,将当前图标信息以弹框方式进行展示;地图上展示拾取到的经纬度 前端使用的是vue技术栈 步骤一:将地图的公用配置项单独提出成一个js文件,方便打包后进行修改,代码如下

    2024年02月11日
    浏览(41)
  • Element+Vue+OpenLayers webgis实战

    以 ,通过OpenLayers将遥感影像加载到浏览器中,如图1-25所示。 单击“Button”按钮可弹出一个对话框,该对话框的内容为“Hello world”,如图1-26所示。 图1-26所示对话框的实现代码如下: Element组件内部默认使用的是中文,若希望使用其他语言,则需要进行多语言设置,通过

    2024年02月17日
    浏览(48)
  • 前端开发---在vue项目中使用openLayers

    本篇文章主要讲解openLayers的初步使用,包括渲染地图、获取点坐标、标记点、中心位置的调整、以及获取到经纬度向后台发送请求 演示地址 官网 gitee链接 npm install ol import “ol/ol.css”; import { Map, View, ol } from “ol”; import TileLayer from “ol/layer/Tile”; DW () { var view = this.map.getVi

    2024年02月08日
    浏览(49)
  • 【开源WebGIS】07-Openlayers+Vue 测量功能-01

    OpenLayers是一个开源的地图显示引擎,支持距离测量和面积测量。距离测量功能用于测量地图上两点间的直线距离;面积测量功能用于测量地图上一个图形的面积,可以方便的实现在地图上的测量。 基础功能展示 1.1 测量功能按钮和显示结果框的添加 1.2 需要定位一个基础的

    2024年02月06日
    浏览(41)
  • 222:vue+openlayers 实现云雾缭绕,白鸽飞翔的效果

    第222个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+openlayersvue+openlayers: 实现云雾缭绕,白鸽飞翔的效果,这里主要是动态的在canvas上绘制白鸽和云雾效果。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果; 注意如果OpenStreetMap无法加载,请加载其他来

    2024年02月04日
    浏览(36)
  • Vue+OpenLayers 创建地图并显示鼠标所在经纬度

    本文用的是高德地图 页面 初始化地图 附css代码

    2024年01月17日
    浏览(54)
  • Vue+Openlayers+proj4实现坐标系转换

    Vue中使用Openlayers加载Geoserver发布的TileWMS: Vue中使用Openlayers加载Geoserver发布的TileWMS_霸道流氓气质的博客-CSDN博客 在上面的基础上实现不同坐标系坐标数据的转换。 Openlayers中默认的坐标系是EPSG:900913   EPSG:900913等效于EPSG:3857 可在EPSG官网进行验证   如果从其他坐标系的系统中

    2023年04月27日
    浏览(41)
  • vue+openLayers闪烁图形/线段/点 都可以使用类似的方法

    基础方法 1.先定义两个样式,闪烁时两个样式相互交换 2.利用定时器(单数的时候样式一,双数的时候样式二)由此来实现闪烁效果 先给主要代码如下(最后有全部代码): mapTool.js vue页面代码

    2024年01月24日
    浏览(45)
  • 243:vue+Openlayers 更改鼠标滚轮缩放地图大小,每次缩放小一点

    第243个 点击查看专栏目录 本示例的目的是介绍如何在vue+openlayers项目中设置鼠标滚轮缩放地图大小,每次滑动一格滚轮,设定的值非默认值1。具体的设置方法,参考源代码。 直接复制下面的 vue+openlayers源代码,操作2分钟即可运行实现效果 示例效果

    2024年02月09日
    浏览(96)
  • OpenLayers7官方文档翻译,OpenLayers7中文文档,OpenLayers快速入门

    这个入门文档向您展示如何放一张地图在web网页上。 开发设置使用 NodeJS (至少需要Nodejs 14 或更高版本),并要求安装 git 。 开始使用OpenLayers构建项目的最简单方法是运行: npm create ol-app 第一个命令将创建一个名为 my-app 的目录(如果您愿意,可以使用不同的名称),安装

    2024年02月10日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包