OpenLayers学习笔记-点位聚合
需求
用户点击行政区划等操作后，从后台获取区域内的点位数据，在地图上聚合显示。用户手动取消聚合，点位直接渲染在地图上。
实现过程
- 使用后台返回的点位数据，通过
new ol.source.Vector({features})创建矢量数据源。 - 使用
new ol.source.Cluster({source})创建聚合标注数据源，source参数设置为上一步创建的矢量数据源。 - 最后创建一个矢量图层
new ol.layer.Vector({source})，source参数设置为上一步创建的聚合标注数据源，再将矢量图层添加到地图上即可。 - 取消聚合可以通过两种方式实现。
- 方式一：通过设置两种不同的聚合样式：聚合数量大于1的样式和聚合数量等于1的样式。将聚合数量等于1的样式设置成点位的样式，来模拟不聚合的点位展示效果。
- 方式二：通过隐藏和显示图层实现。默认将点位图层也添加到地图上，在需要显示的时机，将聚合图层隐藏，显示点位图层。
- 可通过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})创建聚合标注数据…...
flutter实现语言的国际化
目录 前言 一、GetX实现国际化(推荐) 1.安装Getx 2.创建国际化的文件 3.使用国际化字符串 4.配置GetMaterialApp 5.更改语言 6.系统语言 编辑 7.原生工程配置 1.iOS工程配 1.打开iOS工程，在Project的info里面添加语言 2.创建String File文件 2.andr…...
服务端正常启动了，但是客户端请求不到
服务端正常启动了，但是客户端请求不到有哪些原因?如何排查? 如果客户端请求的接口没有响应，排查的方式： 检查接口IP地址是否正确，ping一下接口地址。 检查被测接口端口号是否正确，可以在本机Telnet接口的IP和端口号…...
鸿蒙开发 -本地数据库操作
// 1导入模块 import relationalStore from @ohos.data.relationalStore;export class AthUserDbManager{//2.获取RdbStore实例，要注意的是，此处的getContext(this)用于获取应用上下文:getcreatDbtable(dbname:string){//配置数据库信息：const STORE_CONFIG :relationalStor…...
主机安全-进程、命令攻击与检测
目录 概述反弹shell原理nc/dev/xxx反弹shell下载不落地反弹Shell各种语言反弹shell linux提权sudosuid提权mysql提权 Dnslog参考 概述 本文更新通过在主机（不含容器）上直接执行命令或启动进程来攻击的场景。检测方面以字节跳动的开源HIDS elkeid举例。每…...
FPGA FIR fdatool filter designer MATLAB
位数问题 fdatool 先确定输入信号的位宽，比如17位在fdatool中，选set quantization parameters 选input/output 设置input word length 为17bit(not confirmed) fir compiler implementation 注意： 当设置输入位宽为16位时，ip核…...
水表数字识别2：Pytorch DBNet实现水表数字检测(含训练代码和数据集)
水表数字识别2：Pytorch DBNet实现水表数字检测(含训练代码和数据集) 目录 水表数字识别2：Pytorch DBNet实现水表数字检测(含训练代码和数据集) 1.前言 2. 水表数字识别的方法 3. 水表数字识别数据集 4. 水表数字分割模型训练 （1&#x…...
Windows 点云生成二维栅格图 [附C++完整代码实现]
点云压缩-2D栅格图 一、点云压缩（二维栅格图）二、算法流程三、代码实现四、结果可视化一、点云压缩（二维栅格图） 点云压缩：点云是海量点的集合，其数据量通常非常庞大。直接存储这些未经压缩的点云数据会消耗大量的存储空间，特别是在处理大规模的点云数据时，这个问题变得…...
SpringBoot结合ip2region实现博客评论显示IP属地
你好呀，我是小邹。 在现代的Web应用中，特别是博客和论坛类网站，为用户提供地理定位服务（如显示用户所在地理位置）可以极大地增强用户体验。本文将详细探讨如何使用Java和相关技术栈来实现在博客评论中显示用户的地址信…...
设计模式使用场景实现示例及优缺点（行为型模式——策略模式）
在遥远的王国里，有三个重要的角色：国王策略模式、他的皇家顾问算法家族，以及年轻的骑士接口。国王策略模式统治着整个王国，他的职责是确保每一个编程问题都能找到最合适的解决方案。 有一天，王国遇到了一场危机。编程王…...
ReactRouter v6升级的步骤
React Router v6 引入了一个 Routes 组件，它有点像 Switch ，但功能要强大得多。与 Switch 相比， Routes 的主要优势在于： <Routes> 中的所有 <Route> 和 <Link> 都是相对的。这导致在 <Route path> 和 &…...
【JVM实战篇】内存调优：内存问题诊断+案例实战
文章目录 诊断内存快照在内存溢出时生成内存快照MAT分析内存快照MAT内存泄漏检测的原理支配树介绍如何在不内存溢出情况下生成堆内存快照？MAT查看支配树MAT如何根据支配树发现内存泄漏 运行程序的内存快照导出和分析快照**大文件的处理** 案例实战案例1：…...
专业条码二维码扫描设备和手机二维码扫描软件的区别？
条码二维码技术已广泛应用于我们的日常生活中，从超市结账到公交出行，再到各类活动的入场验证，条码二维码的便捷性不言而喻，而在条码二维码的扫描识别读取过程中，专业扫描读取设备和手机二维码扫描软件成为了两大主要工…...
基于嵌入式Linux的高性能车载娱乐系统设计与实现 —— 融合Qt、FFmpeg和CAN总线技术
随着汽车智能化的发展，车载娱乐系统已成为现代汽车的标配。本文介绍了一个基于Linux的车载娱乐系统的设计与实现过程。该系统集成了音视频娱乐、导航、车辆信息显示等功能，旨在提供安全、便捷、丰富的驾驶体验。 1. 项目概述 随着汽车智能化的发展&…...
探索IP形象设计：快速掌握设计要点
随着市场竞争的加剧，越来越多的企业开始关注品牌形象的塑造和推广。在品牌形象中，知识产权形象设计是非常重要的方面。在智能和互联网的趋势下，未来的知识产权形象设计可能会更加关注数字和社交网络。通过数字技术和社交媒体平台，…...
泛微Ecology8明细表对主表赋值
文章目录 [toc]1.需求及效果1.1 需求1.2 效果2.思路与实现3.结语 1.需求及效果 1.1 需求 在明细表中的项目经理，可以将值赋值给主表中的项目经理来作为审批人员 1.2 效果 在申请人保存或者提交后将明细表中的人名赋值给主表中对应的值2.思路与实现 在通过js测…...
opencv—常用函数学习_“干货“_5
目录 十五、图像分割 简单阈值分割 (threshold) 自适应阈值分割 (adaptiveThreshold) 颜色范围分割 (inRange) 分水岭算法 (watershed) 泛洪填充 (floodFill) GrabCut算法 (grabCut) 距离变换 (distanceTransform) 最大稳定极值区域检测 (MSER) 均值漂移滤波 (pyrMean…...
JAVA零基础学习1（CMD、JDK、环境变量、变量和键盘键入、IDEA）
JAVA零基础学习1（CMD、JDK、环境变量、变量和键盘键入、IDEA） CMD常见命令配置环境变量JDK的下载和安装变量变量的声明和初始化声明变量初始化变量 变量的类型变量的作用域变量命名规则示例代码 键盘键入使用 Scanner 类读取输入步骤示例代码 常用方法处…...
Redis的安装配置及IDEA中使用
目录 一、安装redis，配置redis.conf 1.安装gcc 2.将redis的压缩包放到指定位置解压 [如下面放在 /opt 目录下] 3.编译安装 4.配置redis.conf文件 5.开机自启 二、解决虚拟机本地可以连接redis但是主机不能连接redis 1.虚拟机网络适配器网络连接设置为桥接模式…...
ubuntu 物理内存爆炸而不使用虚拟内存的问题
ubuntu 物理内存不足时有时候会不去使用虚拟内存，让虚拟内存空闲，而直接关闭占用内存的进程，如果在进行模型测试或训练时，就会导致训练或测试进程被杀死。 1. 修改 swappiness： cat /proc/sys/vm/swappiness sudo sysc…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了：一行…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中，接口是一种抽象类型，它定义了一组方法的集合： // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的： // 矩形结构体…...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
PL0语法，分析器实现！
简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...
【HTML-16】深入理解HTML中的块元素与行内元素
HTML元素根据其显示特性可以分为两大类：块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...
3403. 从盒子中找出字典序最大的字符串 I
3403. 从盒子中找出字典序最大的字符串 I 题目链接：3403. 从盒子中找出字典序最大的字符串 I 代码如下： class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...
鸿蒙（HarmonyOS5）实现跳一跳小游戏
下面我将介绍如何使用鸿蒙的ArkUI框架，实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...
快速排序算法改进:随机快排-荷兰国旗划分详解
随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...
基于江科大stm32屏幕驱动，实现OLED多级菜单（动画效果），结构体链表实现(独创源码)
引言 在嵌入式系统中，用户界面的设计往往直接影响到用户体验。本文将以STM32微控制器和OLED显示屏为例，介绍如何实现一个多级菜单系统。该系统支持用户通过按键导航菜单，执行相应操作，并提供平滑的滚动动画效果。 本文设计了一个…...