본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


OpenLayers(오픈레이어스)11

Openlayers 기초 기능 모음(오픈레이어스 marker, html 마커) 오픈레이어스와 관련되어 자주 질문을 받는것 중의 하나가 샘플과 관련된 내용이였습니다. "작성자님의 코드가 보기 어려우니 샘플코드 한개만 만들어 주시면 안될까요...?" 그럴때 마다 매번 기능을 만들어서 보내드리고는 했었는데.. 만들고나서 따로 저장을 해 두지 않다보니 매번 만들어야되는 수고로움(?)이 존재하였습니다..;ㅁ; 그리하여 이번 기회에 기초적인 마커와 관련된 기능이 들어간 클래스를 한개 만들었습니다. 이름하여 gisMap! 사용법은 매우 간단합니다. 글로벌 변수인 gisMap을 선언하고 뒤에 원하는 함수를 호출하면 됩니다. 예) gisMap.원하는함수() 해당 클래스의 사용법에 대해서 정리하여 봅니다. #1. 오픈 레이어스 객체를 받습니다 : Map gisMap.openLayersMap() #2.. 2021. 2. 9.
Openlayers change map (오픈레이어스 맵 바꾸기, Openlayers 맵 변경) 이번엔 오픈레이어스 객체위치를 바꾸는 방법 입니다. 쉽게 설명하면, 기존에 만들어놓은 맵 데이터를 다른 테그에 옮기는 방법 입니다. 내가 한 행위, 내가 그린 대상 및 정보 전부 다른 테그로 옮길 때 사용 합니다. 기본 레이어를 생성 합니다. import Map from 'ol/Map.js'; import View from 'ol/View.js'; import OSM from 'ol/source/OSM.js'; import OlTileLayer from 'ol/layer/Tile.js'; import point from 'ol/geom/Point'; var pnt = new point([126,37]).transform('EPSG:4326', 'EPSG:3857'); var center = pnt.get.. 2019. 9. 26.
Openlayers Image Icon Hover, click(오픈레이어스 Hover click, Openlayers 클릭 마우스 오버, Openlayers marker) 특정 아이콘을 집어넣고 마우스 오버 및 클릭 이벤트를 부여하는 방법 입니다. 해당 기능을 만드는 이유는 원하는 지역에 아이콘을 표시한 뒤에 tooltip같은 효과를 주는데 주로 사용하기 위해서 자주 사용 됩니다. 마치 네이버나 구글지도에서 마커같은거 클릭해서 상세보기기능이 나오는 것 과 같은 기능 입니다. 가장 처음 할 일은 역시나...기본 레이어를 만들어 화면을 구성하여 주는 것 입니다. 그 다음에 할 일은 가장 기초인 아이콘을 넣어 줍니다. import Map from 'ol/Map.js'; import View from 'ol/View.js'; import OSM from 'ol/source/OSM.js'; import OlTileLayer from 'ol/layer/Tile.js'; import .. 2019. 9. 25.
Openlayers Flight Animation (오픈레이어스 항공 애니메이션, Openlayers 항공 애니메이션, Openlayers 비행 애니메이션) 이번엔 비행기가 지나가는 노선도 효과의 에니메이션 입니다. 레이어는 항상 사용하던 기본 OSM 레이어를 사용 하였습니다. 일단, 시작점과 끝점이 존재하는 배열을 생성 하였습니다. 출발나라와 도착 나라의 개념의 위경도를 배열에 담았습니다. var flights = new Array(); flights[0] = [[126.11,37.12], [7.51,11.831]]; flights[1] = [[110.11,25.12], [178.21,33.561]]; flights[2] = [[55.11,43.12], [47.21,13.42]]; flights[3] = [[12.11,3.12], [126.21,37.42]]; flights[4] = [[-113.11,39.12], [45.42,37.21]]; 다음 단계는 .. 2019. 9. 24.
Openlayers GeoJson (오픈레이어스 GeoJson , Openlayers 시군구, Openlayers 지적도, Openlayers 행정구역, Openlayers 맵차트) 시군구 그리기 시간 입니다. 일단 시군구가 들어있는 파일이 필요 합니다. 이러한 파일을 통상적으로 GeoJson이라고 불리우며 GeoJson 형식 말고도 다양한 형식이 존재 합니다. 여기서는 GeoJson으로 표출하여 보았습니다. * 저는 아래 사이트에서 받았습니다. https://www.data.go.kr/data/15059464/openapi.do 마찬가지로 몇가지 클래스만 import해주면 사용하기 어렵지가 않습니다. import Map from 'ol/Map.js'; import View from 'ol/View.js'; import { OSM } from 'ol/source.js'; import OlTileLayer from 'ol/layer/Tile.js'; import Vector from .. 2019. 9. 23.
Openlayers view Animation (오픈레이어스 애니메이션, Openlayers 애니메이션) 오픈레이어스에서 View 클래스는 화면구성을 담당 합니다. 화면에 뭐가 클릭이 되거나 드래그 앤 드랍, 화면 드래그 등 여러 이벤트를 감지하고 처리하는 역할을 합니다. 해당 view 객체에 몇가지 기능을 추가하면 괜찮은 에니메이션 효과(화면 자동이동, 회전 등) 기능을 만들 수 있습니다. 역시..화면을 만드는 레이어는 기존에 사용하던 레이어를 사용 하겠습니다. 대신에 view를 생성하는 객체만 따로 전역변수로 분리하여 둡니다. import Map from 'ol/Map.js'; import View from 'ol/View.js'; import OSM from 'ol/source/OSM.js'; import OlTileLayer from 'ol/layer/Tile.js'; import point from.. 2019. 9. 20.