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…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候，遇到了一些问题，记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器
——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台，覆盖应用全生命周期测试需求，主要提供五大核心能力： 测试类型检测目标关键指标功能体验基…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包： for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
python执行测试用例，allure报乱码且未成功生成报告
allure执行测试用例时显示乱码：‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...
使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度
文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...
C++.OpenGL （20/64）混合（Blending）
混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
scikit-learn机器学习
# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...
Caliper 配置文件解析：fisco-bcos.json
config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...