谷歌地图多边形自相交检测
Google Maps Polygons self intersecting detection
我正在尝试实现一个多边形自交算法从谷歌地图API V3多边形。
目标只是检测是或否,用户绘制的简单多边形是否自交叉。
我发现了这个非常有趣的链接,但它假设多边形顶点的坐标是geoJSON格式的。然而,这不是我的情况;我只能在polygoncomplete
事件中使用polygon.getPath()
检索多边形坐标。
我是这样获取坐标的:
google.maps.event.addDomListener(drawingManager, 'polygoncomplete', function(polygon)
{
var polygonBounds = polygon.getPath();
var coordinates = [];
for(var i = 0 ; i < polygonBounds.length ; i++)
{
vertice = {
"Latitude" : polygonBounds.getAt(i).lat(),
"Longitude" : polygonBounds.getAt(i).lng()
}
coordinates.push(vertice );
}
}
如何转换这些坐标,由polygon.getpath()
到geoJSON格式?
有没有更好的方法来检测谷歌地图多边形是否自相交?如果是这样,你能分享一些代码示例,而不仅仅是一个数学解释吗?
PS:我已经看到了这个链接,但没有任何代码样本,我有点迷路了。
您不需要将它们转换为GeoJSON来使用jsts库,您需要将它们从google.maps.LatLng对象转换为jsts.geo . coordinates。而不是使用这个:
var geoJSON2JTS = function(boundaries) {
var coordinates = [];
for (var i = 0; i < boundaries.length; i++) {
coordinates.push(new jsts.geom.Coordinate(
boundaries[i][1], boundaries[i][0]));
}
return coordinates;
};
使用这个,它将把google.maps.Polygon路径中的坐标转换为JTS格式:
var googleMaps2JTS = function(boundaries) {
var coordinates = [];
for (var i = 0; i < boundaries.getLength(); i++) {
coordinates.push(new jsts.geom.Coordinate(
boundaries.getAt(i).lat(), boundaries.getAt(i).lng()));
}
return coordinates;
};
然后更改"findSelfIntersects"这样的:
/**
* findSelfIntersects
*
* Detect self-intersections in a polygon.
*
* @param {object} google.maps.Polygon path co-ordinates.
* @return {array} array of points of intersections.
*/
var findSelfIntersects = function(googlePolygonPath) {
var coordinates = googleMaps2JTS(googlePolygonPath);
var geometryFactory = new jsts.geom.GeometryFactory();
var shell = geometryFactory.createLinearRing(coordinates);
var jstsPolygon = geometryFactory.createPolygon(shell);
// if the geometry is aleady a simple linear ring, do not
// try to find self intersection points.
var validator = new jsts.operation.IsSimpleOp(jstsPolygon);
if (validator.isSimpleLinearGeometry(jstsPolygon)) {
return;
}
var res = [];
var graph = new jsts.geomgraph.GeometryGraph(0, jstsPolygon);
var cat = new jsts.operation.valid.ConsistentAreaTester(graph);
var r = cat.isNodeConsistentArea();
if (!r) {
var pt = cat.getInvalidPoint();
res.push([pt.x, pt.y]);
}
return res;
};
概念验证小提琴(credit to HoffZ)
代码片段:
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(62.1482, 6.0696)
};
var drawingManager = new google.maps.drawing.DrawingManager({
drawingControl: false,
polygonOptions: {
editable: true
}
});
var googleMaps2JTS = function(boundaries) {
var coordinates = [];
for (var i = 0; i < boundaries.getLength(); i++) {
coordinates.push(new jsts.geom.Coordinate(
boundaries.getAt(i).lat(), boundaries.getAt(i).lng()));
}
coordinates.push(coordinates[0]);
console.log(coordinates);
return coordinates;
};
/**
* findSelfIntersects
*
* Detect self-intersections in a polygon.
*
* @param {object} google.maps.Polygon path co-ordinates.
* @return {array} array of points of intersections.
*/
var findSelfIntersects = function(googlePolygonPath) {
var coordinates = googleMaps2JTS(googlePolygonPath);
var geometryFactory = new jsts.geom.GeometryFactory();
var shell = geometryFactory.createLinearRing(coordinates);
var jstsPolygon = geometryFactory.createPolygon(shell);
// if the geometry is aleady a simple linear ring, do not
// try to find self intersection points.
var validator = new jsts.operation.IsSimpleOp(jstsPolygon);
if (validator.isSimpleLinearGeometry(jstsPolygon)) {
return;
}
var res = [];
var graph = new jsts.geomgraph.GeometryGraph(0, jstsPolygon);
var cat = new jsts.operation.valid.ConsistentAreaTester(graph);
var r = cat.isNodeConsistentArea();
if (!r) {
var pt = cat.getInvalidPoint();
res.push([pt.x, pt.y]);
}
return res;
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
drawingManager.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) {
//var polyPath = event.overlay.getPath();
var intersects = findSelfIntersects(polygon.getPath());
console.log(intersects);
if (intersects && intersects.length) {
alert('Polygon intersects itself');
} else {
alert('Polygon does not intersect itself');
}
});
#map {
width: 500px;
height: 400px;
}
<script src="https://maps.google.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.4.0/jsts.min.js"></script>
<p>
Draw a polygon on the map
</p>
<div id="map">
</div>
相关文章:
- 用Chrome检测Windows8+中的自定义协议处理程序
- Three.js Raycaster.intersectObject仅检测前表面上的相交
- 使用 JSTS 缓冲区标识自相交多边形
- 在 chrome 和 Safari 浏览器中检测自定义协议的方法
- 如何防止用户使用 Google 地图绘图管理器创建自相交多边形
- 检测两个相交圆形元素的悬停
- 自定义 DNN 皮肤无法检测到底部滚动,但它可以反向工作 (7.1.1)
- 如何在检测到浏览器关闭事件时显示自定义弹出窗口
- ios:如何检测自定义url方案链接是否失败
- 使用自定义jQuery滑块和键盘键检测事件
- js Raycaster没有与我的自定义网格相交
- 检测自定义字体何时加载
- 谷歌地图多边形自相交检测
- 如何检测表单输入的值自设置以来是否发生了变化
- 如何检测自定义URL方案是否可用
- 如何检测或注册自定义元素加载并准备与之交互的回调
- 从自定义元素检测事件侦听器(惰性地发出事件)
- 跨浏览器自定义协议检测
- Jquery检测命令/自定义BBcode
- turf.js OpenLayers3 Draw中自相交多边形的相交错误