黑马程序员技术交流社区
标题:
【上海校区】JS 计算落在某圆形范围下的点数量
[打印本页]
作者:
梦缠绕的时候
时间:
2018-7-5 09:31
标题:
【上海校区】JS 计算落在某圆形范围下的点数量
业务描述：
有一堆散点数据，用户绘制一个圆，已知圆心和半径，统计落在该圆形范围下的散点的个数。实现后效果如下图所示：
原理：
已知圆心坐标为{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;
}
总结： 关键是第一步，第一步的目的是先排出一些不可能的点，这样在数据量大时，对计算速度有明显的提升。
作者:
梦缠绕的时候
时间:
2018-7-5 10:04
作者:
吴琼老师
时间:
2018-7-12 16:38
作者:
不二晨
时间:
2018-7-12 17:11
赞一个
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2
