오픈레이어스와 관련되어 자주 질문을 받는것 중의 하나가 샘플과 관련된 내용이였습니다.
"작성자님의 코드가 보기 어려우니 샘플코드 한개만 만들어 주시면 안될까요...?"
그럴때 마다 매번 기능을 만들어서 보내드리고는 했었는데..
만들고나서 따로 저장을 해 두지 않다보니 매번 만들어야되는 수고로움(?)이 존재하였습니다..;ㅁ;
그리하여 이번 기회에 기초적인 마커와 관련된 기능이 들어간 클래스를 한개 만들었습니다.
이름하여 gisMap!
사용법은 매우 간단합니다.
글로벌 변수인 gisMap을 선언하고 뒤에 원하는 함수를 호출하면 됩니다.
예) gisMap.원하는함수()
해당 클래스의 사용법에 대해서 정리하여 봅니다.
#1. 오픈 레이어스 객체를 받습니다 : Map
gisMap.openLayersMap()#2. 지도를 로딩 합니다 : void
//targetId는 지도를 그릴 대상을 의미 합니다. id 값이어야 합니다.
//lat는 위도, log는 경도 입니다.
gisMap.init(targetId, lat, log)
#3. 지도에 마커를 표시 합니다 : string
* 반환되는 문자열은 해당 마커의 고유 아이디 값 입니다
//lat는 위도, log는 경도 입니다.
//text는 표시할 문구 입니다.
//옵션 샘플
var option = {
font_size : 13, //글씨크기
font_color : 'rgba( 255, 202, 202, 0.36)', //글씨색상
font_background_color : 'rgba( 255, 202, 202, 0.36)', //글씨 뒷 배경 색상
font_background_stroke : 'rgba( 255, 202, 202, 0.36)' //테두리 굵기
}
gisMap.addMark(lat, log, text, option)
#4. 지도에 Html테그 형태의 마커를 표시 합니다 : void
* 기본으로 클릭 이벤트가 부여되어 있습니다.
* 일반 HTML 엘리먼트와 동일하므로 원하는 기능을 확장하여 사용하면 됩니다.
* 고유의 아이디는 생기지 않습니다.
//lat는 위도, log는 경도 입니다.
//text는 표시할 문구 입니다.
gisMap.addHtmlMark(lat, log, text)
#5. 원하는 지점으로 이동 합니다 : void
//lat는 위도, log는 경도 입니다.
//duration은 이동 속도입니다. 밀리세컨드 단위(1000 = 1초) 입니다.
gisMap.moveCenter(lat, log, duration)
#6. 확장된 마커를 제거 합니다 : void
* 아이디는 마커를 생성한 뒤에 생기는 고유의 텍스트 값 입니다.
* html로 마커를 만든 경우에는 아이디가 없습니다.
* html로 만든 마커는 제거되지 않습니다.
//_id값은 마커를 생성하면 생기는 텍스트형태의 문자 입니다.
gisMap.removeWithId(_id)
#7. 가장 마지막에 확장된 마커를 제거 합니다 : void
* html로 만든 마커는 제거되지 않습니다.
gisMap.removePop()
#8. 마커에 클릭 이벤트를 부여한뒤 정보를 제공 받습니다 : Object
gisMap.clickEventer(function (arg) {
console.log(arg, arg.get('_id'))
})
#9. 삭제 가능한 아이디 목록을 받습니다. : Array<string>
* html로 만든 마커는 포함되지 않습니다.
gisMap.getIdList()
해당 코드를 받으실 수 있도록 깃허브에 올려두었습니다.
클릭을 통해 깃허브로 이동하셔서 내용을 받으실 수 있습니다.
위 깃허브 주소에는 샘플용 index.html 파일을 만들어 두었습니다.
아래 내용처럼 화면이 동작한다면 성공 한 것 입니다.
실제 구현한 소스코드는 index.ts 파일에 담아 두었습니다.
파셀(parcel)환경을 구축하신 다음에 수정 하셔서 다른 기능을 붙일 수도 있습니다.
위 개발환경에 사용된 package.json 파일 내용 입니다.
{
"name": "open_layers_test_version",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "parcel index.html --global gisMap ",
"build": "parcel build --public-url . index.html --global gisMap "
},
"author": "",
"license": "ISC",
"dependencies": {
"ol": "^6.4.3",
"typescript": "^4.1.3"
},
"devDependencies": {
"@types/node": "^14.14.14",
"parcel-bundler": "^1.12.4"
}
}
기타 문의사항이나 궁금한 점은 언제든지 연락주세요!! :)
댓글