원안의 마커좌표얻기는 쉽게 성공하였지만
다각형 안의 마커좌표얻기는 쉽지 않네요…
그려진 다각형 안에있는 마커들의 좌표만 가져오기 위해서는 어떻게 해야하나요
알려드린 알고리즘은 직교좌표계에서의 x, y값을 받아서 사용하는 것이라서
위경도는 구면좌표계에 대응되므로 정확하지 않을 수 있지만
우리나라가 그리 큰 면적이 아니라서 오차가 크지 않을 것이므로
그냥 위경도를 넣어도 대부분의 경우에서 잘 나올겁니다.
(수정)
위에 말은 뭐 대충 그렇긴한데, API 설계 미스가 약간 있어서 코드를 수정합니다.
직교좌표계의 좌표로 계산하는 코드입니다.
// https://github.com/substack/point-in-polygon/blob/master/index.js
function inside(point, vs) {
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;
};
var markers = [ /* YOUR MARKERS */ ];
// drawn polygon path
var path = polygon.getPath(); // it returns Array of Coords
var pathArr = path.map(function(coords) {
return [coords.getX(), coords.getY()]
});
var markersInPolygon = markers.filter(function(marker) {
// marker.getPosition() returns LatLng.
var mPos = marker.getPosition().toCoords();
return inside([mPos.getX(), mPos.getY()], pathArr);
});
console.log(markersInPolygon);
알고리즘 원본 코드를 살려서 활용하는 방식을 보여드리기 위해 배열로 변환하는 과정을 거쳤지만
알고리즘 내부 코드를 API에 맞게 고치면 성능이 조금 더 빨라질 수도 있습니다.
실제 돌려본 코드가 아니라서 동작하지 않을 수 있으니 양해 부탁드리고요.
지난 circle안 마커 구하기 코드에 대해서 답변드리면서 말씀드렸지만
위 코드 사용은 자유입니다. 하지만 사용함으로써 발생하는 문제에 대해서는 책임지지 않습니다.
2개의 좋아요
API가 제대로 정리가 안 된 부분이라 문서에도 없고
함수의 리턴값이 명확하지 않아서 코드에 오류가 있었는데
위의 코드 수정했습니다.
에러 해결의 요점은 아래와 같습니다.
좌표객체에 getX(), getY() 가 없다고 나오면 해당 객체는 LatLng 객체이므로
toCoords()를 실행하여 Coords 객체로 만들어 주어야 getX(), getY() 호출이 가능해 집니다.
반대로 getLng(), getLat() 가 없다고 나오면 Coords 객체이므로
toLatLng()를 실행하여 LatLng 객체로 변환해주어야 합니다.
1개의 좋아요
말씀하신 부분에 대한 오류는 넘어갔습니다.
하지만 해당과 같이 코드를 작성시
// https://github.com/substack/point-in-polygon/blob/master/index.js
function inside(point, vs) {
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;
}
if (e.overlayType === daum.maps.drawing.OverlayType.POLYGON) {
var polygon = e.target;
markers.each(function (_, marker) { // jQuery.each 를 사용하는 방식으로 변경
var path = polygon.getPath(); // it returns Array of Coords
var pathArr = path.map(function (coords) {
return [coords.getX(), coords.getY()]
});
var markersInPolygon = markers.filter(function (marker) {
// marker.getPosition() returns LatLng.
var mPos = marker.getPosition().toCoords();
return inside([mPos.getX(), mPos.getY()], pathArr);
});
console.log(markersInPolygon);
});
}
다음과 같은 오류가 다시 발생합니다.
항상 답변해주심에 너무나 감사드립니다.
markers (x)
marker (o)
제가 작성한 코드는 검증이 끝났기 때문에
충분한 답변이 되었으리라 생각됩니다.
이 후부터 발생하는 에러에 대한 질문은
디버깅하면서 충분히 버그 픽스가 가능하실 거에요.
새로운 질문은 다른 쓰레드에 부탁 드리겠습니다.
1개의 좋아요
감사합니다. 제시해주신 코드를 기반으로 하니 잘 동작합니다.
감사합니다.