Career/Openlayers9 [Openlayers] Openlayers Heatmap Usage How can I use Heatmap() in openlayer? It's easy to use than you think about it. Method If you finished this script You can handle heatmap Method that you want That's an example. achacha ⭐ Don't forget to inherit openlayers ⭐ Create map You need to make a map to put layers on. const openStreetMap = new ol.Map ({ target: 'o2map2', layers : [ new ol.layer.Tile({ source: new ol.source.OSM(), }) ], v.. 2023. 2. 1. [Openlayers] Openlayers code storage polygon, circle, dot ... and style const map = new ol.Map ({ target : 'o2map', layers : [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View ({ zoom: 5, projection : 'EPSG:4326', center: [127, 35.22], }) }) const featureSource = new ol.source.Vector ({ }) const featureLayer = new ol.layer.Vector ({ source: featureSource }) const dotLayer = new ol.Feature ({ geometry : new ol.. 2023. 1. 26. [Openlayers] Openlayer's sensitive properties ※ 오픈레이어스를 사용하기 위해서 상속을 받아야 된다. 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:.. 2023. 1. 25. [Openlayers] 오픈레이어스 Polygon 사용방법 ※ 물론, 오픈레이어스를 사용하기 위해서 상속을 받아야 된다. (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.. 2023. 1. 19. [Openlayers] 오픈레이어스 ol.geom.style 사용방법 이제 좀 오픈레이어스에 대해서 이해가 가기 시작한다. 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.. 2023. 1. 19. [Openlayers] 오픈레이어스 LineString 사용 방법 너무 간단해서 깜딱 놀랐다. '점' 찍어봤다면 이건 거의 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([.. 2023. 1. 19. [Openlayers] 오픈레이어스 Point 찍는 방법 최근들어 오픈레이어스를 많이 사용하게 되어가지고, 오픈레이어스 공부를 본의아니게 하게 되었다. Method 간단하게, 오픈레이어스의 구조를 설명해보자면 다음과 같은 구조로 이루어져 있다. 말은 즉, 처럼 생각하면 되갰다. BAS에 지도를 띄우고, SVC에 레이어를 가져와서 세팅, VEC는 나머지 측정요소 Point 이제 Point를 찍는 방법에 대해서 알아보자 정말 간단하게 지도에서 "점" 찍는 방법만을 알아본다. /* featureSource 소스를 담아줄 세팅 그릇 역할 */ let featureSource = new ol.source.Vector({ }) /* 실제 Layer를 띄워주게 하는 역할 */ const featureLayer = new ol.layer.Vector ({ source: fe.. 2023. 1. 19. [Openlayers] 오픈레이어스 지도 띄우는 새로운 방법 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); 아..물론 상속이필요하다 잘 뜬다. 회사 플랫폼쓰다보니까 오픈레이어스를 안하게.. 2023. 1. 17. 이전 1 2 다음
