【前端小记】--OpenLayers--1.点位图层动态聚合展示

最新推荐文章于 2024-08-08 17:52:11 发布

尤记昨日书

最新推荐文章于 2024-08-08 17:52:11 发布

阅读量1.4k

点赞数

分类专栏：前端小记 OpenLayers 文章标签：前端聚类数据挖掘

xiaohui

本文链接：https://blog.csdn.net/am_xiao_hui/article/details/126643233

版权

本文介绍如何使用OpenLayers处理地图上大量接近点位的显示问题，通过聚类技术提高用户体验并避免卡顿。详细阐述了聚类的解决思路和具体实现，包括在聚类仅包含一个点时如何展示后端返回的图标。

摘要由CSDN通过智能技术生成

需求描述

在地图上实现一个点位的图层展示，但是有的时候地图上的点位非常多，而且有些经纬度非常接近，导致地图上的点位展示非常密集，这个时候，如果直接在地图上展示所有点位就会降低用户的视觉体验，而且也容易卡顿，如下图所示：
在这里插入图片描述

解决思路

针对以上这种情况的的出现，OpenLayers给出了一个解决办法——聚类。
通常情况，我们在给地图添加图层时，会new一个VectorSource作为数据源，而聚类实际上就是把new的VectorSource作为聚类地一个属性source，再去new一个Cluster作为图层的数据源。

具体实现

点位保持聚类展示

import Feature from 'ol/Feature';
import Map from 'ol/Map';
import Point from 'ol/geom/Point';
import View from 'ol/View';
import {
   
  Circle as CircleStyle,
  Fill,
  Stroke,
  Style,
  Text,
} from 'ol/style';
import {
   Cluster, OSM, Vector as VectorSource} from 'ol/source';
import {
   Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {
   boundingExtent} from 'ol/extent';

const distanceInput = document.getElementById('distance');
const minDistanceInput = document.getElementById('min-distance');

//模拟一些地图上的点位
const count = 20000;
const features = new Array(count);
const e = 4500000;
for (let i = 0; i < count; ++i) {
   
  const coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
  features[i] = new Feature(new Point(coordinates));
}

//设置地图的数据源