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

长沙企业网站建设团队/宁波网站制作设计

news 文章来源：https://blog.csdn.net/qq_36017964/article/details/140384001 2025/3/14 0:00:09
长沙企业网站建设团队,宁波网站制作设计,湛江网站建设推广,如何让wordpress id连续需求 用户点击行政区划等操作后，从后台获取区域内的点位数据，在地图上聚合显示。用户手动取消聚合，点位直接渲染在地图上。 实现过程 使用后台返回的点位数据，通过new ol.source.Vector({features})创建矢量数据源。使用new ol.source.Cluster({source})创建聚合标注数据…

需求

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

实现过程

  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

Python实现音频均衡和降噪

使用librosa库来读取音频文件&#xff0c;音频处理是一个复杂过程&#xff0c;这里只是简单的进行降噪和均衡。 import librosa import soundfile as sf def improve_audio_quality(input_file, output_file): # 读取音频文件 audio, sample_rate librosa.load(input_…...

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

【JavaScript 算法】贪心算法：局部最优解的构建

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、贪心算法的基本概念贪心算法的适用场景 二、经典问题及其 JavaScript 实现1. 零钱兑换问题2. 活动选择问题3. 分配问题 三、贪心算法的应用四、总结 贪心算法&#xff08;Greedy Algorithm&#xff09;是一种逐步构建解…...

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

Azcopy Sync同步Azure文件共享

文章目录 Azcopy Sync同步文件共享一、工作原理二、安装 AzCopy在 Windows 上在 Linux 上 三、资源准备1. 创建源和目标 Azure 存储账户2. 创建源和目标文件共享3. 确定路径4. 生成源和目的存储账户的共享访问签名&#xff08;SAS&#xff09;令牌配置权限示例生成的 URL 四、A…...

编程日记 2024/7/18 3:34:43

单例模式 饿汉式和懒汉式的区别

单例模式&#xff08;Singleton Pattern&#xff09;是设计模式中最简单、最常见、最容易实现的一种模式。它确保一个类仅有一个实例&#xff0c;并提供一个全局访问点。单例模式主要有两种实现方式&#xff1a;饿汉式&#xff08;Eager Initialization&#xff09;和懒汉式&am…...

编程日记 2024/7/18 3:33:42

Python中的模块和包的定义以及如何在Python中导入和使用它们

在Python中&#xff0c;模块&#xff08;Module&#xff09;和包&#xff08;Package&#xff09;是组织代码以便重用和共享的基本单元。它们使得Python代码更加模块化&#xff0c;易于管理和维护。 模块&#xff08;Module&#xff09; 模块是一个包含Python代码的文件&…...

编程日记 2024/7/18 3:27:36

设计模式使用场景实现示例及优缺点（结构型模式——组合模式）

结构型模式 组合模式&#xff08;Composite Pattern&#xff09; 组合模式使得用户对单个对象和组合对象的使用具有一致性。 有时候又叫做部分-整体模式&#xff0c;它使我们树型结构的问题中&#xff0c;模糊了简单元素和复杂元素的概念&#xff0c;客户程序可以像处理简单元…...

编程日记 2024/7/18 3:25:33

《系统架构设计师教程（第2版）》第11章-未来信息综合技术-06-云计算(Cloud Computing) 技术概述

文章目录 1. 相关概念2. 云计算的服务方式2.1 软件即服务 (SaaS)2.2 平台即服务 (PaaS)2.3 基础设施即服务 (IaaS)2.4 三种服务方式的分析2.4.1 在灵活性2.4.2 方便性方 3. 云计算的部署模式3.1 公有云3.2 社区云3.3 私有云3.4 混合云 4. 云计算的发展历程4.1 虚拟化技术4.2 分…...

编程日记 2024/7/18 3:15:23

网络安全工作者如何解决网络拥堵

网络如同现代社会的血管&#xff0c;承载着信息的血液流动。然而&#xff0c;随着数据流量的激增&#xff0c;网络拥堵已成为不容忽视的问题&#xff0c;它像是一场数字世界的交通堵塞&#xff0c;减缓了信息传递的速度&#xff0c;扰乱了网络空间的秩序。作为网络安全的守护者…...

编程日记 2024/7/18 3:14:23

电脑显示mfc140u.dll丢失的修复方法,总结7种有效的方法

mfc140u.dll是什么&#xff1f;为什么电脑会出现mfc140u.dll丢失&#xff1f;那么mfc140u.dll丢失会给电脑带来什么影响&#xff1f;mfc140u.dll丢失怎么办&#xff1f;今天详细给大家一一探讨一下mfc140u.dll文件与mfc140u.dll丢失的多种不同解决方法分享&#xff01; 一、mfc…...

编程日记 2024/7/18 3:04:14

ospf的MGRE实验

第一步&#xff1a;配IP [R1-GigabitEthernet0/0/0]ip address 12.0.0.1 24 [R1-GigabitEthernet0/0/1]ip address 21.0.0.1 24 [R1-LoopBack0]ip address 192.168.1.1 24 [ISP-GigabitEthernet0/0/0]ip address 12.0.0.2 24 [ISP-GigabitEthernet0/0/1]ip address 21.0.0.2 24…...

编程日记 2024/7/18 2:58:08