vue3+优化vue-baidu-map中marker点过多导致的页面卡顿问题

场景: 移动端h5中,当我们需要在地图中展示很多marker点坐标的时候,通常会使用 bm-marker ,去循环生成marker点,在数量不多的情况下是没问题的,但是随着数据量的增加,地图就会变得卡顿,以及渲染延迟,体验感极差
解决办法第一个想到的就是海量点 BmPointCollection,但是海量点明显的缺点就是不能自定义marker样式(icon)。但是业务是需要自定义图标 的,那没办法,就只能使用以下两种方式进行优化。

  1. 使用点聚合 BmlMarkerClusterer ,这个没啥好说的,缺点也很明显,不方便查看。
    <baidu-map @click="mapClick" class="bm-view" :zoom="12" :center="center"><bml-marker-clusterer :averageCenter="true" :styles="styles"><bm-marker @click="clickMarker(marker)" v-for="marker of pointList" :key="marker":position="{ lng: marker.lng, lat: marker.lat }" :icon="icon"></bm-marker></bml-marker-clusterer>
    </baidu-map>
    2.根据当前可视区域进行渲染(只渲染当前可视区域内的marker点)
    <!-- 1 正常渲染 添加ready事件  /> -->
    <baidu-map @click="mapClick" class="bm-view" :zoom="12" :center="center" @ready="readyMap"><bm-marker @click="clickMarker(marker)" v-for="marker of pointList" :key="marker":position="{ lng: marker.lng, lat: marker.lat }" :icon="icon"></bm-marker>
    </baidu-map>
    
    let bounds = ref(null) //可视区域
    let map = reactive(null) //地图实例
    let sourceList = [] //接口请求的marker点数据
    let pointList = [] //渲染的marker数据//地图ready事件
    function readyMap({ map:data }) {map = data//获取可视区域bounds.value = map.getBounds()// 地图添加缩放和拖拽事件 动态获取地图可视区域map.addEventListener('dragend', getBounds)map.addEventListener('zoomend', getBounds)
    }
    //获取地图的可视区域
    function getBounds() {if (!map) returnbounds.value = map.getBounds()
    }
    //动态计算区域内的坐标 sourceList.value
    watchEffect(() => {if (!bounds.value || !sourceList.value.length) return []//获取可视区域左下角let SouthWest = bounds.value.getSouthWest()//获取可视区域右上角                                                                                                                                                       				let NorthEast = bounds.value.getNorthEast();let markerList = [] // 筛选 获取区域内的点 sourceList.value.forEach(item => {if (item.lon >= SouthWest.lng &&item.lon <= NorthEast.lng &&item.lat >= SouthWest.lat &&item.lat <= NorthEast.lat) {markerList.push(item)}})//赋值显示pointList.value = markerList
    })
    //最后移除监听事件
    onUnmounted(() => {if (map) {map.removeEventListener("dragend", getBounds)map.removeEventListener("zoomend", getBounds)}
    })//marker icon 样式
    let icon= ref({url: 'https://xxxxxxxxxxxxxxxx.png',size: { width: 18, height: 18 },opts: {imageSize: { width: 18, height: 18 },},
    })

    如果还有其他更好的办法,欢迎补充!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/853007.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql和redis的双写一致性问题

一&#xff0c;使用方案 在使用redis作为缓存的场景下&#xff0c;我们一般使用流程如下 二&#xff0c;更新数据场景 我们此时修改个某条数据&#xff0c;如何保证mysql数据库和redis缓存中的数据一致呢&#xff1f; 按照常规思路有四种办法&#xff0c;1.先更新mysql数据&a…

16、架构-可观测性-事件日志详细解析

事件日志 事件日志是记录系统运行期间发生的离散事件的关键工具。它们在系统的可观测性中起着至关重要的作用&#xff0c;帮助开发者和运维人员追踪、分析和解决系统问题。以下是对事件日志处理各个方面的详细解析&#xff0c;并结合具体的数据案例和技术支撑。 输出 日志输出…

如何优雅的删除正式环境中的大表

引起 MySQL 数据库性能抖动的原因有很多,比如大事务、定时批量查询等,而这些原因我们一般都会注意到。但是,有一个引起性能抖动的原因却经常被我们忽视,那就是在生产环境删除无用的大表,即 DROP TABLE。 一、为什么要 DROP TABLE? 生产环境中,为什么要 DROP TABLE?相…

周五美国股市总结,标普止步四日连涨,纳指五日连创新高,法股单周跌幅两年多最深

美国消费者信心意外下滑至七个月新低&#xff0c;通胀预期反弹&#xff0c;标普大盘脱离历史最高&#xff0c;道指连跌四日&#xff0c;罗素小盘股跌至六周新低&#xff0c;有分析称对经济担忧浮现。全周标普和纳指分别累涨1.6%和3.2%&#xff0c;都是八周里第七周上涨&#xf…

btstack协议栈实战篇--LE Peripheral - Delayed Response

btstack协议栈---总目录_bt stack是什么-CSDN博客 数据包处理器用于处理配对请求。 这里列出的是主要应用代码。它初始化了 L2CAP、安全管理器,并使用从 lecreditbasedflowcontrolmodeserver:gatt 生成的预编译 ATT 数据库来配置 ATT 服务器。最后,它配置广告…

mysql和redis备份和恢复数据的笔记

一、mysql的备份及恢复方法&#xff1a; 1.完全备份与恢复 1.1物理备份与恢复 物理备份又叫冷备份&#xff0c;需停止数据库服务&#xff0c;适合线下服务器 备份数据流程&#xff1a; 第一步:制作备份文件 systemctl stop mysqld #创建存放备份文件的目录 mkdir /bakdir …

连锁门店收银系统源码!

1.系统概况 智慧新零售系统是一套针对零售行业的saas收银系统&#xff0c;线下线上一体化的收银系统。核心功能涵盖了线下收银、小程序商城、会员管理、50营销插件、ERP进销存管理、跑腿配送等行业解决方案。 2.适用行业及门店 智慧新零售是针对零售行业的saas收银系统&#…

一文入门vim

先来波快问快答。 第一个问题&#xff0c;vim是什么&#xff1f; vim就是一文本编辑器。 第二个问题&#xff0c;我们为什么要使用vim&#xff1f; 好像在终端中可选择使用的文本编辑器也不多&#xff08;其他有&#xff0c;但是相对而言vim用的比较广泛&#xff09; 第三…

Java核心(四)反射

这篇内容叫反射也不够准确&#xff0c;其实它更像是java类加载的一个延申。 Java类加载过程 之前解释过一个Java的类的加载过程&#xff0c;现在回顾一下类的加载&#xff1a; 类的加载指的是将类的字节码文件&#xff08;.class文件&#xff09;中数据读入到内存中&#xff…

C语言之数组

目录 一、数组的概念 二、一维数组的使用 数组的创建 数组的初始化 数组的使用 三、一维数组在内存中的存储 四、sizeof计算数组元素个数 五、二维数组的使用 数组的创建 数组的初始化 数组的使用 六、二维数组在内存中的存储 七、C99中的变长数组 八、总结 一、…

暑假该不该选择打工兼职?

暑假是学生们放松心情、休息调整的重要时期&#xff0c;然而&#xff0c;也有越来越多的学生选择利用这段时间参与打工兼职活动。打工兼职不仅能为学生们提供经济来源&#xff0c;还能让他们提前接触社会&#xff0c;积累实践经验。然而&#xff0c;在参与打工兼职的过程中&…

ComfyUI 宝藏插件之辅助工具

今天我们就来分享下这个 ComfyUI 辅助脚本工具的功能。 插件安装&#xff0c;小伙伴们直接在管理器里搜索「ComfyUI-Custom-Scripts」&#xff0c;点击安装就可以了&#xff0c;这里再告诉小伙伴们一个小技巧&#xff0c;点击名称可以跳转到插件所在的官网哦。 没有安装管理器…

Elasticsearch:ES|QL 同步及 async 查询操作

目录 ES|QL query API 请求 前提条件 查询参数 请求正文 响应正文 ES|Q async query API 请求 前提条件 路径参数 请求正文 响应正文 ES|QL async query get API 请求 前提条件 路径参数 查询参数 响应正文 ES|QL async query delete API 请求 前提条件 …

Rust 实战丨并发构建倒排索引

引言 继上篇 Rust 实战丨倒排索引&#xff0c;本篇我们将参考《Rust 程序设计&#xff08;第二版&#xff09;》中并发编程篇章来实现高并发构建倒排索引。 本篇主要分为以下几个部分&#xff1a; 功能展示&#xff1a;展示我们最终实现的 2 个工具的效果&#xff08;构建索…

python面试题3:什么是装饰器decorator(难度--简单)

文章目录 题目回答 题目 什么是装饰器&#xff08;decorator&#xff09;&#xff1f;&#xff08;常考题&#xff09; 回答 装饰器是一个高级功能&#xff0c;允许增加&#xff0c;修改函数&#xff0c;类&#xff0c;方法的行为。允许将现有函数传递给装饰器&#xff0c;该…

mac 本地启动rocketmq

Mac 本地起rocketmq 官网下载&#xff1a;RocketMq官网下载地址 下载后解压 如果电脑配置不高或者不希望rocketmq占用太大内存的&#xff0c;修改配置/bin/runbroker.sh JAVA_OPT"${JAVA_OPT} -server -Xms512m -Xmx512m -Xmn256m"-Xmx4g 初始堆大小 4g -Xms4g 最大…

Python武器库开发-武器库篇之SMB服务暴力破解(五十五)

Python武器库开发-武器库篇之SMB服务暴力破解(五十五) SMB服务&#xff08;Server Message Block&#xff09;是一种用于文件共享、打印机共享和其他资源共享的网络协议。它最初由IBM开发&#xff0c;后来被微软广泛采用。 SMB服务允许多台计算机在网络上共享文件和资源&…

笔记本硬盘对拷:升级硬盘的好方法!

如今电子产品更新换代的速度不断加快&#xff0c;笔记本电脑的配置也日新月异。几年前购买的笔记本硬盘容量350G曾经令你感到相当满意。但时至今日&#xff0c;这样的容量是否已经显得有些落后&#xff1f;如果你想要升级硬盘&#xff0c;笔记本硬盘对拷是一个很好的选择。 需要…

Radis初阶 Radis基本命令与在Springboot中访问Radis

阿里网盘链接 文章目录 初始NoSQL数据库对比MySQL数据库从结构方面&#xff1a;从关系方面&#xff1a;从查询方式&#xff1a;从事物方面&#xff1a; Redis入门Redis数据结构访问Radis通用命令&#xff08;tab键&#xff1a;自动补全&#xff09;KEYSDELEXISTSEXPIRETTL Str…

第63集《摄大乘论》

《摄大乘论》&#xff0c;和尚尼慈悲、诸位法师、诸位居士&#xff0c;阿弥陀佛&#xff01;(阿弥陀佛&#xff01;)请大家打开《讲义》第二一一页&#xff0c;庚五、摄持。 我们这一大科讲到佛陀法身的功德&#xff0c;这当中有十门分别&#xff0c;这个地方是第五科。佛陀的…