글

작성일자

[OpenLayers] ol v5.3을 VSCode에서 사용하기

  1. VSCode(VisualStudio Code)를 설치한다.
  2. node.js를 설치한다.
  3. 콘솔에서 작업 디렉토리를 생성하고 이동한다.
  4. 아래의 명령을 입력하여 필요한 정보 입력(단순히 enter 키를 눌러 기본값으로 지정해도 됨)
    5. npm init
  5. 아래의 명령을 입력하여 openlayers 패키지 설치
    6. npm install ol
  6. 아래의 명령을 입력하여 parcel 패키지 설치(아직 명령창 닫지 말 것)
    7. npm install --save-dev parcel-bundler
  7. VSCode를 실행하고 작업 디렉토리를 오픈한다.
  8. index.js 파일을 추가하고 아래처럼 입력한다.
    9. import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 0
  })
});
  9. index.html 파일을 추가하고 아래처럼 입력한다.
    10. <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Using Parcel with OpenLayers</title>
    <style>
      #map {
        width: 400px;
        height: 250px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="./index.js"></script>
  </body>
</html>
  10. package.json 파일에 아래의 내용을 추가한다.
    11. "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "parcel index.html",
  "build": "parcel build --public-url . index.html"
}
  11. 앞서 열어 둔 명령창에서 다음을 입력한다.
    12. npm start
  12. VSCode에서 Debugger for Chrome 확장 기능을 설치한다.
  13. VSCode에서 F5키를 눌러 Start Debugging을 실행하고, 실행 환경으로 Chrome을 선택한다.
  14. .vscode라는 폴더 안에 launch.json 파일을 생성되는데, 이 파일을 연다.
  15. 내용 중 “url”: “http://localhost:8080″를 아래처럼 변경한다. 
    "url": "http://localhost:1234"
  16. 내용 중 “webRoot”: “${workspaceFolder}”를 아래처럼 변경한다. 
    "webRoot": "${workspaceFolder}/dist"
작성일자

EPSG.jar를 이용한 좌표 변환

EPSG.jar는 (주)지오서비스에서 개발한 EPSG 코드 기반의 좌표변환을 위한 Java 라이브러리입니다. 안드로이드 클라이언트 GIS 엔진인 BlackPoint-Xr(현재 SmartPoint-Xr로 제품명이 변경됨)등과 같은 프로그램에서 이용되고 있습니다. 이 EPSG 라이브러를 이용한 좌표 변환에 대한 예를 기록해 둡니다.

먼저 필요한 jar는 EPSG.jar와 종속성을 갖는 ellip2ellipsoid.jar, javaproj-1.0.6-noawt.jar 입니다.

예제 코드는 다음과 같습니다.

package testEPSG;

import geoservice.ellip2ellipsoid.ConstantParameters10;
import geoservice.ellip2ellipsoid.IParameters;
import geoservice.ellip2ellipsoid.Values3;
import geoservice.epsg.EPSG;
import geoservice.epsg.EPSGFactory;

public class MainEntry {
	public static void main(String[] args) {
		EPSG fromEPSG = EPSGFactory.create(5174); 
		EPSG toEPSG = EPSGFactory.create(5179); 

		IParameters params = new ConstantParameters10();
		
		Values3 pt = new Values3(200000, 500000, 0);
		
		fromEPSG.to(pt, toEPSG, params);
		
		System.out.println(pt.toString());
	}
}

EPSG:5174 좌표계의 (200000, 500000)를 EPSG:5179로 변환하는 코드인데요. EPSG:5174는 Bessel 타원체를 사용하며, 일본의 기준점을 활용하면서 발생한 경도상의 오차인 10.405가 반영된 대한민국 중부원점 좌표계이고, EPSG:5179는 GRS80 타원체의 단일원점 좌표계인 UTM-K 좌표계입니다.

작성일자

웹 크롤링

Python을 이용해 웹 페이지에서 원하는 정보를 추출해 내는 코드다. 아래는 네이버 뉴스의 오늘 날짜에 대한 토픽 제목과 해당 url을 뽑아내는 코드 예제.

import requests
from bs4 import BeautifulSoup

url = 'https://news.naver.com/main/ranking/popularDay.nhn?rankingType=popular_day&date=20191022'

r = requests.get(url)
html = r.content
soup = BeautifulSoup(html, 'html.parser')
titles_html = soup.select('.ranking_section > ol > li > dl > dt > a')

for i in range(len(titles_html)):
    print('#' + str(i+1), titles_html[i].text)
    print(titles_html[i]['href'])
    print()

결과는 대략 아래와 같다.

#1 러 군용기 6대의 무력 시위···한반도 3면 다 헤집고 다녔…
/main/ranking/read.nhn?mid=etc&sid1=111&rankingType=popular_day&oid=025&aid=0002946814&date=20191022&type=1&rankingSectionId=100&rankingSeq=1

#2 시정연설 마친 文, 이철희에 건넨 말 "섭섭한가 시원한가"
/main/ranking/read.nhn?mid=etc&sid1=111&rankingType=popular_day&oid=025&aid=0002946806&date=20191022&type=1&rankingSectionId=100&rankingSeq=2

.
.

#5 文대통령 발언에 뒤집어진 ‘정시 확대’…“조국 사태가 교육…
/main/ranking/read.nhn?mid=etc&sid1=111&rankingType=popular_day&oid=020&aid=0003248596&date=20191022&type=1&rankingSectionId=100&rankingSeq=5