이번 포스팅에서는 벡터 레이어 대해 알아볼 것이다.
보통 벡터 레이어라고 하면 점, 라인 스트링, 폴리곤을 떠올릴 수 있다.
이번 예제에서는 포인트 레이어를 생성하도록 해보겠다.
지도에 클릭 이벤트 시 클릭한 위치 좌표를 가져와서 포인트 레이어를 생성해보도록 하겠다.
배경 지도는 브이월드를 사용했으면 브이월드 타일 레이어 추가에 대한 예제를 아래 링크를 참조하면 되겠다.
spatiumwdev.tistory.com/entry/openlayers-브이월드-배경지도-추가하기?category=856219
openlayers 브이월드 배경지도 추가하기
오픈레이어스의 기본인 배경지도 불러오기를 해볼려고한다. 오픈레이어스 설치에 대해서는 cdn으로 간략하게 설치해보자 openlayers - dev-jhs 헤더에 오픈레이어스의 스타일과 스크립트를 추가했다
spatiumwdev.tistory.com
<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:8,
});
var mapView = new ol.Map({
target:"map", // 지도를 생성할 element 객체의 id 값,
layers:[viewLayer], //생성한 레이어 추가,
view:view, //view 설정
});
mapView.on('click',function(e){
//console.log(e.coordinate);
var x = e.coordinate[0];
var y = e.coordinate[1];
//point Geometry 객체를 생성한다.
var point = new ol.geom.Point([x,y]);
var pointSourceLayer = new ol.source.Vector({
features:[new ol.Feature(point)]
});
//레이어 생성할 때 스타일을 지정해준다.
var pointVectorLayer = new ol.layer.Vector({
source:pointSourceLayer,
style: new ol.style.Style({
image: new ol.style.Circle({
radius: 12,
fill: new ol.style.Fill({color: 'blue'}),
})
})
});
this.addLayer(pointVectorLayer);
})
</script>
</body>
</html>
그 외 스타일과 레이어에 관한 옵션 값들은 아래 링크에서 자세히 확인할 수 있다.
openlayers.org/en/latest/apidoc/
OpenLayers v6.5.0 API - Index
View The view manages the visual parameters of the map view, like resolution or rotation. View with center, projection, resolution and rotation
openlayers.org
이번 포스팅에서는 클릭 이벤트 시 클릭한 좌표를 가져와서 포인트 레이어를 생성해봤다.
다음 포스팅에서는 csv 파일에 좌표가 포함된 파일을 읽어 경위도일 경위 EPSG:3857로 변환한 데이터를 포인트 객체로 생성해보는 예제를 해보겠다.
포인트 레이어 객체가 많은 경우 클러스트를 이용해서 레벨에 따라 간략하게 나타내고 줌 레벨이 커질수록 포인트 객체를 보이게끔 하는 에제도 추후에 진행할 것이다.
'JS > Openlayers' 카테고리의 다른 글
| Openlayers lineString 예제 (0) | 2021.05.16 |
|---|---|
| 오픈레이어스 csv 포인트 cluster 시각화 예제 (0) | 2021.05.03 |
| Openlayers mouse position 예제 마우스 커서 위치 좌표 가져오기 예제 (0) | 2021.04.28 |
| OpenLayers overview map 생성 예제 (0) | 2021.04.27 |
| openlayers 브이월드 배경지도 추가하기 (0) | 2021.04.12 |