当前位置： 首页 > news >正文

OpenLayers学习笔记-点位聚合

news 2026/2/8 23:11:52

需求

用户点击行政区划等操作后，从后台获取区域内的点位数据，在地图上聚合显示。用户手动取消聚合，点位直接渲染在地图上。

实现过程

  1. 使用后台返回的点位数据，通过new ol.source.Vector({features})创建矢量数据源。
  2. 使用new ol.source.Cluster({source})创建聚合标注数据源，source参数设置为上一步创建的矢量数据源。
  3. 最后创建一个矢量图层new ol.layer.Vector({source})，source参数设置为上一步创建的聚合标注数据源，再将矢量图层添加到地图上即可。
  4. 取消聚合可以通过两种方式实现。
    1. 方式一：通过设置两种不同的聚合样式：聚合数量大于1的样式和聚合数量等于1的样式。将聚合数量等于1的样式设置成点位的样式，来模拟不聚合的点位展示效果。
    2. 方式二：通过隐藏和显示图层实现。默认将点位图层也添加到地图上，在需要显示的时机，将聚合图层隐藏，显示点位图层。
  5. 可通过source.setDistance(number)设置聚合的像素，设置为0时，所有点位都不聚合，即可达到不聚合的效果。

知识点

  • new ol.style.Circle({radius, stroke, fill})创建一个圆形样式，可设置半径，描边颜色和填充颜色。
  • new ol.style.Text({text,fill,scale})，创建一个字体，可设置字体内容，颜色和缩放比例。
  • map.getView().animate({center, zoom})可跳转到指定的经纬度和显示层级。
  • 聚合点的feature有一个features属性，是一个存放着这个聚合下面的所有feature的数组，可通过feature.get('features')获得。
  • new ol.source.Cluster({distance, source})创建聚合标注数据源，通过source设置聚合的资源。通过distance设置聚合的距离。比如distance设置为150，表示如果2个点位之间的距离小于150px，即聚合成1个聚合点②。
  • new ol.layer.Vector({style})的style参数可以是一个回调函数，函数的第一个参数是feature，可根据feature的不同，return不同的样式。
  • clusterLayer.getSource().setDistance(number)可在初始化聚合图层结束后，再次设置聚合距离，设置为0可实现不聚合的效果。
  • feature.get('features').length聚合点feature的features属性的length是此聚合点下点位的数量。
  • map.getView().getZoom()可获得当前地图的展示层级，有小数点。
  • layers.setVisible(true/false)可设置图层的显示和隐藏。
  • 通过map.on('moveend', () => {}可以监听地图移动事件，在地图平移和缩放结束后会触发此事件回调函数。可通过层级的变化，区分是平移还是缩放。
  • '#' + parseInt(Math.random() * 0xffffff).toString(16).padStart(6, '0')可随机生成16进制颜色值。
  • 在测试切换两种不同的实现不聚合的方式时，在地图层级小的时候，比如5级，切换后会感觉两种方式的点位不同。但如果将地图逐步放大，再次进行切换的时候，就不会有差异。最后发现是在聚合图层和直接渲染点位的图层中，重叠点位的处理不同，在聚合模式下，这个监控在上面，但是在直接渲染点位的图层中，这个监控却在下面。在地图层级小的时候，点位都聚集在了一起，重叠的数据非常多，导致切换时大量的点位层级变化，觉得异常。但当地图不断放大后，点位直接不重叠了，这时切换就感觉不到点位有什么变化了。
  • <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/8.2.0/ol.min.css" integrity="sha512-bc9nJM5uKHN+wK7rtqMnzlGicwJBWR11SIDFJlYBe5fVOwjHGtXX8KMyYZ4sMgSL0CoUjo4GYgIBucOtqX/RUQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /><title>点位聚合</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}:root {--top-height: 50px;}html,body,#app,.app-map {height: 100%;height: 100%;}.app-btns {position: fixed;right: 10px;top: 10px;background-color: #fff;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .5);width: 210px;padding: 25px;text-align: center;border-radius: 5px;display: flex;flex-direction: column;z-index: 2;}.app-btns button {font-size: 18px;border: none;padding: 12px 10px;border-radius: 4px;color: #fff;background-color: #409eff;border-color: #409eff;cursor: pointer;border: 1px solid #dcdfe6;margin-bottom: 5px;}.app-btns button:hover {background: #66b1ff;border-color: #66b1ff;}.app-btns button.active {background-color: #07c160;}hr {margin: 20px 0;}.zoom {position: fixed;right: 10px;b

相关文章：

OpenLayers学习笔记-点位聚合

需求 用户点击行政区划等操作后，从后台获取区域内的点位数据，在地图上聚合显示。用户手动取消聚合，点位直接渲染在地图上。 实现过程 使用后台返回的点位数据，通过new ol.source.Vector({features})创建矢量数据源。使用new ol.source.Cluster({source})创建聚合标注数据…...

编程日记 2024/7/18 4:41:48

flutter实现语言的国际化

目录 前言 一、GetX实现国际化(推荐) 1.安装Getx 2.创建国际化的文件 3.使用国际化字符串 4.配置GetMaterialApp 5.更改语言 6.系统语言 ​编辑 7.原生工程配置 1.iOS工程配 1.打开iOS工程&#xff0c;在Project的info里面添加语言 2.创建String File文件 2.andr…...

编程日记 2024/7/18 4:38:45

服务端正常启动了，但是客户端请求不到

服务端正常启动了&#xff0c;但是客户端请求不到有哪些原因?如何排查? 如果客户端请求的接口没有响应&#xff0c;排查的方式&#xff1a; 检查接口IP地址是否正确&#xff0c;ping一下接口地址。 检查被测接口端口号是否正确&#xff0c;可以在本机Telnet接口的IP和端口号…...

编程日记 2024/7/18 4:34:41

鸿蒙开发 -本地数据库操作

// 1导入模块 import relationalStore from @ohos.data.relationalStore;export class AthUserDbManager{//2.获取RdbStore实例，要注意的是，此处的getContext(this)用于获取应用上下文:getcreatDbtable(dbname:string){//配置数据库信息：const STORE_CONFIG :relationalStor…...

编程日记 2024/7/18 4:30:37

主机安全-进程、命令攻击与检测

目录 概述反弹shell原理nc/dev/xxx反弹shell下载不落地反弹Shell各种语言反弹shell linux提权sudosuid提权mysql提权 Dnslog参考 概述 本文更新通过在主机&#xff08;不含容器&#xff09;上直接执行命令或启动进程来攻击的场景。检测方面以字节跳动的开源HIDS elkeid举例。每…...

编程日记 2024/7/18 4:29:36

FPGA FIR fdatool filter designer MATLAB

位数问题 fdatool 先确定输入信号的位宽&#xff0c;比如17位在fdatool中&#xff0c;选set quantization parameters 选input/output 设置input word length 为17bit(not confirmed) fir compiler implementation 注意&#xff1a; 当设置输入位宽为16位时&#xff0c;ip核…...

编程日记 2024/7/18 4:26:32

水表数字识别2：Pytorch DBNet实现水表数字检测(含训练代码和数据集)

水表数字识别2&#xff1a;Pytorch DBNet实现水表数字检测(含训练代码和数据集) 目录 水表数字识别2&#xff1a;Pytorch DBNet实现水表数字检测(含训练代码和数据集) 1.前言 2. 水表数字识别的方法 3. 水表数字识别数据集 4. 水表数字分割模型训练 &#xff08;1&#x…...

编程日记 2024/7/18 4:24:30

Windows 点云生成二维栅格图 [附C++完整代码实现]

点云压缩-2D栅格图 一、点云压缩（二维栅格图）二、算法流程三、代码实现四、结果可视化一、点云压缩（二维栅格图） 点云压缩：点云是海量点的集合，其数据量通常非常庞大。直接存储这些未经压缩的点云数据会消耗大量的存储空间，特别是在处理大规模的点云数据时，这个问题变得…...

编程日记 2024/7/18 4:18:25

SpringBoot结合ip2region实现博客评论显示IP属地

你好呀&#xff0c;我是小邹。 在现代的Web应用中&#xff0c;特别是博客和论坛类网站&#xff0c;为用户提供地理定位服务&#xff08;如显示用户所在地理位置&#xff09;可以极大地增强用户体验。本文将详细探讨如何使用Java和相关技术栈来实现在博客评论中显示用户的地址信…...

编程日记 2024/7/18 4:17:24

设计模式使用场景实现示例及优缺点（行为型模式——策略模式）

在遥远的王国里&#xff0c;有三个重要的角色&#xff1a;国王策略模式、他的皇家顾问算法家族&#xff0c;以及年轻的骑士接口。国王策略模式统治着整个王国&#xff0c;他的职责是确保每一个编程问题都能找到最合适的解决方案。 有一天&#xff0c;王国遇到了一场危机。编程王…...

编程日记 2024/7/18 4:16:23

ReactRouter v6升级的步骤

React Router v6 引入了一个 Routes 组件&#xff0c;它有点像 Switch &#xff0c;但功能要强大得多。与 Switch 相比&#xff0c; Routes 的主要优势在于&#xff1a; <Routes> 中的所有 <Route> 和 <Link> 都是相对的。这导致在 <Route path> 和 &…...

编程日记 2024/7/18 4:14:21

【JVM实战篇】内存调优：内存问题诊断+案例实战

文章目录 诊断内存快照在内存溢出时生成内存快照MAT分析内存快照MAT内存泄漏检测的原理支配树介绍如何在不内存溢出情况下生成堆内存快照&#xff1f;MAT查看支配树MAT如何根据支配树发现内存泄漏 运行程序的内存快照导出和分析快照**大文件的处理** 案例实战案例1&#xff1a;…...

编程日记 2024/7/18 4:12:19

专业条码二维码扫描设备和手机二维码扫描软件的区别？

条码二维码技术已广泛应用于我们的日常生活中&#xff0c;从超市结账到公交出行&#xff0c;再到各类活动的入场验证&#xff0c;条码二维码的便捷性不言而喻&#xff0c;而在条码二维码的扫描识别读取过程中&#xff0c;专业扫描读取设备和手机二维码扫描软件成为了两大主要工…...

编程日记 2024/7/18 4:01:09

基于嵌入式Linux的高性能车载娱乐系统设计与实现 —— 融合Qt、FFmpeg和CAN总线技术

随着汽车智能化的发展&#xff0c;车载娱乐系统已成为现代汽车的标配。本文介绍了一个基于Linux的车载娱乐系统的设计与实现过程。该系统集成了音视频娱乐、导航、车辆信息显示等功能&#xff0c;旨在提供安全、便捷、丰富的驾驶体验。 1. 项目概述 随着汽车智能化的发展&…...

编程日记 2024/7/18 3:57:05

探索IP形象设计：快速掌握设计要点

随着市场竞争的加剧&#xff0c;越来越多的企业开始关注品牌形象的塑造和推广。在品牌形象中&#xff0c;知识产权形象设计是非常重要的方面。在智能和互联网的趋势下&#xff0c;未来的知识产权形象设计可能会更加关注数字和社交网络。通过数字技术和社交媒体平台&#xff0c;…...

编程日记 2024/7/18 3:54:02

泛微Ecology8明细表对主表赋值

文章目录 [toc]1.需求及效果1.1 需求1.2 效果2.思路与实现3.结语 1.需求及效果 1.1 需求 在明细表中的项目经理&#xff0c;可以将值赋值给主表中的项目经理来作为审批人员 1.2 效果 在申请人保存或者提交后将明细表中的人名赋值给主表中对应的值2.思路与实现 在通过js测…...

编程日记 2024/7/18 3:53:01

opencv—常用函数学习_“干货“_5

目录 十五、图像分割 简单阈值分割 (threshold) 自适应阈值分割 (adaptiveThreshold) 颜色范围分割 (inRange) 分水岭算法 (watershed) 泛洪填充 (floodFill) GrabCut算法 (grabCut) 距离变换 (distanceTransform) 最大稳定极值区域检测 (MSER) 均值漂移滤波 (pyrMean…...

编程日记 2024/7/18 3:50:58

JAVA零基础学习1（CMD、JDK、环境变量、变量和键盘键入、IDEA）

JAVA零基础学习1&#xff08;CMD、JDK、环境变量、变量和键盘键入、IDEA&#xff09; CMD常见命令配置环境变量JDK的下载和安装变量变量的声明和初始化声明变量初始化变量 变量的类型变量的作用域变量命名规则示例代码 键盘键入使用 Scanner 类读取输入步骤示例代码 常用方法处…...

编程日记 2024/7/18 3:48:56

Redis的安装配置及IDEA中使用

目录 一、安装redis&#xff0c;配置redis.conf 1.安装gcc 2.将redis的压缩包放到指定位置解压 [如下面放在 /opt 目录下] 3.编译安装 4.配置redis.conf文件 5.开机自启 二、解决虚拟机本地可以连接redis但是主机不能连接redis 1.虚拟机网络适配器网络连接设置为桥接模式…...

编程日记 2024/7/18 3:46:53

ubuntu 物理内存爆炸而不使用虚拟内存的问题

ubuntu 物理内存不足时有时候会不去使用虚拟内存&#xff0c;让虚拟内存空闲&#xff0c;而直接关闭占用内存的进程&#xff0c;如果在进行模型测试或训练时&#xff0c;就会导致训练或测试进程被杀死。 1. 修改 swappiness&#xff1a; cat /proc/sys/vm/swappiness sudo sysc…...

编程日记 2024/7/18 3:44:51

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2026/2/5 4:33:24

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/12/20 7:42:02

工业安全零事故的智能守护者：一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

编程新知 2026/1/21 9:20:07

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

编程新知 2026/2/7 15:39:49

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/9/14 7:37:32

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2026/2/8 2:27:29

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2026/1/31 8:45:21