最近在要实现一个openlayer的凸多边形，也遇到了不小的坑，就记录一下
1.具体的需求：
通过在界面点击，获取点击是的坐标点，来绘制一个凸多边形。
2.思考过程：
1）首先，我们得先获取点击事件发生时，触发的点的坐标
map.events.register('click', map, function (e) {
var pixel = new OpenLayers.Pixel(e.xy.x,e.xy.y);
var lonlat = map.getLonLatFromPixel(pixel);
/* lonlat.transform(new OpenLayers.Projection("EPSG:4326")); //由900913坐标系转为4326 */
var newPoint = new OpenLayers.Geometry.Point(lonlat.lon,lonlat.lat);
})
2）将获得的点做成一个凸多边形（ps:中间遇到点小坑）
(1)将获得的点坐标设置为map的点对象,点对象一步步转化为一个map的多边形对象
/**
* 绘画凸多边形图层
* @param {Object} pointList
*/
function drawConvex(pointList){
var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
var LinearArr = linearRing.components;
var polygonFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Polygon([linearRing]));
map.addLayer(vectorLayer);
vectorLayer.addFeatures([polygonFeature]);
}
接下来，重要的来了，如何将获取的无序的坐标集合转化为凸多边形的点呢?(这里也是血泪史的开始)
原本的思路：1.首先得到点，前两个点不做判断，
· 2.将第三个开始的坐标做一个判断，判断是否在凸多边形内
//判断点是否在多边形内
function PointInPoly(pt, poly) {
for (var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
&& (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
&& (c = !c);
return c;
}
3将不在凸多边形内的点（也就是新点）与多边形的其他坐标做判断，通过距离排序来找出距离最近的点，然后将新点插入点的数组中，本以为这样就可以得到一个有 序的点数组，结果代码写出来了，发现这个和预想不一样，未获得预想的效果。具体代码如下，有大牛懂的话可以指点下。
//确定插入点在多边形的位置
function idIndex(p, points){
var arr = [];
for(var i =0;i<points.length;i++){
var obj ={"id":"","distance":"","name":""};
obj.distance = getFlatternDistance(points[i],p);
obj.id=i;
obj.name = points[i].id;
arr.push(obj);
}
arr.sort(by("distance"));
console.log("arr距离:",arr);
if(arr.length<2)
return 0; return arr[1].id;
} /**
* by函数接受一个成员名字符串做为参数
并返回一个可以用来对包含该成员的对象数组进行排序的比较函数
* @param {Object} name
*/
function by(name){
return function(o,p){
var a, b;
if(typeof o === "object" && typeof p === "object" && o && p) {
a= o[name];
b= p[name];
if(a === b) {
return 0;
}
if(typeof a === typeof b) {
return a < b ? -1 : 1;
}
return typeof a < typeof b ? -1 : 1;
}else{
throw("error");
}
}
} //俩点之间的距离
function getFlatternDistance(pointa,pointb){
var f = getRad((pointa.x + pointb.x)/2);
var g = getRad((pointa.x - pointb.x)/2);
var l = getRad((pointa.y - pointb.y)/2); var sg = Math.sin(g);
var sl = Math.sin(l);
var sf = Math.sin(f); var s,c,w,r,d,h1,h2;
var a = EARTH_RADIUS;
var fl = 1/298.257; sg = sg*sg;
sl = sl*sl;
sf = sf*sf; s = sg*(1-sl) + (1-sf)*sl;
c = (1-sg)*(1-sl) + sf*sl; w = Math.atan(Math.sqrt(s/c));
r = Math.sqrt(s*c)/w;
d = 2*w*a;
h1 = (3*r -1)/2/c;
h2 = (3*r +1)/2/s; return d*(1 + fl*(h1*sf*(1-sg) - h2*(1-sf)*sg));
} var EARTH_RADIUS = 6378137.0; //单位M
var PI = Math.PI;
function getRad(d){
return d*PI/180.0;
}
最后，是实现凸包算法的代码（下面的代码是git上找到的，可以实现给一个无序数组，将其中的点排序，过滤生成一个凸多边形，可以省略掉我上面判断点是否在多边形内）
function convexHull(points) {
points.sort(function (a, b) {
return a.x != b.x ? a.x - b.x : a.y - b.y;
}); var n = points.length;
var hull = []; for (var i = 0; i < 2 * n; i++) {
var j = i < n ? i : 2 * n - 1 - i;
while (hull.length >= 2 && removeMiddle(hull[hull.length - 2], hull[hull.length - 1], points[j]))
hull.pop();
hull.push(points[j]);
} hull.pop();
return hull;
} function removeMiddle(a, b, c) {
var cross = (a.x - b.x) * (c.y - b.y) - (a.y - b.y) * (c.x - b.x);
var dot = (a.x - b.x) * (c.x - b.x) + (a.y - b.y) * (c.y - b.y);
return cross < 0 || cross == 0 && dot <= 0;
}
最后，出一张效果图
