※ 오픈레이어스를 사용하기 위해서 상속을 받아야 된다. Method /* 오픈스트리트맵 */ const openSt = new ol.layer.Tile({ target: 'o2map' source: new ol.source.OSM(), visible: true, opacity: 1 }) if you use this code You face a error like this. (It wasn't working normally.) You should surround layer parameter by using array '[]' If you don't surround a layer parameter It will be not worked. Usage const map = new ol.Map ({ target:..

※ 물론, 오픈레이어스를 사용하기 위해서 상속을 받아야 된다. (Obviously Before starting, You should inherit to use Openlayers) Method /* 여기안에는 그냥 배열 처리만 해줘도 사용 할 수 있다. */ const polygon = new ol.geom.Polygon([]); polygon.setCoordinates([[[120, 38],[120, 33],[126, 38] ,[126, 33]]]); const polygonFeature = new ol.Feature(polygon); polygon 사용하는 코드이다. (This is a code for using polygon.) 만약 여러개의 폴리곤을 사용하고 싶으면 (if you wanna try..

이제 좀 오픈레이어스에 대해서 이해가 가기 시작한다. Method const circleFeature = new ol.Feature ({ geometry: new ol.geom.Circle([127, 38], 2), }) 다음과 같이 서클이 있는 상태에서 const circleStyle = new ol.style.Style({ stroke: new ol.style.Stroke ({ color: 'red', width: 5, }), }) 서클 스타일을 다음과 같이 만들어준다. 그리고 circleFeature.setStyle(circleStyle); 서클 객체에다가 setStyle(스타일) 넣어주게 되면 스타일이 적용이 된다. To be continue..

너무 간단해서 깜딱 놀랐다. '점' 찍어봤다면 이건 거의 3분 카레수준으로 해볼수 있을 것이다. Method const lineLayer = new ol.Feature ({ geometry: new ol.geom.LineString([[133, 38],[133, 55]]) }) 다음과 같이 설정해주고 ol.geom.LineString -> 줄 긋는 기능 사용 당연히 줄이니까 좌표를 두개 적어넣어주야한다. featureSource.addFeatures([multiPointFeature, lineLayer]); map.addLayer(featureLayer); lineLayer를 addFeature 해주게 되면 다음과 같이 나타나게된다. 🤑tips addFeature() -> 하나만 addFeatures([..

최근들어 오픈레이어스를 많이 사용하게 되어가지고, 오픈레이어스 공부를 본의아니게 하게 되었다. Method 간단하게, 오픈레이어스의 구조를 설명해보자면 다음과 같은 구조로 이루어져 있다. 말은 즉, 처럼 생각하면 되갰다. BAS에 지도를 띄우고, SVC에 레이어를 가져와서 세팅, VEC는 나머지 측정요소 Point 이제 Point를 찍는 방법에 대해서 알아보자 정말 간단하게 지도에서 "점" 찍는 방법만을 알아본다. /* featureSource 소스를 담아줄 세팅 그릇 역할 */ let featureSource = new ol.source.Vector({ }) /* 실제 Layer를 띄워주게 하는 역할 */ const featureLayer = new ol.layer.Vector ({ source: fe..

import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; var map = new ol.Map ({ target: 'o2map', view: new ol.View({ center: ol.proj.fromLonLat([38.41, 30.32]), zoom: 0 }) }) var osmLayer = new ol.layer.Tile({ source: new ol.source.OSM() }) map.addLayer(osmLayer); 아..물론 상속이필요하다 잘 뜬다. 회사 플랫폼쓰다보니까 오픈레이어스를 안하게..