OpenLayers 3 지도 에 대한 기본 조작 실현

5577 단어 OpenLayers3지도.
본 논문 의 사례 는 OpenLayers 3 가 지도 에 대한 기본 조작 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
1.머리말
지도 에 대한 기본 적 인 조작 은 지도 에 대한 확대,축소,이동,복원 과 업데이트 등 으로 OpenLayers 3 프레임 워 크 에서 지도 보기(View)를 조작 하 는 방법 이다.
2.사고의 실현
(1)웹 페이지 를 새로 만 듭 니 다.앞의 글 을 참조 하여 OSM 기와 지 도 를 불 러 옵 니 다.보기 로 맵 의 최대,최소 크기 조정 단계 와 초기 회전 각 도 를 설정 하고 jQuery 와 boottstrap 을 사용 하여 크기 조정 컨트롤 과 회전 컨트롤 마우스 서 스 펜 션 알림 의 효 과 를 실현 합 니 다.
(2)지도 용기 에 4 개의 단추(button)를 새로 만 들 고 단추 의 id 를 설정 하 며 css 제어 단 추 를 통 해 스타일 을 만 듭 니 다.
(3)버튼 마다 onclick 이 벤트 를 추가 하고 함수 에서 OpenLayer 3 에서 지도 보 기 를 조작 하 는 해당 방법 을 호출 하여 확대,축소,특정한 위치 로 이동 및 복원 기능 을 실현 합 니 다.
(4)컨트롤 크기 조정 및 회전 컨트롤 에 tooltip 알림 정 보 를 추가 하고 tooltip 의 거품 위 치 를 설정 합 니 다.
3.코드 는 다음 과 같다
html 코드:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>        </title>
 <link rel="stylesheet" href="css/bootstrap.min.css" >
 <link rel="stylesheet" href="css/ol.css" >
 <link rel="stylesheet" href="css/ZoomSlider.css" >
 <script src="js/ol.js"></script>
 <script src="js/jquery-3.2.1.min.js"></script>
 <script src="js/bootstrap.min.js"></script>
 <script src="js/Operation.js"></script>
 <style>
 #map {
  width: 100%;
  height: 570px;
 }

 #menu {
  float: left;
  position: absolute;
  bottom: 10px;
  z-index: 2000;
 }

 .tooltip-inner {
  white-space: nowrap;
 }
 </style>
</head>

<body onload="init()">
 <div id="map">
 <div id="menu">
  <button id="zoom-out" class="btn btn-info">    </button>
  <button id="zoom-in" class="btn btn-info">    </button>
  <button id="panto" class="btn btn-info">    </button>
  <button id="restore" class="btn btn-info">    </button>
 </div>
 </div>
</body>

</html>
js 코드:

function init() {
 //   Map  ，      
 var map = new ol.Map({
 target: 'map', //     div
 //           
 layers: [
  //         OSM
  new ol.layer.Tile({
  source: new ol.source.OSM()
  })
 ],
 //       
 view: new ol.View({
  center: [12950000, 4860000], //        
  zoom: 8, //        
  minZoom: 6, //    
  maxZoom: 12, //    
  rotation: Math.PI / 6 //      
 })
 });
 //          
 var view = map.getView();
 var zoom = view.getZoom();
 var center = view.getCenter();
 var rotation = view.getRotation();
 //            
 document.getElementById('zoom-out').onclick = function() {
  var view = map.getView(); //        
  var zoom = view.getZoom(); //        
  view.setZoom(zoom - 1); //      
 }
 //            
 document.getElementById('zoom-in').onclick = function() {
  var view = map.getView(); //        
  var zoom = view.getZoom(); //        
  view.setZoom(zoom + 1); //      
 }
 //     
 document.getElementById('panto').onclick = function() {
  var view = map.getView(); //        
  var lz = ol.proj.fromLonLat([103.73333, 36.03333]);
  view.setCenter(lz); //    
 }
 //     （       ）
 document.getElementById('restore').onclick = function() {
  view.setCenter(center); //     
  view.setRotation(rotation); //      
  view.setZoom(zoom); //    
 }
 //                tooltip    
 $('.ol-zoom-in,.ol-zoom-out').tooltip({
 placement: 'right' //tooltip     
 });
 $('.ol-rotate-reset,.ol-attribution button[title]').tooltip({
 placement: 'left' //tooltip     
 });
}
다음 과 같은 효과 보이 기:

4.코드 분석
맵 의 크기 조정,이동,회전 등 기본 동작 은 지도 보기 View 를 통 해 제어 합 니 다.지도 보기 에 해당 하 는 set 방법 으로 이 루어 집 니 다.먼저 맵 의 getView()를 통 해 현재 맵 을 가 져 올 때 보기 대상 을 가 져 온 다음 보기 대상 에 따라 get 방법 으로 현재 크기 조정 단계(Zoom),중심 점(center)을 가 져 와 야 합 니 다.회전 각도(rotation)등 매개 변수.
(1)지도 크기 조정
View 의 setZoom 방법 을 통 해 이 루어 진 크기 조정 단 계 는 setZoom 방법의 매개 변수 로 설정 합 니 다.먼저 view.getZoom()을 통 해 현재 맵 의 단 계 를 가 져 온 다음 setZoom 방법 으로 크기 조정(view.setZoom(zoom-1)을 하면 지 도 를 한 단계 축소 할 수 있 습 니 다.view.setZoom(zoom+1)을 통 해.지 도 를 한 단계 확대 할 수 있 습 니 다.
(2)지도 이동
지 도 를 이동 하 는 것 은 지도 현재 지도의 중심 을 바 꾸 어 지도 보기 의 set Center 방법 을 통 해 이 루어 진다.먼저 맵 대상 을 통 해 맵 의 보기 대상 을 가 져 온 다음 setCenter 방법 으로 설정 합 니 다.함수 가 전달 하 는 매개 변 수 는 지도 중심의 좌표 점 이다.
(3)회전 지도
이것 은 맵 에 기본적으로 불 러 오 는 회전 컨트롤(ol.control.Rotate)을 통 해 이 루어 집 니 다.Rotate 컨트롤 의 autoHide 매개 변 수 는 기본적으로 true 로 설정 되 어 있 으 며 회전 각도 가 0 일 때 자동 으로 회전 기능 을 숨 깁 니 다.이 예 에서 우 리 는 지도의 초기 회전 각 을 60°(rotation:Math.PI/6//회전 각 도 를 설정)로 설 정 했 기 때문에 회전 단 추 를 눌 렀 을 때 60°를 0°로 돌려 버튼 을 숨 깁 니 다.
(4)리 셋 맵
이 기능 은 지 도 를 우리 가 지 도 를 처음 불 러 온 상태 로 복원 하 는 것 입 니 다.이것 은 View 의 설정 과 관련 되 어 있 습 니 다.우 리 는 먼저 지 도 를 불 러 올 때의 크기 조정 단계,중심 점,회전 각 도 를 얻 은 다음 에 setZoom,setCenter,setRotation 방법 으로 설정 하여 지도의 복원 기능 을 실현 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
Android-ViewModel 과 LiveData 사용 에 대한 자세 한 설명
vue 에서 팝 업 애니메이션 효 과 를 실현 하 는 예제 코드

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage