지도 위에 폴리곤 영역이 전혀 나오지 않아서 문의드립니다.
{
“type”: “FeatureCollection”,
“crs”: {
“type”: “name”,
“properties”: {
“name”: “urn:ogc:def:crs:OGC:1.3:CRS84”
}
},
“features”: [
{
“type”: “Feature”,
“properties”: {
“ALIAS”: null,
“REMARK”: “영덕천”,
“NTFDATE”: null,
“COL_ADM_SE”: “41110”,
“SGG_OID”: 2352,
“MNUM”: “64100004111020140266UJB1000006006”,
“EMD_CD”: “41463111”,
“EMD_ENG_NM”: “Yeongdeok-dong”,
“EMD_KOR_NM”: “영덕동”
},
“geometry”: {
“type”: “MultiPolygon”,
“coordinates”: [
[
[
[
37.27940625288863,
127.07048084716529
],
[
37.27931853662404,
127.0704047684397
],
[
37.27924221072307,
127.07026431567617
],
[
37.279187576384714,
127.07016379904354
],
[
37.279087668206664,
127.06998002656664
],
[
37.27885603723954,
127.06978158993067
],
하천.geojson은 카카오맵 좌표로 변환했고,
var areas = [];
function processJSONData() {
$.getJSON(“gpkg/하천.geojson”)
.done(function (geojson) {
var features = geojson.features;
features.forEach(function (feature) {
var properties = feature.properties; // Feature의 properties 가져오기
var geometry = feature.geometry;
var name = properties.EMD_KOR_NM || properties.REMARK || ‘’; // 이름 통일을 위한 프로퍼티 선택
if (geometry.type === 'MultiPolygon') {
geometry.coordinates.forEach(function (multiPolygon) {
multiPolygon.forEach(function (polygon) {
var paths = polygon.map(function (coordinates) {
return new kakao.maps.LatLng(coordinates[1], coordinates[0]);
});
areas.push({ name: name, paths: paths }); // 폴리곤 데이터를 areas 배열에 추가
});
});
} else if (geometry.type === 'Polygon') {
var paths = geometry.coordinates.map(function (coordinates) {
return coordinates.map(function (coord) {
return new kakao.maps.LatLng(coord[1], coord[0]);
});
});
areas.push({ name: name, paths: paths }); // 폴리곤 데이터를 areas 배열에 추가
}
});
// 폴리곤의 첫 번째 좌표를 가져와 지도의 중심으로 설정
var firstPolygon = areas[0].paths[0][0];
map.setCenter(firstPolygon);
displayAreas(); // 지도에 폴리곤을 추가하는 함수 호출
})
.fail(function (jqxhr, textStatus, error) {
var err = textStatus + ", " + error;
console.error("Failed to load data: ", err);
});
}
function displayAreas() {
if (!map) {
console.error(‘지도 객체가 존재하지 않습니다.’);
return;
}
areas.forEach(function (area) {
var polygon = new kakao.maps.Polygon({
paths: area.paths,
strokeWeight: 3,
strokeColor: ‘#39DE2A’,
strokeOpacity: 0.8,
strokeStyle: ‘longdash’,
fillColor: ‘#A2FF99’,
fillOpacity: 0.7
});
polygon.setMap(map);
// 폴리곤 이름 표시하기
var content = area.name;
var position = area.paths[0][0]; // 첫 번째 폴리곤의 좌표를 기준으로 이름 표시
var customOverlay = new kakao.maps.CustomOverlay({
map: map,
position: position,
content: content,
xAnchor: 0.5,
yAnchor: 0.5,
});
});
}
var yonginCenter = document.getElementById(‘map-kakao’);
var mapOption = {
center: new kakao.maps.LatLng(37.27940625288863, 127.07048084716529),
level: 8
};
var map = new kakao.maps.Map(yonginCenter, mapOption);
var mapTypeControl = new kakao.maps.MapTypeControl();
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
processJSONData();
코드는 이렇게 작성했는데, 오류를 전혀 못잡겠어서요… 어떻게 하면 될지 선생님들 도와주세요ㅠㅠ
