百度地图绘制大量标注点卡顿问题完美解决
1、获取大量点数据,生成point及marker,存储起来2、初始加载200(可忍受卡顿时间的临界值)3、地图拖动或缩放结束时,再次加载当前可视区域内的50个点(可忍受卡顿时间的临界值)4、地图层级放大到最大时,去掉限制,获取当前可视区域内所有点(因为可视区域经纬度很小了,因此不会出现大量数据点堆积导致卡顿)总结一句话:按照可视区域按需加载标注点,放大到最大显示当前可视区域的所有点
1、绘制的标注点较多,达到百度绘点卡顿条件2、不需要一次性全部展示,可随地图拖动缩放而显示
实现步骤:
1、为地图设置最大缩放级别var map = new BMap.Map("map_demo",{minZoom : 13, maxZoom : 18 });2、为地图注册拖动及缩放事件
map.addEventListener("moveend", queryInRect); //拖动map.addEventListener("zoomend", queryInRect); //所当3、获取标注点数据,生成marker,并显示前200个点var bounds = map.getBounds();var sw = bounds.getSouthWest();var ne = bounds.getNorthEast();var lngSpan = Math.abs(sw.lng - ne.lng);var latSpan = Math.abs(ne.lat - sw.lat);var points=[],markers=[],currMarkers={};for (var i = 0; i < 26000; i ++) {var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7+0.02), ne.lat - latSpan * (Math.random() * 0.7)-0.02);points.push(point);markers.push(new BMap.Marker(point));if(i<200){//初始显示200个点(可自定义自己能容忍卡顿时间的极限点数)map.addOverlay(markers[i]);//绘制到地图上currMarkers['markers'+i]=markers[i];//添加到已显示的点内}}4、地图拖动及缩放监听事件function queryInRect (event) {var cp = map.getBounds(); // 返回map可视区域,以地理坐标表示var sw = cp.getSouthWest(); // 返回矩形区域的西南角var ne = cp.getNorthEast(); // 返回矩形区域的东北角var zoom = map.getZoom(); //当前缩放级别var swlng=sw.lng,swlat=sw.lat,nelng=ne.lng,nelat=ne.lat,currShowCount=0;//本次拖动或缩放已显示的点数for(var i=0;i<points.length;i++){if(points[i].lng>swlng && points[i].lngswlat && points[i].latif(currMarkers['markers'+i]==undefined){//判断当前点是否已显示在地图上,显示则无需重新绘制if(zoom==18 || currShowCount<50){//放大到最大层数后,则显示当前可视区内所有点,鉴于层级较大显示的摄像头较少,因此不会出现卡顿情况map.addOverlay(markers[i]);currMarkers['markers'+i]=markers[i];//记录已显示的点currShowCount++;//本次已显示数加1}else{return;}}}}}5、打开文件体验一下,完美!
百度地图绘制大量标注点卡顿问题完美解决相关推荐
- 数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)
百度地图开发系列目录 数据可视化大屏应急管理综合指挥调度系统完整案例详解(PHP-API.Echarts.百度地图) 数据可视化大屏百度地图API开发:停车场分布标注和检索静态版 百度地图高级开发:m ...
- 解决百度地图多个标注覆盖不能响应点击的问题
百度地图开发常用网站 1.百度地图开放平台 http://lbsyun.baidu.com/ 2.百度地图 Javascript API JavaScript API v3.0 http://lbsy ...
- 使用百度地图绘制点、线、面 | Javascript
写在前面: 本文为百度地图开发系列文章之一, 前期回顾: webGIS,基于百度地图的HelloWord实现 如何使用前端css代码去掉百度地图左下角的图标 使用百度地图绘制点.线.面 | Javas ...
- android+动态地图+效果图,Android百度地图绘制圆形,圆形半径可动态变化
问题:百度地图绘制圆形,圆形半径可随进度拖动条发生改变 思路:圆形本身是一个覆盖物,可参考百度地图Demo中的OverlayDemo.java这个类进行实现.完成画圆之后,圆形半径如何随着进度条的拖动 ...
- 百度地图-绘制工具以及覆盖物的简单使用
这几天重拾了地图相关的功能,做一个小小的总结. 本文的示例的后端为flask框架,前端使用了bootstrap和jQuery以及百度地图API. 接下来是展示部分. 地图上的覆盖物表示高校所处的位置, ...
- vue结合百度地图绘制工具遇到的问题及解决方案(多边形编辑状态下形状显示不全、marker点添加事件无效)
vue如何引入百度地图绘制工具 百度地图绘制工具示例 http://developer.baidu.com/map/jsdemo.htm#f0_7 百度地图绘制工具api文档 http://api.m ...
- 百度地图绘制实时路线以及最短线路规划
如何使用百度地图绘制实时路线以及最短线路规划 最近在做百度地图的实时路线绘制,发现一些问题,比如由于定位漂移带来的路线绘制偏差,还有由于定位漂移,导致人未走动时,也会绘制路线等.百度鹰眼的线路纠偏个人 ...
- 百度地图绘制多段 驾车路线
百度地图绘制多段 驾车路线 直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...
- 百度地图绘制途径点/分段绘制路线
百度地图绘制途径点 百度地图Api地址: https://lbsyun.baidu.com/ 公司项目中要求绘制物流信息,需体现途径点 但是我在其中没有找到有关绘制路线,设定途径点的相关说明 有一个非 ...
- 百度地图API 添加自定义标注 多点标注
原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ...
最新文章
- Windows中文件夹与linux中目录的区别
- stopping NetworkManager daemon failed
- mysql创建新表失败_MySQL创建表失败的问题
- PHP 核心知识要点
- 使用iptables和ipset实现大量屏蔽恶意IP地址
- 用Pandas来美化一波图表
- 计算机一级上机考试试题题库,2016年计算机一级上机考试题库
- Linux_学习_Day3_bash
- maya python api,如何使用Maya Python API查找所有上游DG节点?
- 解决C#中ListView闪烁的办法
- 解决Linux系统下磁盘IO紧张的一种方法
- JavaScript 优先队列
- 锐捷校园网环境下使用虚拟机上网
- java图形用户界面设计
- android 朗读tts_如何设置Android以大声朗读您的文本
- mysql和JDBC学习
- LCEDA-国产PCB设计工具
- 秒懂SpringBoot之Spring对象生命周期与扩展点浅尝辄止
- 2012年4月编程语言排行榜:C语言重返第一
- 一起学习C语言:C语言发展历程以及定制学习计划