본문 바로가기

프로그래밍/이것저것 일하면서

[OpenLayers 3] 경계 좌표 가운데 지점 찾기 (Vector 레이어 가운데 지점)

반응형

악명 높은 브이월드를 할 일이 생겼다. 브이월드는 OpenLayers 3를 사용한다. 아주 옛날 버전이다. 2020년 01월 기준 최신 버전은 6.1이다. 메이저 버전이 3이나 차이난다.

어쨌든, GIS는 1도 몰라서 좌표계 어쩌고 고생했지만 가운데 지점을 찾았다.

요구사항

전국 지도에 시도 단위로 히트맵을 각각 클러스터링 한 정보를 그려달라(숫자)

문제

시도 단위로 색칠까지는 했는데 가운데 지점을 못 찾겠다.

해결

  1. GetFeature 어쩌고 해서 좌표 정보를 가져옴.
  2. 피쳐 정보로 ol.source.Vector를 만든다.
  3. vectorSource.getExtent() 하면 [minX, minY, maxX, maxY] 좌표가 나온다.

참고

Extent는 범위 정보이다. 예컨대 꼬불꼬불 경계 정보로 만들어진 벡터 레이어에서 getExtent() 하면 꼬불꼬불 레이어를 포함하는 커다란 사각형이 좌표가 나온다.

// Extent(OpenLayers API의 ol.Extent 참조)
function getCenterOfExtent(Extent) {
    var X = Extent[0] + (Extent[2] - Extent[0]) / 2;
    var Y = Extent[1] + (Extent[3] - Extent[1]) / 2;
    return [X, Y];
}

// API로 시도 경계 정보를 가져왔음 (data.response.result)

_.each(data.response.result.featureCollection.features, function(feature) {
  var geojsonObject = feature.geometry;

  var vectorSource = new ol.source.Vector({
    features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
  });

  var vectorExtent = vectorSource.getExtent();
  var centerCoordinate = getCenterOfExtent(vectorExtent);
  console.log('vectorSource extent', centerCoordinate);
});

결과

가운데 정보를 가져왔더니 인천은 백령도까지 포함해서 ㅋㅋㅋ 가운데가 바다 한가운데로 나온다. 독도 울릉도는 행정구역상 경상북도라서 경북도 가운데 지점도 동해 한가운데 ㅋㅋㅋㅋㅋㅋㅋ

시청이나 도청 좌표를 저장하고 그 지점에 보여줘야겠다...어쨌든 좌표계에 대해 공부했음.

반응형

개발자가 그리는 인스타툰 팔로우하세요!