chocoboy

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..

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..

※ 오픈레이어스를 사용하기 위해서 상속을 받아야 된다. 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); 아..물론 상속이필요하다 잘 뜬다. 회사 플랫폼쓰다보니까 오픈레이어스를 안하게..

일단, 간단한 지도를 띄우는 예제를 사용해 보았다. 오픈레이어스 공식 홈페이지이다. https://openlayers.org/ OpenLayers - Welcome A high-performance, feature-packed library for all your mapping needs. openlayers.org 결과값 구현 결과이다. 이 두개의 코드는 오픈레이어스에서 API를 가져오겠다는 의미인것 같다. 그래서 선언해서 사용하는거 같다. 이건 내가 지도를 띄울때 필요한 사이즈를 설정해준 것이고 HTML 부분에는 다음과 같이 한줄 적어주고 이렇게 자바스크립트로 지도를 사용 가능하도록 자바스크립트를 추가해주면 되겠다. To be continue..