【GIS新探索】算法实现在不规则区域内均匀分布点

        在不规则区域内均匀分布点,这个需求初看可能不好理解。如果设想一下需求场景就比较简单了。

        场景1:在某个地区范围内,例如A市区有100W人口,需要将这100W人口在地图上面相对均匀的标识出来。

        场景2:某不规则场馆,需要均匀布置展位,快速生成展位示意图。

        场景其他:规则的电线杆、移动基站等模拟生成。

 

2 设计方案

        既然是要求相对均匀的分布,我想到了格网法,即将多边形分割成特定边长的正方形格子,每个格子的中心点作为分布点。

        好处:得到的点是绝对均匀的。

        难点:需要判断格子是否在多边形范围内。

        示意图:

        

【GIS新探索】算法实现在不规则区域内均匀分布点

        其中1 2 3 4 四个点代表了不规则多边形的外接矩形角点。绿色的点用来算出1 2 3 4点的。

3 实现

        第一步先看看模拟区域。

【GIS新探索】算法实现在不规则区域内均匀分布点

        第二步画格子。

【GIS新探索】算法实现在不规则区域内均匀分布点

        第三步标注格子中间的点。

【GIS新探索】算法实现在不规则区域内均匀分布点

        第四步取出在区域范围内的格子中心点。

【GIS新探索】算法实现在不规则区域内均匀分布点

        至此,基本满足了要求,部分格子的位置细节稍作调整就好。

【GIS新探索】算法实现在不规则区域内均匀分布点

4 代码    

        第一步,绘制区域,使用的是canvas。

//公共方法,canvas绘制 var drawFunc={ ctx:null, init:function(domId){ //获取canvas容器 var can = document.getElementById(domId); //创建一个画布 var ctx = can.getContext('2d'); this.ctx=ctx; }, drawArea:function(pts,background){ this.ctx.beginPath(); var pt=pts[0]; this.ctx.moveTo(pt[0],pt[1]); for(var i=1;i<pts.length;i++){ var pt=pts[i]; this.ctx.lineTo(pt[0],pt[1]); } this.ctx.fillStyle = background; this.ctx.fill(); this.ctx.closePath(); }, drawPoint:function(point,color,size){ this.ctx.beginPath(); this.ctx.arc(point[0], point[1], size, 0, 2*Math.PI, true); this.ctx.fillStyle =color; this.ctx.fill(); this.ctx.closePath(); }, drawLine:function(pts,lineWidth,color){ this.ctx.beginPath(); this.ctx.lineWidth=lineWidth; var pt=pts[0]; this.ctx.moveTo(pt[0],pt[1]); for(var i=1;i<pts.length;i++){ var pt=pts[i]; this.ctx.lineTo(pt[0],pt[1]); } this.ctx.strokeStyle = color; this.ctx.stroke(); } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zydpjw.html