Check if a polygon point is inside another in leaflet(检查一个多边形点是否在传单中的另一个内部)
问题描述
我从传单 geoJSON 地图中选择了两组多边形坐标.父子坐标是坐标是:
I'm having two sets of polygon coordinates selected from leaflet geoJSON map. The parent and child coordinates are coordinates are:
var parentCoordinates=[
[
32.05898221582174,
-28.31004731142091
],
[
32.05898221582174,
-28.308044824292978
],
[
32.06134255975485,
-28.308044824292978
],
[
32.06134255975485,
-28.31004731142091
],
[
32.05898221582174,
-28.31004731142091
]
]
var childCoordinates=[
[
32.059904895722866,
-28.30970726909422
],
[
32.059904895722866,
-28.308743809931784
],
[
32.06089194864035,
-28.308743809931784
],
[
32.06089194864035,
-28.30970726909422
],
[
32.059904895722866,
-28.30970726909422
]
]
child在父区域内绘制如图:
The child is drawn inside the parent area as shown in the picture:
使用 Ray Casting 算法 来确定是否点位于多边形内,我无法确定,因为我得到的结果是错误的.请让我知道我做错了什么或任何其他方式来确定解决方案.谢谢
Using Ray Casting algorithm to determine if the point lies inside polygon I 'm not able to determine as the result I'm getting is false. Please let me know where I'm doing wrong or any other way to determine the solution.Thanks
推荐答案
我尝试了你的算法和另一个在这里找到的 https://rosettacode.org/wiki/Ray-casting_algorithm 并且都返回正确的值.
I tried with your algorithm and another found here https://rosettacode.org/wiki/Ray-casting_algorithm and both return the right value.
也许这个小提琴可以帮助你实现:
Maybe this fiddle can help you in the implementation :
https://jsfiddle.net/4psL2hoo/1/
您的算法
// Data
var parentCoordinates=[
[
32.05898221582174,
-28.31004731142091
],
[
32.05898221582174,
-28.308044824292978
],
[
32.06134255975485,
-28.308044824292978
],
[
32.06134255975485,
-28.31004731142091
],
[
32.05898221582174,
-28.31004731142091
]
]
var childCoordinates=[
[
32.059904895722866,
-28.30970726909422
],
[
32.059904895722866,
-28.308743809931784
],
[
32.06089194864035,
-28.308743809931784
],
[
32.06089194864035,
-28.30970726909422
],
[
32.059904895722866,
-28.30970726909422
]
]
// Other algo
function test(point, vs) {
// ray-casting algorithm based on
// http://www.ecse.rpi.edu/Homepages/wrf/Research/Short_Notes/pnpoly.html
var x = point[0], y = point[1];
var inside = false;
for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) {
var xi = vs[i][0], yi = vs[i][1];
var xj = vs[j][0], yj = vs[j][1];
var intersect = ((yi > y) != (yj > y))
&& (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
if (intersect) inside = !inside;
}
return inside;
};
for (var i = 0; i < childCoordinates.length; i++) {
var testPoint = childCoordinates[i];
console.log(JSON.stringify(testPoint) + ' in parentCoordinate ' + test(testPoint, parentCoordinates));
}
Rosetta 代码算法
//https://rosettacode.org/wiki/Ray-casting_algorithm
function contains(bounds, lat, lng) {
//https://rosettacode.org/wiki/Ray-casting_algorithm
var count = 0;
for (var b = 0; b < bounds.length; b++) {
var vertex1 = bounds[b];
var vertex2 = bounds[(b + 1) % bounds.length];
if (west(vertex1, vertex2, lng, lat))
++count;
}
return count % 2;
/**
* @return {boolean} true if (x,y) is west of the line segment connecting A and B
*/
function west(A, B, x, y) {
if (A.y <= B.y) {
if (y <= A.y || y > B.y ||
x >= A.x && x >= B.x) {
return false;
} else if (x < A.x && x < B.x) {
return true;
} else {
return (y - A.y) / (x - A.x) > (B.y - A.y) / (B.x - A.x);
}
} else {
return west(B, A, x, y);
}
}
}
var square = {name: 'square', bounds: [{x: 32.05898221582174, y: -28.31004731142091}, {x: 32.05898221582174, y: -28.308044824292978}, {x: 32.06134255975485, y: -28.308044824292978}, {x: 32.06134255975485, y: -28.31004731142091}]};
var shapes = [square];
var testPoints = [{lng: 32.059904895722866, lat: -28.30970726909422}, {lng: 32.059904895722866, lat: -28.308743809931784}, {lng: 32.06089194864035, lat: -28.308743809931784},
{lng: 32.06089194864035, lat: -28.30970726909422}];
for (var s = 0; s < shapes.length; s++) {
var shape = shapes[s];
for (var tp = 0; tp < testPoints.length; tp++) {
var testPoint = testPoints[tp];
console.log(JSON.stringify(testPoint) + ' in ' + shape.name + ' ' + contains(shape.bounds, testPoint.lat, testPoint.lng));
}
}
这篇关于检查一个多边形点是否在传单中的另一个内部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:检查一个多边形点是否在传单中的另一个内部
基础教程推荐
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01