关于百度地图海量打点的问题

最新推荐文章于 2024-07-08 11:10:14 发布

zhihui_yan

最新推荐文章于 2024-07-08 11:10:14 发布

阅读量4.6k

点赞数 1

文章标签：百度地图海量点

本文链接：https://blog.csdn.net/qq_35282950/article/details/81634495

版权

关于百度地图海量打点的问题

作为今年7月份刚毕业的萌新，经过一系列纠结后，我最终还是选择了程序员这条脱发路，对了，既然说到这，我得去看看我的生姜洗发水到了没。
和我的很多同学一样的是，我毕业后并没有去找工作，而是留在了大四实习的公司。目前做前端开发，其实我本来是做后台的，前几天前端的小姐姐离职了，我就先顶着了，待遇不能说好，但也不算很差，朝九晚六，双休，总体来说还挺轻松。
唯一让我目前感到惆怅的是，前端的东西我就懂一些JS，很多前端的框架都没接触过，不知道到底从何下手，包括我现在写前端代码的软件还是eclipse。
有没有大牛告诉我一个准确的方向啊。

下面就说说我遇到的第一个我感觉比较有纪念意义的问题吧。

需求

公司最近给了我一个需求，让我在百度地图上展示大概几千左右的点，每个点除了经纬度外还有一些其他参数，要根据点中某个参数，渲染不同的颜色，单击相应的点，弹出其相应的信息，并根据该点的时间戳，和其他的几个表进行联动。

思路

我首先想到了百度地图api中海量点，API示例链接如下：http://lbsyun.baidu.com/jsdemo.htm#c1_19
于是我就稍加整理，完成了这个需求，作为一个入行两个月萌新，我的代码很乱，希望各位大佬多多指点。

代码

这里我就展示我的海量点实现过程吧

       var seaPoints1=[];
       var seaPoints2=[];
       var seaPoints3=[];
       var seaPoints4=[];
       var seaPoints5=[];
       var seaPoints6=[];
       var seaPoints7=[];
       var seaPoints8=[];

      for (var i = 0; i < mapData.length; i++) {//mapData是我从后台拿到的数据
           if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
               if(mapData[i].rsrp <= -110){
                           seaPoints1.push([mapData[i].desLon,mapData[i].desLat,mapData[i].rsrp,mapData[i].timestamp])
               }else if(-110<mapData[i].rsrp && mapData[i].rsrp<= -105){
                   seaPoints2.push([mapData[i].desLon,mapData[i].desLat,mapData[i].rsrp,mapData[i].timestamp])
               }else if(-105<mapData[i].rsrp && mapData[i].rsrp<= -100){
                   seaPoints3.push([mapData[i].desLon,mapData[i].desLat,mapData[i].rsrp,mapData[i].timestamp])
               }else if(-100<mapData[i].rsrp && mapData[i].rsrp<= -95){
                   seaPoints4.push([mapData[i].desLon,mapData[i].desLat,mapData[i].rsrp,mapData[i].timestamp])
               }else if(-95<mapData[i].rsrp && mapData[i].rsrp<= -85){
                   seaPoints5.push([mapData[i].desLon,mapData[i].desLat,mapData[i].rsrp,mapData[i].timestamp])
               }else if(-85<mapData[i].rsrp && mapData[i].rsrp<= -70){
                   seaPoints6.push([mapData[i].desLon,mapData[i].desLat,mapData[i].rsrp,mapData[i].timestamp])
               }else if(-70<mapData[i].rsrp && mapData[i].rsrp<= -50){
                   seaPoints7.push([mapData[i].desLon,mapData[i].desLat,mapData[i].rsrp,mapData[i].timestamp])
               }else if(-50<mapData[i].rsrp){
                   seaPoints8.push([mapData[i].desLon,mapData[i].desLat,mapData[i].rsrp,mapData[i].timestamp])
               }
           }else {
               alert('请在chrome、safari、IE8+以上浏览器查看本示例');
           }
       }

      if(seaPoints1.length != 0){
          dadian('#ff0000',seaPoints1);
          seaPoints1=[];
      }if(seaPoints2.length != 0){
          dadian('#ff00ff',seaPoints2);
          seaPoints2=[];
      }if(seaPoints3 != 0){
          dadian('#ffff00',seaPoints3);
          seaPoints3=[];
      }if(seaPoints4 != 0){
          dadian('#00ffff',seaPoints4);
          seaPoints4=[];
      }if(seaPoints5 != 0){
          dadian('#0101fe',seaPoints5);
          seaPoints5=[];
      }if(seaPoints6 != 0){
          dadian('#30fe30',seaPoints6);
          seaPoints6=[];
      }if(seaPoints7 != 0){
          dadian('#009600',seaPoints7);
          seaPoints7=[];
      }if(seaPoints8 != 0){
          dadian('cornflowerblue',seaPoints8);
          seaPoints8=[];
      }

      //海量点 全部显示：
      function dadian(color,point) {          
          var points = [];  // 添加海量点数据
          for(var i=0;i<point.length;i++){
              points.push(new BMap.Point(point[i][0], point[i][1]));
          }
         // points.push(new BMap.Point(lng, lat));                               
          var options = {
              size: BMAP_POINT_SIZE_SMALL,
              shape:3,
              color:color
          }
         var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
         pointCollection.addEventListener('click', function (e) {
             var Time0; 
             for(var i=0;i<point.length;i++){
                 if(point[i][0]==e.point.lng && point[i][1]==e.point.lat){
                     alert('经纬度:（' + e.point.lng + ',' + e.point.lat+'）\n'+'rsrp：'+point[i][2]);  // 监听点击事件
                     Time0 = show()+point[i][3];
                     var getTime = new Date(Time0).getTime(); //点中的时间转化为时间戳
                     liandong(getTime); //调用联动函数                 
                 }
             }
          });
          map.addOverlay(pointCollection);  // 添加Overlay
          pointCollection.disableMassClear();//不能被清除
      }