본문 바로가기

Openlayers8

[openlayers] 지도표현방식(WMS, TMS) 1. 지도표현방식 대표적인 2가지 (WMS와 TMS)웹에서 지도를 표현하는 방식에는 대표적으로 WMS(Web Map Service)와 TMS(Tile Map Service )가 있습니다. 1) WMS(Web Map Service) 맵 데이터를 제공해주는 서비스입니다. WMS방식에는 맵 엔진이 반드시 필요합니다. 각 회사에서 개발한 맵 엔진 또는 GeoServer 같은 프로그램을 설치하여 맵 엔진 역할을 할 수도 있습니다. 맵 엔진으로 WMS를 구축하면 맵 서비스 요청에 필요한 맵 데이터를 가공하여 리턴해주는 형식입니다. 다만 TMS방식과 비교하였을 경우 상대적으로 맵 서비스 속도가 떨어집니다. 2)TMS(Tile Map Service ) TMS는 타일맵 서비스 입니다. 타일 형식으로 구역별 X,Y,Z 축.. 2023. 10. 26.
[OpenLayers] 오픈레이어스 설치 및 OSM(OpenStreetMap) 지도 띄우기 https://openlayers.org 접속하셔서 다운받습니다. (해당 포스팅은 v6.15.1 버전 기준으로 작성함)OpenLayers - WelcomeA high-performance, feature-packed library for all your mapping needs.openlayers.org 저희 포스팅에선 소스(js, css)만 필요하므로 v6.15.1-dist.zip 파일을 다운로드 합니다. 다운로드 하고 압축을 풀면 아래와 같은 파일들이 나오는데 제 포스팅에서는 ol이라는 디렉토리를 하나 생성해서 그 안에 넣어주었습니다. 지도를 띄울 index.html이라는 파일을 하나 생성합니다.index.html을 열어서 ol.js와 ol.css등 필요한 파일들을 링크시켜줍니다. 환경 세팅은 간단하.. 2023. 10. 24.
[Openlayers] ol-ext FixedPopup 1. ol-extopenlayers의 확장 플러그인으로 style, animation, filter, controls, intersections, popup등 다양하게 제공합니다. ol-ext 다운로드는 아래 링크에 접속하셔서 다운받으시면 됩니다. https://github.com/Viglino/ol-ext GitHub - Viglino/ol-ext: Cool extensions for Openlayers (ol) - animated clusters, CSS popup, Font Awesome symbol renderer, chartCool extensions for Openlayers (ol) - animated clusters, CSS popup, Font Awesome symbol renderer,.. 2023. 10. 12.
[Openlayers] ol.style.icon image사이즈 조절방법 지난 포스팅에 이어서 [openlayers] Feature에 style적용하는 방법 + (ol.style.icon)*버전: openlayers6 기준 입니다.1. ol.style지도상에 특정 도형을 그릴때 우리는 Feature라는 객체를 사용했습니다. [Openlayers] 점, 선, 면 Feature 그리기1.오픈레이어스(OpenLayers)란 웹브라우저에서 지도, GISteammoca.tistory.comol.style.icon사용시 사용되는 이미지의 크기를 줄여서 올리는 방법을 포스팅 해보도록 하겠습니다. 우선 지도상에 이미지를 사용할경우 ol.style.icon을 사용하여 이미지 스타일을 생성합니다. image: new ol.style.Icon ({ anchor : [0.5, 0.5], src :.. 2023. 10. 5.
[openlayers] Feature에 style적용하는 방법 + (ol.style.icon) *버전: openlayers6 기준 입니다.1. ol.style지도상에 특정 도형을 그릴때 우리는 Feature라는 객체를 사용했습니다. [Openlayers] 점, 선, 면 Feature 그리기1.오픈레이어스(OpenLayers)란 웹브라우저에서 지도, GIS라이브러리를 사용할 수 있게 제공하는 오픈소스 자바스크립트 라이브러리입니다. 이번 포스팅은 Openlayers에서 많이 쓰이는 주요 객체들 중 Fteammoca.tistory.com이때 Feature에는 색상이나 두께 또는 z-index등의 Style을 입힐 수 있는데, 이때 style을 지정하는 방법엔크게 두가지가 있습니다. 1) new ol.style. Style 생성new ol. layer. Vector ({ source : new ol. s.. 2023. 10. 5.
[Openlayers] 드래그영역속에 있는 Feature 찾기 *버전: openlayers6 기준 입니다. 이번 포스팅에서는 지난번에 올렸던 점, 선, 면 Feature그리기편에 이어서 https://teammoca.tistory.com/m/20 Openlayers 점, 선, 면 Feature 그리기1.오픈레이어스(OpenLayers)란 웹브라우저에서 지도, GIS라이브러리를 사용할 수 있게 제공하는 오픈소스 자바스크립트 라이브러리입니다. 이번 포스팅은 Openlayers에서 많이 쓰이는 주요 객체들 중 Fteammoca.tistory.com드래그를 했을때 영역의 Feature를 찾는 법을 알아보도록 하겠습니다. 1. 우선 지난 포스팅의 예제소스를 통해 지도상에 점, 선, 면 Feature 그려보겠습니다.//source생성 let sample_source = new.. 2023. 9. 25.
[Openlayers] 지도상에 클릭한 지점 위도,경도 좌표얻기 *버전: openlayers6 기준 입니다. 이번 포스팅은 Openlayers에서 지도상에 마우스로 클릭한 지점에 표시(Point)를 찍고, 해당 클릭한 지점의 위도와 경도를 얻는방법을 알아보도록 하겠습니다. 우선 지도상에 나타낼 point Feature를 생성하는 기본적인 틀은 지난 포스팅과 같습니다. https://teammoca.tistory.com/m/20 Openlayers 점, 선, 면 Feature 그리기1.오픈레이어스(OpenLayers)란 웹브라우저에서 지도, GIS라이브러리를 사용할 수 있게 제공하는 오픈소스 자바스크립트 라이브러리입니다. 이번 포스팅은 Openlayers에서 많이 쓰이는 주요 객체들 중 Fteammoca.tistory.com 그러나 이번 포스팅은 마우스를 찍는 시점에 .. 2023. 9. 21.
[Openlayers] 점, 선, 면 Feature 그리기 1.오픈레이어스(OpenLayers)란 웹브라우저에서 지도, GIS라이브러리를 사용할 수 있게 제공하는 오픈소스 자바스크립트 라이브러리입니다. 이번 포스팅은 Openlayers에서 많이 쓰이는 주요 객체들 중 Feature , Source, Layer에 대해 간단하게 설명하겠습니다. 2. Feature , Source, Layer우선 openlayers에는 map이라는 핵심 객체가 있습니다. 그 안에서 Feature , Source, Layer등의 다른 객체들이 모여 map이라는 객체를 구성하게 됩니다. 객체 구성하는 크기의 순을 표현해보자면 Feature -> Source -> Layer순으로 이어집니다. 아래 그림을 통해 세 객체를 간단하게 표현해보았습니다.1) Feature Feature은 점(Po.. 2023. 9. 20.

티스토리툴바