我正在使用一个
JavaScript画布的项目,需要能够将光标捕捉到距离多边形一定距离.我已经可以捕捉到多边形本身,但是我需要将光标放在更远处.
据我所知,最好的方法是缩放多边形并捕捉到这一点,但是当我缩放多边形时,旧多边形的边缘与新多边形的边缘之间的距离并不总是匹配向上.
这里是一个问题的例子：
编辑：灰色表示原始多边形,如果我正确缩放多边形,则红色是我得到的,绿色是我要完成的
我已经尝试将多边形翻译成原点并乘以比例因子,但似乎不能将每个边缘缩小特定距离.
解决方法
我可以使用
JSTS库(
JTS的JavaScript端口)提供解决方案.图书馆有多边形的充气/放气(抵消)的方法.
如果要获得具有不同类型边缘的膨胀多边形,可以设置帽和连接样式.你唯一需要做的就是将你的多边形坐标转换为一个非常简单的JSTS坐标：
函数vectorCoordinates2JTS(多边形){
var coordinates = [];
for(var i = 0; i< polygon.length; i){
coordinates.push(new jsts.geom.Coordinate(polygon [i] .x,polygon [i] .y));
}
返回坐标;
}
一旦你转换了坐标,你可以膨胀你的多边形：
function inflatePolygon(poly,spacing) {
var geoInput = vectorCoordinates2JTS(poly);
geoInput.push(geoInput[0]);
var geometryFactory = new jsts.geom.GeometryFactory();
var shell = geometryFactory.createPolygon(geoInput);
var polygon = shell.buffer(spacing);
//try with different cap style
//var polygon = shell.buffer(spacing,jsts.operation.buffer.BufferParameters.CAP_FLAT);
var inflatedCoordinates = [];
var oCoordinates;
oCoordinates = polygon.shell.points.coordinates;
for (i = 0; i < oCoordinates.length; i++) {
var oItem;
oItem = oCoordinates[i];
inflatedCoordinates.push(new Vector2(Math.ceil(oItem.x),Math.ceil(oItem.y)));
}
return inflatedCoordinates;
}
附加信息：
我通常使用这种类型的充气/放气(稍加更改)来设置在地图上绘制的多边形上的半径边界(使用单张或Google地图).您只需将lat,lng对转换为JSTS坐标,其他所有内容都相同.例：
