1. html Head에 필요한 Script 요청
<head>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js">
</script>
<title>Openlayers View make Rectangle</title>
<style>
#map {
height: 100vh;
width: 100%;
}
</style>
</head>2. Body 내용
<body>
<div id="map"></div>
</body>3. Script 내용
var mapView = new ol.View({ //뷰 생성
projection: 'EPSG:3857', //좌표계 설정 (EPSG:3857은 구글에서 사용하는 좌표계)
center: new ol.geom.Point([128.5, 36.1]) //처음 중앙에 보여질 경도, 위도
.transform('EPSG:4326', 'EPSG:3857') //GPS 좌표계 -> 구글 좌표계
.getCoordinates(), //포인트의 좌표를 리턴함
zoom: 9 //초기지도 zoom의 정도값
});
//기본지도
var baseMap = new ol.layer.Tile({
source: new ol.source.XYZ({
//Vworld Tile 변경
url: 'http://xdworld.vworld.kr:8080/2d/Base/202002/{z}/{x}/{y}.png'
})
});
var map = new ol.Map({
target: 'map',
layers: [baseMap],
view: mapView,
});
// MAP 이동이 끝나신 점에서 동작할 함수 지정
map.on('moveend', _moveEnd);
/**
* 화면에 BOX 형태 View 그리기
*/
function makePolygon(box) {
// 기존 Polygon 레이어 지우기
// const ly = map.getLayers().array_.find((layer)=> layer.values_.id === 'layer');
// map.removeLayer(ly);
// box 레이어 스타일
const styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
}),
}),
];
// box 소스
const vectorSource = new ol.source.Vector({
features: [box],
projection: 'EPSG:4326',
});
// 레이어 생성
const vectorLayer = new ol.layer.Vector({
id: 'layer',
source: vectorSource,
style: styles
});
map.addLayer(vectorLayer);
}
/**
* MAP 이동이 끝날 때, 작동할 함수
*/
function _moveEnd(evt) {
console.log(evt);
setTimeout(() => {
const _map = evt.map;
const size = _map.getSize();
const extent = _map.getView().calculateExtent(size);
const topLeft = ol.proj.toLonLat(ol.extent.getTopLeft(extent));
const topRight = ol.proj.toLonLat(ol.extent.getTopRight(extent));
const bottomLeft = ol.proj.toLonLat(ol.extent.getBottomLeft(extent));
const bottomRight = ol.proj.toLonLat(ol.extent.getBottomRight(extent));
// console.log('topLeft', topLeft);
// console.log('topRight', topRight);
// console.log('bottomLeft', bottomLeft);
// console.log('bottomRight', bottomRight);
const polygonString = `${topLeft[0]} ${topLeft[1]},${topRight[0]} ${topRight[1]},${bottomRight[0]} ${bottomRight[1]},${bottomLeft[0]} ${bottomLeft[1]},${topLeft[0]} ${topLeft[1]}`;
console.log(polygonString.trim());
// makePolygon(polygonString);
var box = new ol.Feature(new ol.geom.LineString(
[
[bottomLeft[0], bottomLeft[1]],
[bottomRight[0], bottomRight[1]],
[topRight[0], topRight[1]],
[topLeft[0], topLeft[1]],
[bottomLeft[0], bottomLeft[1]]
])
);
// 박스 좌표를 현재 지도 환경에 맞게 변경
var current_projection = ol.proj.get('EPSG:4326');
var change_projection = ol.proj.get('EPSG:3857');
box.getGeometry().transform(current_projection, change_projection);
// 박스 생성 함수 실행
makePolygon(box);
}, []);
};4. 결과 화면
5. 전체 소스 코드
더보기
<!doctype html>
<html lang="ko">
<head>
<link rel="stylesheet"
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js">
</script>
<title>Openlayers View make Rectangle</title>
<style>
#map {
height: 100vh;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
<script type="text/javascript">
var mapView = new ol.View({ //뷰 생성
projection: 'EPSG:3857', //좌표계 설정 (EPSG:3857은 구글에서 사용하는 좌표계)
center: new ol.geom.Point([128.5, 36.1]) //처음 중앙에 보여질 경도, 위도
.transform('EPSG:4326', 'EPSG:3857') //GPS 좌표계 -> 구글 좌표계
.getCoordinates(), //포인트의 좌표를 리턴함
zoom: 9 //초기지도 zoom의 정도값
});
//기본지도
var baseMap = new ol.layer.Tile({
source: new ol.source.XYZ({
//Vworld Tile 변경
})
});
var map = new ol.Map({
target: 'map',
layers: [baseMap],
view: mapView,
});
// MAP 이동이 끝나신 점에서 동작할 함수 지정
map.on('moveend', _moveEnd);
/**
* 화면에 BOX 형태 View 그리기
*/
function makePolygon(box) {
// 기존 Polygon 레이어 지우기
// const ly = map.getLayers().array_.find((layer)=> layer.values_.id === 'layer');
// map.removeLayer(ly);
// box 레이어 스타일
const styles = [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
}),
}),
];
// box 소스
const vectorSource = new ol.source.Vector({
features: [box],
projection: 'EPSG:4326',
});
// 레이어 생성
const vectorLayer = new ol.layer.Vector({
id: 'layer',
source: vectorSource,
style: styles
});
map.addLayer(vectorLayer);
}
/**
* MAP 이동이 끝날 때, 작동할 함수
*/
function _moveEnd(evt) {
console.log(evt);
setTimeout(() => {
const _map = evt.map;
const size = _map.getSize();
const extent = _map.getView().calculateExtent(size);
const topLeft = ol.proj.toLonLat(ol.extent.getTopLeft(extent));
const topRight = ol.proj.toLonLat(ol.extent.getTopRight(extent));
const bottomLeft = ol.proj.toLonLat(ol.extent.getBottomLeft(extent));
const bottomRight = ol.proj.toLonLat(ol.extent.getBottomRight(extent));
// console.log('topLeft', topLeft);
// console.log('topRight', topRight);
// console.log('bottomLeft', bottomLeft);
// console.log('bottomRight', bottomRight);
const polygonString = `${topLeft[0]} ${topLeft[1]},${topRight[0]} ${topRight[1]},${bottomRight[0]} ${bottomRight[1]},${bottomLeft[0]} ${bottomLeft[1]},${topLeft[0]} ${topLeft[1]}`;
console.log(polygonString.trim());
// makePolygon(polygonString);
var box = new ol.Feature(new ol.geom.LineString(
[
[bottomLeft[0], bottomLeft[1]],
[bottomRight[0], bottomRight[1]],
[topRight[0], topRight[1]],
[topLeft[0], topLeft[1]],
[bottomLeft[0], bottomLeft[1]]
])
);
// 박스 좌표를 현재 지도 환경에 맞게 변경
var current_projection = ol.proj.get('EPSG:4326');
var change_projection = ol.proj.get('EPSG:3857');
box.getGeometry().transform(current_projection, change_projection);
// 박스 생성 함수 실행
makePolygon(box);
}, []);
};
</script>
</html>
'[openlayers]' 카테고리의 다른 글
| [openlayers] openlayers 지도 만들기 (0) | 2019.04.06 |
|---|
미나미나미
