사파리 폴리곤 표시

itsgoeun24 · 8월 12, 2024, 2:59오전

크롬, 엣지의 경우 여러건의 폴리곤을 생성하고 노출하는데 문제가 없으나
사파리에서 접속할 경우 폴리곤이 여러 건일 때 일부만 노출되거나 하나의 폴리곤을 조회할 때 다각형이 잘려서 보이는 현상이 생깁니다.
왜 그러는 걸까요?
하단은 폴리곤을 생성할 때 호출하는 함수입니다.

var polygons = ;
function fn_setPolygon(obj){
const polygonList = obj;
let polygonArray = new Array();
let path = ;

    if(!isEmpty(polygonList)){
        for(let i=0; i<polygonList.length; i++){
            const data = polygonList[i];

            path.push(new kakao.maps.LatLng(data.rLatitude, data.rLongitude));

            if(i == polygonList.length-1){
                polygonArray.push(path);
            }
        }

// polygonArray = 폴리곤 정보입니다
        for(let i=0; i<polygonArray.length; i++) {
            const polygon = new kakao.maps.Polygon({
                map: map,
                path: polygonArray[i], // 그려질 다각형의 좌표 배열입니다
                strokeWeight: 2, // 선의 두께입니다
                strokeColor: '#d84843', // 선의 색깔입니다
                fillColor: '#d84843', // 채우기 색깔입니다
                fillOpacity: 0.3, // 채우기 불투명도 입니다
                strokeStyle: 'solid', // 선의 스타일입니다
                strokeOpacity: 0.7 // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
            });

            polygons.push(polygon);
           
        }
    }
}

lea.ju · 8월 12, 2024, 5:09오전

먼저 코드부터 확인이 필요해 보입니다.
polygonArray 배열에 [kakao.maps.LatLng(lat, lng),… ], [kakao.maps.LatLng(lat, lng),… ]처럼 path 배열 묶음을 담고 있는데 폴리곤을 생성할 땐 배열의 i번째가 아닌 object의 path를 가져오고 있습니다.
폴리곤 생성할 때 path를 polygonArray의 i 번째로 변경해도 동일한지 확인해 주세요.

itsgoeun24 · 8월 12, 2024, 5:20오전

앗 원래 코드는 polygonArray에 여러 정보를 담고있어 코드를 약간 수정해 올린거라 혼선이 조금 있었네요!
먼저 해당 코드로 크롬 엣지에는 정상적으로 폴리곤이 그려져서 나옵니다 …
사파리에만 폴리곤이 한번에 나오지 않거나 잘려서 나오는 현상이 나오는데 왜 이러는 걸까요 …

lea.ju · 8월 12, 2024, 5:26오전

해당 코드를 폴리곤 예제 데이터로 확인을 해봤는데 사파리에서 일부 잘리는 현상이 보이지 않아 확인이 어렵습니다.
현상을 확인할 수 있는 코드 전체와 테스트 데이터가 있다면 함께 첨부해 주세요.
그리고 디버깅으로 polygonArray에 담긴 path의 구조가 동일한지, polygon이 동일한 개수만큼 생성되었는지도 확인해 주세요.

itsgoeun24 · 8월 12, 2024, 5:59오전

var polygons = [];
function fn_setPolygon(obj){
    const polygonList = obj;
    let polygonArray = new Array();
    let path = [];
    let naId = '';

    if(!isEmpty(polygonList)){
        for(let i=0; i<polygonList.length; i++){
            const data = polygonList[i];

            if(naId != data.naId){
                path = [];
                naId = data.naId;
            }

            path.push(new kakao.maps.LatLng(data.rLatitude, data.rLongitude));

            if(i == polygonList.length-1 ||data.naId != polygonList[i+1].naId){
                polygonArray.push(path);
            }
        }

        for(let i=0; i<polygonArray.length; i++) {
            const polygon = new kakao.maps.Polygon({
                map: map,
                path: polygonArray[i], // 그려질 다각형의 좌표 배열입니다
                strokeWeight: 2, // 선의 두께입니다
                strokeColor: '#d84843', // 선의 색깔입니다
                fillColor: '#d84843', // 채우기 색깔입니다
                fillOpacity: 0.3, // 채우기 불투명도 입니다
                strokeStyle: 'solid', // 선의 스타일입니다
                strokeOpacity: 0.7 // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
            });

            polygons.push(polygon);
        }
    }
}

코드입니다

2. path 배열입니다.

3. path에 저장된 세개의 장소입니다(사파리)

4. 사파리에서 표시한 단건의 폴리곤입니다

lea.ju · 8월 12, 2024, 7:31오전

주신 정보로 확인해봤는데, 현상이 재현되지 않고 있습니다.
크롬, 사파리 브라우저의 개발자 도구를 열어서 polygon 요소(path 태그)를 클릭하고 스타일이 충돌되는 부분이 있는지,
d속성이 서로 같은지 확인해주세요.

그리고 제가 테스트한 코드도 첨부해드립니다.
기본 html 파일을 생성해서 동일한 현상이 보이는지 확인해주세요.
추가 문의하실 경우 사파리 버전도 함께 말씀주시면 도움이 될 것 같습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0, user-scalable=no">
    <title>Polygon</title>
    <script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=JS_APP_KEY"></script>

</head>
<body>
    <div id="map" style="width:100%;height:350px;"></div>

<script>
    let mapContainer = document.getElementById('map'),
        mapOption = {
            center: new kakao.maps.LatLng(35.84912263815911, 128.61495198559234, ),
            level: 4 
        };

    let map = new kakao.maps.Map(mapContainer, mapOption)

    let arr = [
        [
            {lat: 35.84762487223863, lng:128.61877337460626, naId: 1},
            {lat: 35.84732780020472, lng:128.61875073345357, naId: 1},
            {lat: 35.84728769407028, lng:128.61938634180945, naId: 1},
            {lat: 35.84757538406775, lng:128.6194364652145, naId: 1}
        ],
        [
            {lat: 35.84937258701646, lng: 128.61780720162852, naId: 2},
            {lat: 35.8491248405704, lng: 128.61780216819216, naId: 2},
            {lat: 35.8490834719105, lng: 128.61853184792258, naId: 2},
            {lat: 35.84933564820546, lng: 128.6185425079257, naId: 2}
        ],
        [
            {lat:  35.850945453974255, lng: 128.61560327142493, naId: 3},
            {lat:  35.850641550083196, lng: 128.6155860364017, naId: 3},
            {lat:  35.85060062202873, lng: 128.61611650371606, naId: 3},
            {lat:  35.85091571256703, lng: 128.61613950217918, naId: 3}

        ]
    ];

    function isEmpty(arr) {
        return arr.length === 0;
    }

    let polygons = [];

    for(let i = 0; i<arr.length; i++){
        fn_setPolygon(arr[i]);
    }

    function fn_setPolygon(obj){
        const polygonList = obj;
        let polygonArray = new Array();
        let path = [];
        let naId = '';

        if(!isEmpty(polygonList)){
            for(let i=0; i < polygonList.length; i++){
                const data = polygonList[i];

                if(naId != data.naId){
                    path = [];
                    naId = data.naId;
                }

                path.push(new kakao.maps.LatLng(data.lat, data.lng));

                if(i == polygonList.length-1 ||data.naId != polygonList[i+1].naId){
                    polygonArray.push(path);
                }
            }

            for(let i = 0; i < polygonArray.length; i++) {
                const polygon = new kakao.maps.Polygon({
                    map: map,
                    path: polygonArray[i], // 그려질 다각형의 좌표 배열입니다
                    strokeWeight: 2, // 선의 두께입니다
                    strokeColor: '#d84843', // 선의 색깔입니다
                    fillColor: '#d84843', // 채우기 색깔입니다
                    fillOpacity: 0.3, // 채우기 불투명도 입니다
                    strokeStyle: 'solid', // 선의 스타일입니다
                    strokeOpacity: 0.7 // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
                });

                polygons.push(polygon);
            }
        }
    }
</script>
</body>
</html>