WEBGIS的多边形切割的实现.docVIP

WEBGIS的多边形切割的实现 　　摘 要： 根据开发人员对多边形进行空间操作的需求，研究在开源Leaflet的Javascript库的基础上实现WEBGIS前端的多边形切割功能。给WEBGIS管理平台提供实时在线动态切割和动态显示，避免后台切割以及软件预处理的不必要麻烦。 　　关键词： Leaflet； WEBGIS； 多边形； 切割 　　中图分类号：TP311 文献标志码：A 文章编号：1006-8228（2017）02-45-04 　　0 引言 　　在一般场景中，对多边形切割的实现基本由软件操作完成或者由后台插件提供切割接口完成，并不是在前端部分实现。因为前端计算量巨大会产生不尽人意的效率问题，也会出现浏览器崩溃、卡顿的现象。而近年来前端技术的发展突飞猛进，其计算能力大大提升，由此带来其实现的可能性，而且也已经出现可用插件。本文探讨基leaflet为WEBGIS框架，实现多边形切割插件。 　　1 切割思路及其算法 　　1.1 构造初始切割对象 　　参照leaflet官方自带的插件，采用面向对象的思维来构建切割类CutPolygon。CutPolygon继承于leaflet的核心类Hander，代码如下： 　　var CutPolygon=L.Handler.extend（{ 　　includes： L.Mixin.Events， 　　options： {}， 　　initialize： function （map， options） { 　　L.Handler.prototype.initialize.call（this， map）； 　　L.setOptions（this， options）； 　　this._map=map； 　　this._layerGroup=new L.FeatureGroup（）； 　　this._map.addLayer（this._layerGroup）； 　　}， 　　在CutPolygon中首先includes使切割?ο蟾秤枋录?委托的方法。然后再CutPolygon的初始化方法中完成以下几步： 　　⑴ 首先执行hander的初始化方法； 　　⑵ 传入map地图对象以及其他属性； 　　⑶ Cutpolygon的_map属性对象指向map参数； 　　⑷ 声明一个图层_layerGroup并添加进map去； 　　1.2 鼠标捕捉 　　该插件初始化使用时提供鼠标捕捉多边形上的点。多边形的本质为由大于等于一条线段所组成的线段首位衔接的不闭合的折线。（注：首尾衔接的不闭合为多边形，直线为折线的特殊情况）。所以求解点到多边形的距离的问题就转化为求解点到每个线段的距离。求解思路如下。 　　如图1、图2所示。标注：线段l；偏离距离H；匹配的结果坐标点P0；鼠标点p及p到l的距离h；线段两个端点A1、A2；线段所在直线l1；过线段两端点做线段的法线p1、p2；P1、p2与线段所成内夹角分别为a，b；P到A1和A2的距离分别为d1，d2； 　　以上是针对单条线段进行的判断，在一个多边形中有n条线段，则对n条线段按照以上计算方式得到共n个捕捉匹配点，对集合Zn求出最小值Hmin作为当前位置p相对多边形的捕捉点。 　　1.3 切割算法 　　多边形按简易程度又可分为凹多边形、凸多边形以及带岛状内环的多边形。由于凸多边形可以看作是凹多边形的特例，所以本文以凹多边形为代表的任意多边形来实现切割算法，针对带岛状内环的多边形我们进行搭桥无岛化处理生成新的凹多边形来进行切割[1-2]（无岛化将在另外一篇文章讲解）。 　　1.3.1 存储构造函数 　　为了数据便于管理，代码开始先定义一个构造函数用于存储交点以及多边形顶点。该构造函数参数为：距离，维度，经度，在多变行所在的索引，多边形。具体的代码参考如下（注：当不要距离参数时可默认设置为0）： 　　1.3.2 切割步骤 　　先构建实例多边形P，由点P0，P1，…，P10组成。显而易见，多边形P是一个标准的凹多边形，切割算法将以多边形P为例进行说明，如图3所示。 　　通过鼠标双击拾取多边形上一点a0，并将该多边形存储为FOCUSON焦点多边形数据集中（注：若鼠标处于某一个多边形内该多边形自动存储为FOCUSON焦点多边形数据集中，若在多边形外则把_layerGroup图层中所有的多边形都加入FOCUSON焦点多边形数据集中，鼠标对所有多边形计算距离，取最近点为拾取点，切割线第一点确定后自动将点所在多边形确定为FOCUSON数据集中惟一的多边形）。 　　鼠标自动在FOCUSON的多边形上拾取第二点a5（注：需判断a5在多边形P中的索引是否等于a0的索引，防止处于同边的情况），拾取的点与第一点构建一条线段Pol