Openlayers + Turf.js 实现云朵标注

Turf.js官网地址: http://turfjs.org/

项目中有个需求, 要在openlayers中, 手动绘制一个类似云朵的标注, 由于openlayers中并没有提供这样的方法, 所以就结合Turf.js实现了下面的效果:

这里用Turf.js 只是为了用union方法, 将多个圆拼凑起来. 

大致思路如下:

a. 便利每个点击的点

b. 当前点与下一个点距离的一半作为半径, 当前点作为圆心, 获取到圆上所有的点坐标

c. 使用turf.polygon方法, 将b步骤获得的点坐标转换成polygon

d. 每获取到一个polygon, 就跟前一个polygon通过turf.union方法联合起来, 然后作为前一个polygon

e. 调用Openlayers绘制区域的方法, 将d步骤中得到的所有区域的联合体进行区域绘制, 就得到想要的效果.

代码如下:

var allP = null;

var cnt = points.length; // points 就是上面动态中鼠标点击的点的集合

var areaCenter  = [0,0];

for (var i = 0; i < cnt; i++)

{

var cPoint = points[i];

areaCenter[0] += cPoint[0];

areaCenter[1] += cPoint[1];

var nPoint;

if (i + 1 < cnt)

nPoint = points[i+1];

else

nPoint = points[0];

var r = this.GetDistance(cPoint, nPoint) / 2; // 这里需要自己实现, 获取两点的距离

var pcenter = [(cPoint[0] + nPoint[0])/2, (cPoint[1] + nPoint[1])/2];

var degree = 360;

var p = [];

for(var t = 0; t < degree; t++){

var hudu = 2 * Math.PI / 360 * t;

var x = pcenter[0] + Math.sin(hudu)*r;

var y = pcenter[1] - Math.cos(hudu)*r;

p.push([x, y]);

}

p.push(p[0]);

var poly = turf.polygon([p]);

if (!allP)

allP = poly;

else

allP = turf.union(allP, poly);

}

this.DrawAreaByPos([allP.geometry.coordinates[0]], name); // 这里需要自己实现openlayers的绘制矩形方法