Openlayers draw circle (오픈레이어스 원 그리기, Openlayers 원 그리기)

 

 

오픈레이어스3 에서는 원, 점, 사각형 및 기타 이미지 그리기가 사실 참 쉬웠습니다.

그런데 버전이 4로 올라가면서 불러오는 스크립트의 레이어에 따라서 별칭을 주어야하는 필수 클래스가 존재하여 해당 부분에 유의해야 합니다.

먼저 가장 첫 시간에 사용한 내용에서 화면을 그려주는 클래스를 OLTIlerLayer로 바꾸어 기능을 수정 하였습니다.

import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';  
import OlTileLayer from 'ol/layer/Tile.js';  //기존 TileLayer에서 교체
import OlView from 'ol/View.js';
import Vector  from 'ol/source/Vector.js';
import VectorLayer  from 'ol/layer/Vector.js';
import point from 'ol/geom/Point';

var pnt = new point([126,37]).transform('EPSG:4326', 'EPSG:3857');  //위경도를 오픈레이어스에서 사용중인 값으로 변환
var changePoints = pnt.getCoordinates();

var layer = new OlTileLayer({  //OlTileLayer로 교체(임포트시 명칭충돌 방지)
  source: new OSM()  
});
 
var source = new Vector();  

var vector = new VectorLayer({ 
  source: source
});

var map = new Map({
  layers: [layer, vector], 
  target: 'map',
  view: new OlView({
    center: changePoints,
    zoom: 8  
  })
});

 

이를 실행하면 아래 지도가 나타나게 됩니다.

뭐..잘나오는군요!

 

이렇게 변경하면 맵도 잘 나오고 이제 추가할 예정인 객체와 충돌나지 않습니다.

"원"을 한번 추가하여 보겠습니다.

"원"을 추가하기 위해서 필요한 객체는 아래 3종류로 구분 됩니다.

import { Circle } from 'ol/geom.js';
import Feature  from 'ol/Feature.js';
import { Style,Stroke,Fill, Text } from 'ol/style.js';

 

간단하게 원을 그릴 장소는 맵이 표출되는 기존 가운데(center)로 하였습니다.

먼저 벡터를 만들고, 해당 벡터에 "원" 속성을 넣어주면 됩니다.

var vectorSource = new Vector({projection: 'EPSG:4326'});  //새로운 벡터 생성
var circle = new Circle(changePoints, 12000);  //좌표, 반경 넓이
var CircleFeature = new Feature(circle); //구조체로 형성
vectorSource.addFeatures([CircleFeature]); // 벡터소스에 추가

 

만들어진 벡터를 맵에 추가할 새로운 레이어로 생성 합니다. 

Stroke 클래스는 필수이며 나머지는 옵셔널 입니다.

var vectorLayer =new VectorLayer({  //추가할 벡터레이어
  source: vectorSource,
  style: [
  new Style({
      stroke: new Stroke({   //두께
          color: 'rgba( 240, 79, 79 ,0.9)',
          width: 2
      }),
      fill: new Fill({  //채우기
          color: 'rgba( 255, 133, 133 ,0.5)'
      }),
      text : new Text({  //텍스트
        text: 'Yoo!',
        textAlign: 'center',
        font: '15px roboto,sans-serif'            
      })
  })]
});

 

만들어진 레이어를 화면을 그릴 맵에 추가하면 됩니다.

최종 완성된 스크립트 입니다.

import Map from 'ol/Map.js';
import OSM from 'ol/source/OSM.js';
import OlTileLayer from 'ol/layer/Tile.js';
import OlView from 'ol/View.js';
import Vector  from 'ol/source/Vector.js';
import VectorLayer  from 'ol/layer/Vector.js';
import { Circle } from 'ol/geom.js';
import Feature  from 'ol/Feature.js';
import { Style,Stroke,Fill, Text } from 'ol/style.js';
import point from 'ol/geom/Point';

var pnt = new point([126,37]).transform('EPSG:4326', 'EPSG:3857');  //위경도를 오픈레이어스에서 사용중인 값으로 변환
var changePoints = pnt.getCoordinates();

var layer = new OlTileLayer({  //Ol타일 레이어로 교체(임포트시 명칭충돌 방지)
  source: new OSM()  
});
 
var source = new Vector();  

var vector = new VectorLayer({ 
  source: source
});

var map = new Map({
  layers: [layer, vector], 
  target: 'map',
  view: new OlView({
    center: changePoints,
    zoom: 8  
  })
});

var vectorSource = new Vector({projection: 'EPSG:4326'}); //새로운 벡터 생성
var circle = new Circle(changePoints, 12000);  //좌표, 반경 넓이
var CircleFeature = new Feature(circle); //구조체로 형성
vectorSource.addFeatures([CircleFeature]); // 벡터소스에 추가

var vectorLayer =new VectorLayer({  //추가할 벡터레이어
  source: vectorSource,
  style: [
  new Style({
      stroke: new Stroke({   //두께
          color: 'rgba( 240, 79, 79 ,0.9)',
          width: 2
      }),
      fill: new Fill({  //채우기
          color: 'rgba( 255, 133, 133 ,0.5)'
      }),
      text : new Text({  //텍스트
        text: 'Yoo!',
        textAlign: 'center',
        font: '15px roboto,sans-serif'            
      })
  })]
});
map.addLayer(vectorLayer); //만들어진 벡터를 추가

 

잘 나오는지 살펴봅니다!

요! 잘그려진다!

 

* 해당 내용은 npm과 parcel 환경으로 구성되어 있습니다.

* 아래 주소를 통해 환경구성을 하면 이해하기 쉽습니다.

https://lts0606.tistory.com/194?category=726697

Openlayers 사용법 (Openlayers 개발 환경 구성,오픈레이어스 개발환경, Nodejs 활용)

 

아래 소스코드를 첨부합니다!

Open_test.zip

0.00MB