728x90
반응형
이전 관련 게시글
2023.02.13 - [eclipse/OpenLayers] - [OpenLayers] 맵 마커 띄우기(point, polygon)
2023.02.13 - [eclipse/OpenLayers] - [OpenLayers] 맵 마커 삭제(point, polygon)
2023.01.27 - [eclipse/OpenLayers] - [openlayers] 지도 맵 띄우기
결과 화면
개발 코드
1. div 설정하기
div영역을 선언하여 coordi를 선정합니다.
2. js에서 div의 id를 변수에 담아 선언합니다.
3번째 줄처럼 coordi를 변수를 만들어 선언합니다.
3. 좌표값을 반환할 수 있도록, MousePosition 객체를 선언합니다.
좌표 값을 변환하기 위해 위에 처럼 선언합니다.
4. 이벤트 발생시 바로 결과창이 반환할 수 있도록 설정
이 값은 event가 발생했을 때 보고하기 위해 사용되는 값으로 반환할 수 있도록 합니다.
순서
1. 이벤트가 발생하였을 때 마우스 위치 감지
2. 미리 선언한 ol.control.MousePosition에서 좌표계를 GPS로 변환하고, 좌푯값의 소숫점 자리 등 정의
3. 감지할 때 정의한 Position에서 불로오고, Event.target 값(value) 불러옴
MAP 코드
지금까지 map에 대한 코드입니다.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css">
<title>메인</title>
</head>
<body>
<form>
<label for="type">지도 위 표시모양 정하기</label>
<select id="type">
<option>==선택==</option>
<option value="Point" id="Point">point</option>
<option value="Polygon" id="Polygon">Polygon</option>
</select>
</form>
<div id = "coordi" class="coordi"></div>
<div id="vMap" class="vMap" style="width:1000px">
<div id="main" class="main">
<div id = "popup" class="popup"></div>
</div>
</div>
<!-- <script -->
<script type="text/javascript" src="/js/map.js"></script>
</body>
</html>< js >
var container = document.getElementById('main'); //띄어질 맵 위치
var coordi = document.getElementById('coordi'); //좌표
var typeSelect = document.getElementById('type'); //select 를 접근활 수 있도록 id를 담아 typeSelect에 담기
var map; //맵 변수 선언 : 지도 객체
var mapLayer; //맵 레이어 선언 : 지도 그림(타일) 설정
var mapOverlay; //맵 오버레이 선언 : 지도 위에 팝업 옵션을 사용할 때
var mapView; //맵 뷰 선언 : 보여지는 지도 부분 설정
var draw; //사용자가 선택한 도형을 그리기 위해 상호작용에 대한 객체 생성
var coordinate; // feature 좌표
var mousePositionCtrl = new ol.control.MousePosition({
coordinateFormat : ol.coordinate.createStringXY(4), //좌표값 반환(소숫점 자리)
target: coordi,
projection: 'EPSG:4326', //projection : 좌표계를 변경 gps좌표계로 변경
undefinedHTML: ' ',
});
var markerSource = new ol.source.Vector({ wrapX: false }); //마우스를 이용하여 도형 그리기 wrapx:false는 동일한 죄표에 대해 중복으로 도형 표시를 안함
var vector = new ol.layer.Vector({
source: markerSource, // 지도 위에 마우스로 도형을 생성하기 위한 레이어
});
var selectInt = new ol.interaction.Select({
condition: ol.events.condition.select //feature 선택
});
function mainMap(){
mapLayer = new ol.layer.Tile({ //타일 생성
title : 'base Map', //이름
visible : true, //보여짐 여부
type : 'base', //지도 종류(일반) ---(야간(midnight), 위성(satellite) 등)
source : new ol.source.OSM({ //vworld api 사용
url : 'http://api.vworld.kr/req/wmts/1.0.0/인증키/Base/{z}/{y}/{x}.png'
})
});
mapOverlay = new ol.Overlay(({ element: container })); //Overlay 생성, 요소는 컨테이너
mapView = new ol.View({ //뷰 생성
projection : 'EPSG:3857', //좌표계 설정 (EPSG:3857은 구글에서 사용하는 좌표계)
center : new ol.geom.Point([ 127, 37 ]) //처음 중앙에 보여질 경도, 위도
.transform('EPSG:4326', 'EPSG:3857') //GPS 좌표계 -> 구글 좌표계
.getCoordinates(), //포인트의 좌표를 리턴함
zoom: 7, //초기지도 zoom의 정도값
maxZoom: 16, //줌 확대 단계
minZoom: 8 //줌 축소단계
});
map = new ol.Map({ //맵 생성
controls: ol.control.defaults().extend([mousePositionCtrl]), //마우스 움직임 좌표
target : 'vMap', //html 요소 id 값
layers : [mapLayer ,vector ], //레이어
overlays: [mapOverlay], //오버레이
view : mapView //뷰
});
}
function pointMap(){
map.on('pointermove', function(e){
var feature = map.forEachFeatureAtPixel(e.pixel, function(feature , layer){return feature },{hitTolerance: 2,layerFilter: function(layer) {return layer === vector;}}); //클릭된 feature의 속성을 얻어옴
if (feature != undefined){ //속성이 있다면
map.getInteractions().clear(); //적용된 상호작용을 지우고
map.addInteraction(selectInt); //select할 수 있는 상호작용으로 변경함
//선택된 객체뽑기
var selectFeatures = selectInt.getFeatures(); //선택된 객체의 값을 뽑고
selectFeatures.on('add',function(e){ //이벤트중 add 이벤트가 발생하면
var selectFeature = e.target.item(0); //선택된 feature중에 첫번쨰 타켓을 가져옴 ( 선택이 많아지면 타겟도 계속 늘어나기 떄문)
if(confirm("삭제하시겠습니까?")){
vector.getSource().removeFeature(selectFeature); //지우기 (선택된 첫번째 타켓을)
selectInt.getFeatures().clear() //그 후 가져온 feature도 clear
}else{selectFeature = e.target.item(0);} //이벤트 발생을 안헀으면 타겟의 0번째 넣기
})
console.log('마우스 효과');
}else{
map.getInteractions().remove(selectInt); //만약에 클릭된 객체가 없을 때엔 select 상호작용을 지우고
map.addInteraction(draw); //draw 상호작용을 추가함
console.log('feature가 없습니다.');}
})
}
coordi.addEventListener('change', function (event) {
mousePositionControl.setProjection(event.target.value); //마우스 위치를 보고하는데 사용됨
});
//이벤트 변경이 있을떄
typeSelect.onchange = function(){
map.removeInteraction(draw); // 사용작용된 객체를 제거하여 없앰
var value = typeSelect.value;
draw = new ol.interaction.Draw({ //지도위에 그릴 수 있도록 설정
source: markerSource,
type: value,
});
map.addInteraction(draw); //상호작용추가
pointMap(); //pointmap 불러오기
};
$(document).ready(function() {
mainMap(); //시작과 동시에 mainMap 실행
});
----
openlayers의 라이브러리와 지원 문서는 아래에 있는 주소에서 도움받아 제작하였습니다.
https://openlayers.org/en/latest/apidoc/
OpenLayers v7.2.2 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
728x90
반응형
'Library > OpenLayers' 카테고리의 다른 글
| [OpenLayers] 맵 마커 삭제(point, polygon) (0) | 2023.02.13 |
|---|---|
| [OpenLayers] 맵 마커 띄우기(point, polygon) (0) | 2023.02.13 |
| [openlayers] 지도 맵 띄우기 (0) | 2023.01.27 |
