A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

业务描述:
有一堆散点数据,用户绘制一个圆,已知圆心和半径,统计落在该圆形范围下的散点的个数。实现后效果如下图所示:

原理:
已知圆心坐标为{x:x0,y:y0},半径为radius。目标即是统计如下图的绿色点的数量:



步骤如下:
1.先根据该圆心和半径构建该圆的外包围盒,其左下角坐标为:{x:x0-radius,y:y0+radius},右上角坐标为:{x:x0+radius,y:y0-radius}。先循环散点,计算出落在该包围盒内的点数据。
2. 根据落在包围盒内的点数据,循环遍历,求每个散点距离圆心的距离,不大于半径的即是落在该圆心区域的散点,记录其个数即可。

代码说明:


两个工具方法:


  • //计算距离



  •     calDistance =(coord1,coord2) => {



  •         let dis2 = Math.pow((coord2.x - coord1.x),2)+Math.pow((coord2.y - coord1.y),2);



  •         return Math.pow(dis2,0.5);



  •     }







  •     //判断点是否在包围盒内



  •     contains = (minx,miny,maxX,maxY,coord) => {



  •         if(coord.x >= minx && coord.y >= miny && coord.y <= maxY && coord.x <= maxX) {



  •             return true;



  •         } else return false;



  •     }


主方法:



  • //查询落在某个圆内的人数



  •     searchPeopleByPoly = (coord,rad) => {



  •         //外包围盒的最大、最小坐标



  •         let maxX = coord.x + rad,minX = coord.x - rad,minY = coord.y - rad,maxY = coord.y + rad;







  •         let perhapsPeople = [];







  •         let total = 0;







  •         //先落在矩形框内的人员点



  •         let _this = this;



  •         this.props.peopleList.map((item)=>{



  •             let pPoint = {



  •                 x:item.locationX,



  •                 y:item.locationY



  •             }



  •             //先保留落在包围盒内的点



  •             if(_this.contains(minX,minY,maxX,maxY,pPoint) === true) {



  •                 perhapsPeople.push(item);



  •             }



  •         })







  •         //计算各点到圆心的距离小于等于半径



  •         perhapsPeople.map((people) => {



  •             let pPoint = {



  •                 x:people.locationX,



  •                 y:people.locationY



  •             }



  •             if(_this.calDistance(pPoint,coord) <= rad) {



  •                 total++;



  •             }



  •         })







  •         return total;



  •     }


总结: 关键是第一步,第一步的目的是先排出一些不可能的点,这样在数据量大时,对计算速度有明显的提升。

3 个回复

倒序浏览

回复 使用道具 举报
回复 使用道具 举报
赞一个
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马