开发者社区> 馨语随风飞> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 1 概要         在不规则区域内均匀分布点,这个需求初看可能不好理解。如果设想一下需求场景就比较简单了。         场景1:在某个地区范围内,例如A市区有100W人口,需要将这100W人口在地图上面相对均匀的标识出来。
+关注继续查看

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

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
求字符串全排列的递归算法(java程序)
<p><textarea cols="50" rows="15" name="code" class="java">import java.util.ArrayList; import java.util.List; /** * 求字符串的全排列 * * @author wenin819 * */ public class Arrange { /** *
1147 0
从零开始学_JavaScript_系列(三)——CSS相关(基础、选择器、position、div)
(一)使用 &lt;style type=”text/css”&gt; 具体css语句 &lt;/style&gt;   (二)语法     &lt;style type="text/css"&gt;         mm {background-color:red};  /*这行表示标签为mm的,背景色为红色,如果mm替换为p,则所有&lt;p&gt;&lt;/p&gt;标
2144 0
[雪峰磁针石博客]数据分析工具pandas快速入门教程1-开胃菜
简介 Pandas是用于数据分析的开源Python库,也是目前数据分析最重要的开源库。它能够处理类似电子表格的数据,用于快速数据加载,操作,对齐,合并等。为Python提供这些增强功能,Pandas的数据类型为:Series和DataFrame。
1965 0
探索Java日志的奥秘:底层日志系统-log4j2
# 前言 log4j2是apache在log4j的基础上,参考logback架构实现的一套新的日志系统(我感觉是apache害怕logback了)。 log4j2的[官方文档](https://logging.apache.org/log4j/2.0/index.html)上写着一些它的优点: - 在拥有全部logback特性的情况下,还修复了一些隐藏问题 - API 分离:现在log4j
1167 0
使用阿里云服务器安装Z-Blog网站博客教程
阿里云服务器安装zblog网站程序记得开放端口,新手站长分享阿里云服务器安装Z-Blog网站程序教程
0 0
BSC币安链DAPP智能合约系统开发方案(成熟技术)
BSC币安链DAPP智能合约系统开发方案(成熟技术)
0 0
Vue中 引入使用 vue-virtual-scroll-list 通过虚拟列表滚动加载,解决数据量过多时 页面卡顿、体验差的问题
Vue中 引入使用 vue-virtual-scroll-list 通过虚拟列表滚动加载,解决数据量过多时 页面卡顿、体验差的问题
0 0
java实现图的深度优先搜索(DFS)和广度优先搜索(BFS)
深度优先搜索、宽度优先搜索算法属于图算法的一种。
0 0
+关注
馨语随风飞
毕业于211院校四川农业大学地理信息系统专业,毕业后从事GIS相关研发7年,熟悉C#、JAVA和前端开发,在GIS领域对地理空间算法有一定的个人认识和见解。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
深度学习论文实现:空间变换网络-第一部分
立即下载
高维向量检索技术在PG中的设计与实践
立即下载
低代码开发师(初级)实战教程
立即下载