폴리곤크기에 맞게 동적으로 수정하게끔하니까 아무것도 뜨지않습니다

지도/로컬 API
#1

수정전 코드

Roy Map body, html { margin: 0; padding: 0; width: 100%; height: 100%; } #map { width: 100%; height: 100%; } .area { background-color: #fff; border: 1px solid #ccc; padding: 2px; } #fileInput { position: absolute; top: 10px; left: 10px; z-index: 5; } 
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=dddee484c0400c9f057d02ab6d4dad25&libraries=services"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    let map;
    $(document).ready(function () {
        map = new kakao.maps.Map(document.getElementById('map'), {
            center: new kakao.maps.LatLng(37.6172292, 127.1387157),
            level: 8
        });

        let customOverlay = new kakao.maps.CustomOverlay({
            content: '<div class="area"></div>',
            xAnchor: 0.5,
            yAnchor: 1.1,
            zIndex: 3
        });

        document.getElementById('fileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const content = e.target.result;
                    const json = JSON.parse(content);
                    processData(json);
                };
                reader.readAsText(file);
            }
        });
    });

    let polygons = [];

    function processData(json) {
        let features = json.features; 

        features.forEach(feature => {
            let coordinates;
            let name = feature.properties.adm_nm; 
            
            if (feature.geometry.type === 'MultiPolygon') {
                coordinates = feature.geometry.coordinates[0][0]; 
            } else if (feature.geometry.type === 'Polygon') {
                coordinates = feature.geometry.coordinates[0]; 
            }

            if (coordinates && name) {
                displayArea(coordinates, name);
            }
        });
    }

    function displayArea(coordinates, name) {
        let path = [];
        let points = [];

    coordinates.forEach(coordinate => {
        let point = {x: coordinate[1], y: coordinate[0]};
    points.push(point);
    path.push(new kakao.maps.LatLng(coordinate[1], coordinate[0]));
});

let polygon = new kakao.maps.Polygon({
    map: map,
    path: path,
    strokeWeight: 2,
    strokeColor: '#004c80',
    strokeOpacity: 0.8,
    fillColor: '#fff',
    fillOpacity: 0.7
});

polygons.push(polygon);

let centroidPoint = centroid(points);
let content = '<div class="area">' + name + '</div>';
let customOverlayForName = new kakao.maps.CustomOverlay({
    position: centroidPoint,
    content: content,
    yAnchor: 0.5
});
customOverlayForName.setMap(map);

kakao.maps.event.addListener(polygon, 'mouseover', function(mouseEvent) {
    polygon.setOptions({ fillColor: '#09f' });
    customOverlay.setContent(content);
    customOverlay.setPosition(mouseEvent.latLng);
    customOverlay.setMap(map);
});

kakao.maps.event.addListener(polygon, 'mousemove', function(mouseEvent) {
    customOverlay.setPosition(mouseEvent.latLng);
});

kakao.maps.event.addListener(polygon, 'mouseout', function() {
    polygon.setOptions({ fillColor: '#fff' });
    customOverlay.setMap(null);
});

kakao.maps.event.addListener(polygon, 'click', function() {
    let level = map.getLevel() - 2;
    map.setLevel(level, {anchor: centroidPoint, animate: {duration: 350}});
});

}

function centroid(points) {
let sumX = 0;
let sumY = 0;
points.forEach(function(point) {
sumX += point.x;
sumY += point.y;
});
return new kakao.maps.LatLng(sumX / points.length, sumY / points.length);
}

javascript

let content = ‘

’ + name + ‘
’;
let customOverlayForName = new kakao.maps.CustomOverlay({
position: centroidPoint,
content: content,
yAnchor: 1,
xAnchor: 0.5,
zIndex: 4
});
customOverlayForName.setMap(map);

</script>
------------------------------------------------------------------------------------------- 수정 후 코드 Roy Map body, html { margin: 0; padding: 0; width: 100%; height: 100%; } #map { width: 100%; height: 100%; } .area { background-color: #fff; border: 1px solid #ccc; padding: 2px; } #fileInput { position: absolute; top: 10px; left: 10px; z-index: 5; } 
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=dddee484c0400c9f057d02ab6d4dad25&libraries=services"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    let map;
    $(document).ready(function () {
        map = new kakao.maps.Map(document.getElementById('map'), {
            center: new kakao.maps.LatLng(37.6172292, 127.1387157),
            level: 8
        });

        let customOverlay = new kakao.maps.CustomOverlay({
            content: '<div class="area"></div>',
            xAnchor: 0.5,
            yAnchor: 1.1,
            zIndex: 3
        });

        document.getElementById('fileInput').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    const content = e.target.result;
                    const json = JSON.parse(content);
                    processData(json);
                };
                reader.readAsText(file);
            }
        });
    });

    let polygons = [];

    function processData(json) {
        let features = json.features;

        features.forEach(feature => {
            let coordinates;
            let name = feature.properties.adm_nm;
            
            if (feature.geometry.type === 'MultiPolygon') {
                coordinates = feature.geometry.coordinates[0][0]; 
                coordinates = feature.geometry.coordinates[0]; 
            }

            if (coordinates && name) {
                displayArea(coordinates, name);
            }
        });
    }

    function displayArea(coordinates, name) {
        let path = [];
        let points = [];

        coordinates.forEach(coordinate => {
            let point = {x: coordinate[1], y: coordinate[0]};
            points.push(point);
            path.push(new kakao.maps.LatLng(coordinate[1], coordinate[0]));
        });

        let polygon = new kakao.maps.Polygon({
            map: map,
            path: path,
            strokeWeight: 2,
            strokeColor: '#004c80',
            strokeOpacity: 0.8,
            fillColor: '#fff',
            fillOpacity: 0.7
        });

        polygons.push(polygon);

        let centroidPoint = centroid(points);
        let content = '<div class="area" style="font-size: ' + calculateFontSize(polygon) + 'px;">' + name + '</div>'; 
        let customOverlayForName = new kakao.maps.CustomOverlay({
            position: centroidPoint,
            content: content,
            yAnchor: 0.5
        });
        customOverlayForName.setMap(map);

        kakao.maps.event.addListener(polygon, 'mouseover', function(mouseEvent) {
            polygon.setOptions({ fillColor: '#09f' });
            customOverlay.setContent(content);
            customOverlay.setPosition(mouseEvent.latLng);
            customOverlay.setMap(map);
        });

        kakao.maps.event.addListener(polygon, 'mousemove', function(mouseEvent) {
            customOverlay.setPosition(mouseEvent.latLng);
        });

        kakao.maps.event.addListener(polygon, 'mouseout', function() {
            polygon.setOptions({ fillColor: '#fff' });
            customOverlay.setMap(null);
        });

        kakao.maps.event.addListener(polygon, 'click', function() {
            let level = map.getLevel() - 2;
            map.setLevel(level, {anchor: centroidPoint, animate: {duration: 350}});
        });
    }

    function centroid(points) {
        let sumX = 0;
        let sumY = 0;
        points.forEach(function(point) {
            sumX += point.x; 
            sumY += point.y; 
        });
        return new kakao.maps.LatLng(sumX / points.length, sumY / points.length);
    }

    function calculateFontSize(polygon) {
        const scalingFactor = 0.2;
        const area = kakao.maps.geometry.spherical.computeArea(polygon.getPath());
        return Math.sqrt(area) * scalingFactor;
    }
</script>

어느부분을 수정해야 동일하게폴리곤이 생성되어 지역명이 표기되고 할까요…

#2

안녕하세요~

코드만 보고 대략적으로 추측하기엔 무리가 있습니다.
오류메세지와, 결과화면 등 종합적으로 필요합니다.

다만 수정된 코드에서
if (feature.geometry.type === ‘MultiPolygon’) {
coordinates = feature.geometry.coordinates[0][0];
coordinates = feature.geometry.coordinates[0];
}

이 부분이 의도한 것이 아닐것 같은 느낌이 드네요;;

[0][0]을 넣고나서 다시 [0]을 넣으면 덮어쓰기가 되니까요.
한번 확인해 보세요.

1개의 좋아요