다각형안에 들어있는 마커좌표 얻기

원안의 마커좌표얻기는 쉽게 성공하였지만

다각형 안의 마커좌표얻기는 쉽지 않네요…

그려진 다각형 안에있는 마커들의 좌표만 가져오기 위해서는 어떻게 해야하나요

이전 질문에 답변 드린것 시도해 보셨나요?

네 이전 말씀해주신 방법을 시도는 해보았지만

참조해주신 https://github.com/substack/point-in-polygon 것을 어떻게 활용해야되는지요 ㅜㅜ

알려드린 알고리즘은 직교좌표계에서의 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);

            });

        }

다음과 같은 오류가 다시 발생합니다.

image

항상 답변해주심에 너무나 감사드립니다.

markers (x)
marker (o)

제가 작성한 코드는 검증이 끝났기 때문에
충분한 답변이 되었으리라 생각됩니다.

이 후부터 발생하는 에러에 대한 질문은
디버깅하면서 충분히 버그 픽스가 가능하실 거에요.

새로운 질문은 다른 쓰레드에 부탁 드리겠습니다.

1개의 좋아요

감사합니다. 제시해주신 코드를 기반으로 하니 잘 동작합니다.

image

감사합니다.