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的绘制矩形方法
