반응형
저번 포스팅에서 벡터 레이어 중 포인트 레이어에 대해 여러 가지 방법들을 알아보았다.
이번 포스팅에서는 lineString에 대해 알아보고자 한다.
간단하게 클릭 이벤트를 통해 라인을 그려보는 예제를 진행하고 다음 포스팅에서는 라인을 그렸을 경우 측정 거리를 나타내는 예제를 진행할 예정이다.
기존 소스를 활용해서 라인스트링을 그려보도록 하겠다.
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<title>openlayers - dev-jhs</title>
</head>
<body>
<h2>오픈 레이어스 라인스트링 예제</h2>
<div id="map" class="map" style="width:100%;height:80%;"></div>
<script>
//브이월드 타일레이어 url 설정s
var source =new ol.source.XYZ({
url: 'http://xdworld.vworld.kr:8080/2d/Base/201802/{z}/{x}/{y}.png'
});
//타일레이어 생성하기
var viewLayer = new ol.layer.Tile({
source:source
});
//위치는 우리나라 중앙쯤(?)
var view = new ol.View({
center:[14248656.389982047, 4331624.063626864],
zoom:7,
});
var mapView = new ol.Map({
target:"map", // 지도를 생성할 element 객체의 id 값,
layers:[viewLayer,lineVector], //생성한 레이어 추가,
view:view, //view 설정
});
</script>
</body>
</html>
라인 스트링 빈 객체를 생성하고 간단하게 아래와 같이 스타일을 지정해준다.
//빈객체생성
var lineSource = new ol.source.Vector();
var lineVector = new ol.layer.Vector({
source:lineSource,
style:function(feature){
//linestring의 스타일 지정
var style=new ol.style.Style({
stroke:new ol.style.Stroke({
color: '#ffcc33',
width: 2,
})
})
}
})다음은 생성한 벡터 레이어를 맵 객체에 추가해주고 맵 객체에 addInteraction 추가해서 라인을 그릴 Draw 객체를 생성해보자
mapView.addInteraction(new ol.interaction.Draw({
source: lineSource,
type: 'LineString',
}))
전체 소스는 아래 링크를 보고 직접 소스코드를 수정해볼 수 있도록 했다.
https://plnkr.co/plunk/3ZqZACiqziZi63Vd
Plunker
Plunker is loading… Oh the websites you'll make!
plnkr.co
라인그리는 간단한 예제를 진행해봤다.
다음 글에서는 라인 스트링으로 거리 측정에 대해 알아보겠다.
반응형
'JS > Openlayers' 카테고리의 다른 글
| openlayers lineString으로 거리 측정 예제 (0) | 2021.05.22 |
|---|---|
| Openlayers csv 공공데이터 읽어서 포인트 레이어 생성하기 (0) | 2021.05.16 |
| 오픈레이어스 csv 포인트 cluster 시각화 예제 (0) | 2021.05.03 |
| Openlayers point 벡터 레이어 생성 예제 (0) | 2021.04.29 |
| Openlayers mouse position 예제 마우스 커서 위치 좌표 가져오기 예제 (0) | 2021.04.28 |