OpenLayers는 개인 또는 상업 프로젝트에 지도를 추가해야 하는 경우 광범위한 사용 사례에 적합한 오픈 소스 라이브러리입니다. 아래 단계를 따라 하면 몇 분 안에 빠르게 실행할 수 있습니다. Angular 프로젝트를 한 번도 해본 적이 없는 경우 새 프로젝트를 만드는 방법을 보여 드리겠습니다. 하지만 해당 부분을 건너뛰고 OpenLayers를 기존 프로젝트에 추가할 수 있습니다. 새 Angular 프로젝트 만들기 이 시점에서 첫 번째 Angular 프로젝트를 설정하는 방법을 보여 드리겠습니다. 모든 컴퓨터 운영 체제를 사용할 수 있으며 Angular는 macOS, Linux 및 Windows에서 작동합니다. 이것은 지금 사용하는 설정입니다. Angular CLI: 16.1.0 Node: 18.15...

이전 글에서 추가된 Icon Feature를 Drag and Drop 하는 예제입니다. [OpenLayers] Custom Icon Feature 추가 이전 글 [OpenLayers] Static Image 에서 설정한 Static Image 위에 주어진 위치의 아이콘을 표시하는 예제입니다. OpenLayers 3 버전을 사용하였습니다. Script 기존 코드에서 addVectorLayer 함수와 styles 객체가 추 hgko-dev.tistory.com Script ol.interaction.Modify 을 이용해서 Drag and Drop 기능을 구현합니다. modifystart, modifyend 이벤트를 등록하여 Icon을 선택하거나 이동 시 커서가 변경되도록 하였습니다. const styles..

이전 글에서 설정한 Static Image 위에 주어진 위치의 아이콘을 표시하는 예제입니다. [OpenLayers] Static Image OpenLayers 사용하여 OSM(OpenStreetMap)으로 지도를 가시화하는 것이 아닌 Static Image를 Layer Source로 사용하여 이미지를 가시화하는 예제입니다. OpenLayers 3 버전을 사용하였습니다. HTML Script // main.js // 지 hgko-dev.tistory.com OpenLayers 3 버전을 사용하였습니다. Script 기존 코드에서 addVectorLayer 함수와 styles 객체가 추가되었습니다. 먼저 ol.style.Icon 을 이용해서 아이콘 경로를 설정합니다. const styles = { icon:..

OpenLayers 사용하여 OSM(OpenStreetMap)으로 지도를 가시화하는 것이 아닌 Static Image를 Layer Source로 사용하여 이미지를 가시화하는 예제입니다. OpenLayers 3 버전을 사용하였습니다. HTML Script // main.js // 지도 정보 const mapInfo = { map: null, extent: null, projection: null, setProjection: function (w, h) { this.extent = [0, 0, w, h]; this.projection = new ol.proj.Projection({ code: 'pixel', units: 'pixels', extent: this.extent, }); }, init: funct..

Geoserver에서 필요한 정보를 가져오기 위해 OpenLayers의 getGetFeatureInfoUrl 함수를 사용하였습니다. feature의 정보 중에 GRAY_INDEX 라는 컬럼의 정보를 가져와야 합니다. 아래 방식으로 image 형태인 layer 를 구성하였습니다. var wmsLayer = new ol.layer.Image({ source: new ol.source.ImageWMS({ ratio: 1, url: 'http://localhost:8080/geoserver/img/wms', params: { FORMAT: 'image/png', VERSION: '1.1.1', STYLES: '', }, }), }); getGetFeatureInfoUrl 함수를 사용하여 feature 정보를 불..