1 概要

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

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

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

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

2 设计方案

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

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

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

示意图:

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

3 实现

第一步先看看模拟区域。

第二步画格子。

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

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

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

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();
}
}

  

//01 创建不规则多边形
var pts=[];
pts.push([100,400]);
pts.push([800,400]);
pts.push([800,100]);
pts.push([500,100]);
pts.push([500,250]);
pts.push([100,250]);
drawFunc.drawArea(pts,"#cddc39");

  

第二步,绘制格子。这里有两个步骤,获取外接矩形和根据特定间距绘制格子。

/**
*绘制格网,并返回格网中心点
**/
function buildBox(space,startPt,endPt){
var width=endPt[0]-startPt[0];
var height=endPt[1]-startPt[1]; var y2=endPt[1];
for(var i=0;i<width;i+=space){
var x=startPt[0]+i; var y1=startPt[1]; drawFunc.drawLine([[x,y1],[x,y2]],1,"#eee");
} var x2=endPt[0];
for(var i=0;i<height;i+=space){
var x1=startPt[0];
var y=startPt[1]+i; drawFunc.drawLine([[x1,y],[x2,y]],1,"#eee");
} var points=[]; for(var i=space;i<width;i+=space){
var x=startPt[0]+i-space/2;
for(var n=space;n<height;n+=space){
var y=startPt[1]+n-space/2; points.push([x,y]);
}
} return points;
}

  

   //02 求不规则多边形外接矩形左上右下点
var box=queryMaxMinPt(pts);
//03 以一定的间距绘制格网,并返回格网中心点
var points= buildBox(20,box.startPt,box.endPt);
/*
*求多边形外接矩形左上右下点
*/
function queryMaxMinPt(points){
var x_min=100000000000000;
var x_max=-1; var y_min=100000000000000;
var y_max=-1; for(var i=0;i<points.length;i++){
var pt=points[i]; if(pt[0]<x_min)
x_min=pt[0];
if(pt[0]>x_max)
x_max=pt[0]; if(pt[1]<y_min)
y_min=pt[1];
if(pt[1]>y_max)
y_max=pt[1];
} return {
startPt:[x_min,y_min],
endPt:[x_max,y_max]
} }

    第三和四步,查找在区域范围内的格子,并绘制。

/**
*检查点是否在多边形范围内
**/
function checkInside (point, vs) {
var x = point[0], y = point[1]; var inside = false;
for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
var xi = vs[i][0], yi = vs[i][1];
var xj = vs[j][0], yj = vs[j][1]; var intersect = ((yi > y) != (yj > y))
&& (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
if (intersect) inside = !inside;
} return inside;
};

      注:checkInside方法来源自Git,地址:https://github.com/substack/point-in-polygon/blob/master/index.js

//04 遍历中心点,判断点是否在范围内
var pointCount=0;
for(var i=0;i<points.length;i++){
var pt=points[i];
if(checkInside(pt,pts)){
drawFunc.drawPoint(pt,"red",2);
pointCount++;
} } console.log("范围内有:"+pointCount+"个点");

  

以上就是核心的实现代码,如果需要下载源码请移步我的博客下载,地址:

http://www.88gis.cn/web/pages/blog/blogInfo.html?id=38d8959a-f348-41df-b507-6c10e517e7a7

查看更多GIS、WPF、JAVA、前端技术分享,请访问我的个人技术网站,查看更多技术分享。网站地址:www.88gis.cn

【GIS新探索】算法实现在不规则区域内均匀分布点的更多相关文章

  1. 【原】ios的hitTest方法以及不规则区域内触摸事件处理方法

    概述 在正常的使用场景中,我们处理了比较多的矩形区域内触摸事件,比如UIButton.UIControl.一般来说,这些控件的图形以及触摸区域都是矩形或者圆角矩形的.但是在一些特殊应用场景中我们有时不 ...

  2. ios的hitTest方法以及不规则区域内触摸事件处理方法

    概述 在正常的使用场景中,我们处理了比较多的矩形区域内触摸事件,比如UIButton.UIControl.一般来说,这些控件的图形以及触摸区域都是矩形或者圆角矩形的.但是在一些特殊应用场景中我们有时不 ...

  3. 【GIS新探索】GeoHash原理和编解码实现

    1.什么是GeoHash geohash基本原理是将地球理解为一个二维平面,将平面递归分解成更小的子块,每个子块在一定经纬度范围内拥有相同的编码.不好理解,没关系,我来找个图. 就像上面这张图,一个坐 ...

  4. AS3 在不规则区域内拖动

    原理: 1.确保拖动对象在鼠标点上,如果不确定会出现瞬间移动的感觉 2.确保触碰到非通行区域,跳回到没触碰的点 源码: import flash.events.MouseEvent; import f ...

  5. [OpenGL] 不规则区域的填充算法

    不规则区域的填充算法 一.简单递归 利用Dfs实现简单递归填充. 核心代码: // 简单深度搜索填充 (四连通) void DfsFill(int x, int y) { || y < || x ...

  6. 发表在 Science 上的一种新聚类算法

    今年 6 月份,Alex Rodriguez 和 Alessandro Laio 在 Science 上发表了一篇名为<Clustering by fast search and find of ...

  7. 【Unity游戏开发】UGUI不规则区域点击的实现

    一.简介 马三从上一家公司离职了,最近一直在出去面试,忙得很,所以这一篇博客拖到现在才写出来.马三在上家公司工作的时候,曾处理了一个UGUI不规则区域点击的问题,制作过程中也有一些收获和需要注意坑,因 ...

  8. UGUI实现不规则区域点击响应

    UGUI实现不规则区域点击响应 前言 大家吼啊!最近工作上事情特别多,没怎么打理博客.今天无意打开cnblog才想起该写点东西了.今天给大家讲一个Unity中不规则区域点击响应的实现方法,使用UGUI ...

  9. 课题:html5图像羽化(不规则区域羽化,feather,html5羽化)

    下午搜索了一堆相关文章,没有找到符合要求的. 对一张图片应用不规则区域的羽化,该怎么做呢? 首先去查了下 羽化的原理,然而没有什么用, 然后就开始从表现层去研究怎么模拟? idea 1: blur滤镜 ...

随机推荐

  1. 12 Overlap Graphs

    Problem A graph whose nodes have all been labeled can be represented by an adjacency list, in which ...

  2. centos环境下登录mysql报 ERROR 1045 (28000)怎么解决

    centos环境下登录mysql报 ERROR 1045 (28000)怎么解决 新入手一台虚拟机,Centos7系列的操作系统,安装mysql后,执行连接出现了Mysql ERROR 1045 (2 ...

  3. 以json格式打印实体类信息

    1.pom.xml <dependency> <groupId>com.google.code.gson</groupId> <artifactId>g ...

  4. javascript编码规范[原创]

    一些命名规范书或js书命名规范章节,喜欢将命名规范跟语法混在一块例如: 1.使用“var”定义.初始化变量防止产生全局变量,多变量一块定义使用“,”(本身这种方式就很有争议). 2.结尾必加“;”防止 ...

  5. Android-图像原理/绘制原理

    图像原理 先专门讲解图片,一想到图片有那些特点:    宽/高 格式jpg/jpeg/... 大小43.kb/... 图片是由像素点组成:像素点是正方形的,只是像素点很小很多,看起来可以拼接圆形⭕️, ...

  6. Android-ImageUtils工具类

    图片相关的工具类 public class ImageUtils { public static boolean saveImage(Bitmap photo, String spath) { try ...

  7. [转载]MVC、MVP以及Model2(上)

    对于大部分面向最终用户的应用来说,它们都需要具有一个可视化的UI与用户进行交互,我们将这个UI称为视图(View).在早期,我们倾向于将所有与视图相关的逻辑糅合在一起,这些逻辑包括数据的呈现.用户操作 ...

  8. Tempdb--Allocation Bottleneck

    Alloctaion bottleneck refers to contention in the system pages that store allocation structures. PFS ...

  9. windows下简单验证码识别——完美验证码识别系统

    此文已由作者徐迪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 讲到验证码识别,大家第一个可能想到tesseract.诚然,对于OCR而言,tesseract确实很强大,自带 ...

  10. Webpack vs Rollup

    本文由作者余伯贤授权网易云社区发布. 2017年4月份的时候,Facebook将React的构建工具换成了Rollup.很多人就有疑问了,Webpack不也是Facebook团队开发的吗,为什么不使用 ...