[카테고리:] GIS 개발

작성일자

주소 데이터를 지도에 표시하고 싶다구요! (지오코딩)

주소 데이터를 지도에 쫙 표시하는 쉬운 방법이 있습니다. 이를 위해서는 주소를 좌표로 변환해야 하는데요. 이를 전문 용어로 지오코드(Geocode) 또는 지오코딩(Geocoding)이라고 합니다.

예를 들어 다음처럼 엑셀로 정리된 주소 데이터가 있습니다.

이 데이터를 아래처럼 엑셀에서 CSV라는 파일로 변환합니다. (2024년 7월 20일을 기준으로 CSV로 변환하지 않고 엑셀 파일을 그대로 사용할 수 있어요!) CSV로 변환되면 엑셀이 설치되어 있지 않아도 텍스트 편집기에서 쉽게 보고 편집도 할 수 있어요.

이제 주소 데이터 준비는 완료! 간단하죠? 다음으로 웹브라우저에서 지오서비스웹(https://www.geoservice.co.kr)에 접속합니다.

아직 가입이 안되어 있다면 샤샤삭 가입하시면 됩니다. 그리고 로그인해서 앞서 준비한 CSV 파일을 업로드 해야 합니다. 아래처럼 3단계로 업로드할 수 있는 창을 표시할 수 있어요.

위처럼 진행하면 데이터를 업로드할 수 있는 창이 다음처럼 나타나요.

이 창에서 CSV 파일을 선택하거나 드레그앤드랍해서 업로드할 수 있어요. 위의 모습은 이미 해당 CSV 파일을 업로드하기 위해 선택한 결과구요. 이렇게 되었다면 추가 버튼을 클릭해서 업로드 합니다. 업로드가 완료되면 아카이브에 업로드한 항목이 나타나요.

이제 이 데이터를 지도에 표시하기 위해 좌표로 변환해 볼께요. 아카이브 창을 닫고 메인메뉴에서 “주소를 좌표로 변환”을 찾아 실행합니다.

그럼 지오코딩 창이 표시되는데, 여기서 아래처럼 변환할 데이터 파일을 선택합니다.

그럼, 선택된 데이터 파일의 내용이 아래처럼 지오코딩 창에 표시되요.

컬럼명(필드명)을 영문으로 해야 하는데 한글로 하면 위에서처럼 자동으로 영문으로 변경되니까 CSV 파일을 만들 때 처음부터 영문으로 지정하면 좋아요. 자! 여기서 중요해요. 주소 값을 가진 필드명을 정확히 지정해야 합니다. 위의 경우는 field2가 주소값을 가지고 있으니 아래처럼 “주소 필드”에 field2를 선택하면 되요.

주소 필드를 지정하면 지정된 필드의 데이터를 보여주고 정말 맞는지 물어보니깐, 잘보고 확인하세요. 이제 정말 모든 준비가 끝났어요! 좌표로 변환하기 위해서 아래 화면의 버튼을 클릭하면 변환이 시작되요!

변환이 완료되면 다음처럼 그 결과가 표시되요.

변환할 주소 건수가 약 25,900개 정도 되는데 소요 시간이 2분 19초 걸렸네요. 변환된 데이터를 다운로드 받기 위해서는 아카이브에 업로드해야 하니 위의 화면에서 “예” 버튼을 클릭합니다. 그러면 결과 데이터를 압축하고 다음처럼 아카이브에 업로드할 수 있는 창이 떠요.

“제목”에 원하는 내용을 입력하면 되고 “추가” 버튼을 클릭하면 아카이브에 입력된 제목으로 업로드가 되요. 여기서 다시 아카이브를 클릭해서 아카이브를 살펴보면 다음과 같아요. 보시면 업로드된 결과 파일이 보입니다.

업로드된 결과 파일은 레이어로 추가해서 바로 지도에서 살펴볼 수도 있고 파일을 다운로드 받을 수도 있어요. 아래처럼 결과 파일 항목을 클릭해서 레이어로 추가할지 다운로드 받을지 선택할 수 있어요.

다운로드 받으면 다운로드 폴더에 파일이 저장되는데, 결과 파일의 변환 좌표가 10,000개 이하일 때는 무료로 받을 수 있어요. 여기서는 다운로드 받지 않고 “레이어로 추가하기”를 선택하면 레이어 이름을 원하는 내용으로 입력하고 진행하면 다음처럼 지도에 레이어로 추가되요.

지도에 표시된 포인트를 클릭하면 위의 화면처럼 상세 정보가 팝업으로 표시되어 해당 위치에 대한 정보를 바로 확인할 수 있어요.

원한다면 지오코딩을 통해 생성된 결과를 편집할 수 있습니다. 그에 대한 내용은 아래를 참고하시기 바래요.

정밀한 지오코딩 만들기 (편집 기능 활용)

작성일자

대한민국 행정구역(SVG) 다운로드

대한민국의 행정구역을 SVG(Scalable Vector Graphics) 형식으로 내려받을 수 있습니다. 보고서 및 웹앱 개발에 유용하게 사용할 수 있는 데이터로 (주)지오서비스에서 직접 가공하여 제공됩니다. 최신 자료는 GEOSERVICE-WEB의 아카이브를 통해 다운로드 받을 수 있고 아래와 같습니다.

향후 지속적으로 보완 되며 찾는 자료가 없거나 커스터마이징이 필요할 경우 문의하시기 바랍니다. 아래는 그 샘플입니다.

[xyz-ihs snippet=”SVG-DAIGU-201901″]

[xyz-ihs snippet=”JEONLABUKDO-2019″]

작성일자

지오서비스웹(GEOSERVICE-WEB)으로 만든 통계 지도

지오서비스웹으로 만들 수 있는 통계지도입니다. 입력 데이터는 서울시 행정구역도와 인구 데이터입니다.

먼저 색상 단계 구분도입니다. 서울시 행정구역도에 포함되는 포인트 인구 데이터를 집계해서 얻은 결과입니다.

다음은 핵사곤 영역을 이용한 색상 단계 구분도인데요. 핵사곤 영역은 서울시 행정구역도를 이용해 지오서비스웹의 핵사곤 생성 기능을 이용해 만들었습니다.

다음은 밀도도입니다.

지오서비스웹은 웹에서 누구나 사용할 수 있는 서비스이며 자세한 내용은 아래의 URL을 참조하시기 바랍니다.

지오서비스웹(GEOSERVICE-WEB)

작성일자

SQL로 문자열 일부만 업데이트하기

42423421라는 문자열에서 42는 2개 존재하는데, 이 중 앞부분에 해당하는 42만을 51로 변경하고자 합니다. 즉 42423421를 51423511이 아닌 51423421로 말입니다. 먼저 SELECT 문으로 제대로된 변환이 이루어지는 확인해 보면 ..

SELECT cd, regexp_replace(cd, '^42', '51', 'g') FROM emd WHERE cd LIKE '42%'

실제 업데이트 하는 SQL은 다음과 같습니다.

UPDATE emd SET cd = regexp_replace(cd, '^42', '51', 'g') WHERE cd LIKE '42%'
작성일자

FingerEyes-Xr에서 JSTS를 사용한 쓰는 코드 정리

FingerEyes-Xr은 JS 기반의 맵엔진이고 JSTS는 JS 기반의 지오메트리 연산 라이브러리입니다.

웹브라우저에서 공간 데이터에 대한 처리를 수행하는 경우에 JSTS를 사용하면 매우 좋은데요. 오래전부터 1.9버전을 사용하고 있었는데 오늘 보니 JSTS가 2.9.3 버전까지 올라왔군요.

JSTS에 대한 코드만을 뽑아 정리하기가 버겨워…. 대충 언급하여 정리해 봅니다. 아래 코드의 목적은 중첩되는 공간 데이터에 대한 헥사곤 도형을 생성해 주는 것입니다.

#run() {
  const selectLayers = this.#dialog.content.querySelector(".input-layer")
  const radius = parseFloat(this.#dialog.content.querySelector(".radius").value)
  const layerName = selectLayers.value
  const layer = app.map.layers().layer(layerName)
  const mbrLayer = layer.MBR()

  // MBR의 좌표계를 배경지도에 대한 좌표계로 변경함
  const proj = layer.EPSG() === -1 ? null : proj4(layer.proj4Name(), 'EPSG:' + layer.EPSG());
  const [minX, minY] = proj ? proj.forward([mbrLayer.minX, mbrLayer.minY]) : [mbrLayer.minX, mbrLayer.minY];
  let [maxX, maxY] = proj ? proj.forward([mbrLayer.maxX, mbrLayer.maxY]) : [mbrLayer.maxX, mbrLayer.maxY];
  maxX += radius*2
  maxY += radius*2

  const xStep = radius + radius/2
  const yStep = radius * Math.sin(60*(Math.PI/180)) * 2
  const gl = new Xr.layers.GraphicLayer("gl")
  app.map.layers().add(gl)

  const cntRows = layer.totalRowsCount();
  const wktReader = new jsts.io.WKTReader()

  for(let y=minY; y<maxY; y+=yStep) {
    for(let cx=minX; cx<maxX; cx+=xStep) {  
      ...
      const pts = [[ /* Hexagon 도형 구성 좌표 만드는 코드 */ ]]

      const psd = new Xr.data.PolygonShapeData(pts)
      const pgr = new Xr.data.PolygonGraphicRow(count, psd)

      const geomHexa = wktReader.read(psd.toWKT(false))   
      let intersected = false
      for(let i=0; i<cntRows; i++) {
        const shapeRow = layer.getShapeByFID(i)
        const geom = wktReader.read(shapeRow.shapeData().toWKT(true))   
        if(geom.intersects(geomHexa)) {
          intersected = true
          break
        }
      }
  
      if(intersected) gl.rowSet().add(pgr)
    }
  }

  app.map.update()
}

JSTS에 대한 주요 코드는 21번, 31/35번, 36번인데요. 각각 jsts.io.WKTReader 객체 준비, WKT로부터 JSTS를 위한 지오메트리 객체를 생성, 중첩 여부 확인 코드입니다. 참고로 위의 코드는 다음과 같은 결과를 만들어 냅니다.