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

OpenLayers学习笔记-点位聚合

news 2026/2/5 19:51:58

需求

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

实现过程

  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

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2026/1/26 20:39:53

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

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

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/10/18 7:13:10

【论文阅读28】-CNN-BiLSTM-Attention-（2024）

本文把滑坡位移序列拆开、筛优质因子&#xff0c;再用 CNN-BiLSTM-Attention 来动态预测每个子序列&#xff0c;最后重构出总位移&#xff0c;预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵&#xff08;S…...

编程新知 2026/2/2 3:06:53

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2026/1/26 5:53:30

【网络安全】开源系统getshell漏洞挖掘

审计过程&#xff1a; 在入口文件admin/index.php中&#xff1a; 用户可以通过m,c,a等参数控制加载的文件和方法&#xff0c;在app/system/entrance.php中存在重点代码&#xff1a; 当M_TYPE system并且M_MODULE include时&#xff0c;会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2026/1/31 2:59:25

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

编程新知 2026/1/31 6:20:15

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

编程新知 2026/2/2 3:59:34

Linux系统部署KES

1、安装准备 1.版本说明V008R006C009B0014 V008&#xff1a;是version产品的大版本。 R006&#xff1a;是release产品特性版本。 C009&#xff1a;是通用版 B0014&#xff1a;是build开发过程中的构建版本2.硬件要求 #安全版和企业版 内存&#xff1a;1GB 以上 硬盘&#xf…...

编程新知 2026/1/1 12:32:33

Axure 下拉框联动

实现选省、选完省之后选对应省份下的市区...

编程新知 2026/1/20 13:43:41