先吹下牛:无线加载海量点进行绘制,显示时间控制在毫秒级别

实现原理:

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].lat
if(currMarkers['markers'+i]==undefined){//判断当前点是否已显示在地图上,显示则无需重新绘制
if(zoom==18 || currShowCount<50){//放大到最大层数后,则显示当前可视区内所有点,鉴于层级较大显示的摄像头较少,因此不会出现卡顿情况
map.addOverlay(markers[i]);
currMarkers['markers'+i]=markers[i];//记录已显示的点
currShowCount++;//本次已显示数加1
}else{
return;
}
}
}
}  
}  
5、打开文件体验一下,完美!
完整的js代码:
// 百度地图API功能
var map = new BMap.Map("map_demo",{minZoom : 13, maxZoom : 18 });
var point = new BMap.Point(116.400244,39.92556);
map.centerAndZoom(point, 13);
map.enableScrollWheelZoom(true);
map.addEventListener("moveend", queryInRect);  
map.addEventListener("zoomend", queryInRect);  
// 随机向地图添加26000个标注
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=[];
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];//添加到已显示的点内
}
}
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].lat 
if(currMarkers['markers'+i]==undefined){//判断当前点是否已显示在地图上,显示则无需重新绘制
if(zoom==18 || currShowCount<50){//放大到最大层数后,则显示当前可视区内所有点,鉴于层级较大显示的摄像头较少,因此不会出现卡顿情况
map.addOverlay(markers[i]);
currMarkers['markers'+i]=markers[i];//记录已显示的点
currShowCount++;//本次已显示数加1
}else{
return;
}
}
}
}  
}

百度地图绘制大量标注点卡顿问题完美解决相关推荐

  1. 数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图、标注、视频、控件、定位、检索)

    百度地图开发系列目录 数据可视化大屏应急管理综合指挥调度系统完整案例详解(PHP-API.Echarts.百度地图) 数据可视化大屏百度地图API开发:停车场分布标注和检索静态版 百度地图高级开发:m ...

  2. 解决百度地图多个标注覆盖不能响应点击的问题

    百度地图开发常用网站 1.百度地图开放平台 http://lbsyun.baidu.com/ 2.百度地图 Javascript API JavaScript API v3.0 http://lbsy ...

  3. 使用百度地图绘制点、线、面 | Javascript

    写在前面: 本文为百度地图开发系列文章之一, 前期回顾: webGIS,基于百度地图的HelloWord实现 如何使用前端css代码去掉百度地图左下角的图标 使用百度地图绘制点.线.面 | Javas ...

  4. android+动态地图+效果图,Android百度地图绘制圆形,圆形半径可动态变化

    问题:百度地图绘制圆形,圆形半径可随进度拖动条发生改变 思路:圆形本身是一个覆盖物,可参考百度地图Demo中的OverlayDemo.java这个类进行实现.完成画圆之后,圆形半径如何随着进度条的拖动 ...

  5. 百度地图-绘制工具以及覆盖物的简单使用

    这几天重拾了地图相关的功能,做一个小小的总结. 本文的示例的后端为flask框架,前端使用了bootstrap和jQuery以及百度地图API. 接下来是展示部分. 地图上的覆盖物表示高校所处的位置, ...

  6. vue结合百度地图绘制工具遇到的问题及解决方案(多边形编辑状态下形状显示不全、marker点添加事件无效)

    vue如何引入百度地图绘制工具 百度地图绘制工具示例 http://developer.baidu.com/map/jsdemo.htm#f0_7 百度地图绘制工具api文档 http://api.m ...

  7. 百度地图绘制实时路线以及最短线路规划

    如何使用百度地图绘制实时路线以及最短线路规划 最近在做百度地图的实时路线绘制,发现一些问题,比如由于定位漂移带来的路线绘制偏差,还有由于定位漂移,导致人未走动时,也会绘制路线等.百度鹰眼的线路纠偏个人 ...

  8. 百度地图绘制多段 驾车路线

    百度地图绘制多段 驾车路线 直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...

  9. 百度地图绘制途径点/分段绘制路线

    百度地图绘制途径点 百度地图Api地址: https://lbsyun.baidu.com/ 公司项目中要求绘制物流信息,需体现途径点 但是我在其中没有找到有关绘制路线,设定途径点的相关说明 有一个非 ...

  10. 百度地图API 添加自定义标注 多点标注

    原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ...

最新文章

  1. Windows中文件夹与linux中目录的区别
  2. stopping NetworkManager daemon failed
  3. mysql创建新表失败_MySQL创建表失败的问题
  4. PHP 核心知识要点
  5. 使用iptables和ipset实现大量屏蔽恶意IP地址
  6. 用Pandas来美化一波图表
  7. 计算机一级上机考试试题题库,2016年计算机一级上机考试题库
  8. Linux_学习_Day3_bash
  9. maya python api,如何使用Maya Python API查找所有上游DG节点?
  10. 解决C#中ListView闪烁的办法
  11. 解决Linux系统下磁盘IO紧张的一种方法
  12. JavaScript 优先队列
  13. 锐捷校园网环境下使用虚拟机上网
  14. java图形用户界面设计
  15. android 朗读tts_如何设置Android以大声朗读您的文本
  16. mysql和JDBC学习
  17. LCEDA-国产PCB设计工具
  18. 秒懂SpringBoot之Spring对象生命周期与扩展点浅尝辄止
  19. 2012年4月编程语言排行榜:C语言重返第一
  20. 一起学习C语言:C语言发展历程以及定制学习计划

热门文章

  1. influence和effect的区别
  2. 2018蓝桥杯校选复现3
  3. zabbix 使用教程
  4. <4>STM32F103基础知识
  5. vue项目中Echarts两个图表之间连接两条线
  6. WallPaperAbyss爬虫
  7. C++ delete释放内存的本质
  8. 经济危机下如何建立防御性SOA战略
  9. c语言用二维数组遍历 “tic tac toe“ 输出游戏结果
  10. tds for mysql_PostgreSQL9.3安装tds_fdw扩展