OpenLayers 3 로 딩 상용 컨트롤 사용 방법 상세 설명

4432 단어 OpenLayers3로드
본 고의 실례 는 OpenLayers 3 에서 자주 사용 하 는 컨트롤 러 를 불 러 오 는 데 사용 되 는 구체 적 인 코드 를 공유 하 였 으 며,구체 적 인 내용 은 다음 과 같다.
1.머리말
지도 컨트롤 은 지도 크기 조정,전체 화면,좌표 표시 컨트롤 등 으로 우리 가 지 도 를 조작 하 는 데 편리 합 니 다.OpenLayers 3 은 지도 내 비게 이 션,비례 자,매의 눈,측정 도구 등 자주 사용 하 는 지도 컨트롤 을 많이 포 장 했 습 니 다.이 컨트롤 들 은 모두 ol.control.control 가상 기 류 를 바탕 으로 포 장 됩 니 다.ol.control.control 의 하위 클래스 는 각종 자주 사용 하 는 지도 컨트롤 입 니 다.맵 대상 의 Control 파 라 메 터 를 통 해 설정 하거나 addControl 방법 으로 맵 창 에 컨트롤 을 추가 할 수 있 습 니 다.
지 도 를 불 러 올 때 OpenLayers 3 는 ol.control.defaults 를 통 해 자주 사용 하 는 세 개의 공간 을 기본적으로 불 러 옵 니 다.크기 조정 컨트롤(ol.control.Zoom),회전 컨트롤(ol.control.Roate),그래 픽 데이터 원본 속성 컨트롤(ol.control.Attribution)을 불 러 옵 니 다.따라서 지도 용기 의 왼쪽 상단 에 마우스 로 크기 조정 단 추 를 누 를 수 있 습 니 다.그리고 오른쪽 아래 에 있 는 그림 데이터 원본 컨트롤 로 지 도 를 조작 합 니 다.

2.컨트롤
2.1 탐색 컨트롤
네 비게 이 션 컨트롤 은 지도 에 대한 단계별 크기 조정 을 실현 하고 네 비게 이 션 바 의 슬라이더 를 끌 면 크기 조정 작업 을 할 수 있 습 니 다.OpenLayers 3 프레임 워 크 에서 제공 하 는 지도 크기 조정 제어 에 관 한 컨트롤 은 지도 크기 조정 컨트롤(ol.control.Zoom),슬라이더 크기 조정(ol.control.ZoomSlider),단추 식 크기 조정 을 특정 범위 로 하 는 컨트롤(ol.control.ZoomToExtent)을 포함 하여 이 컨트롤 들 의 모양 을 사용자 정의 할 수 있 습 니 다.
다음은 지도 크기 조정 과 관련 된 컨트롤 의 기본 스타일 을 수정 하여 네 비게 이 션 바 를 실현 합 니 다.효 과 는 다음 과 같 습 니 다.

실현 절 차 는 다음 과 같다.
(1)페이지 를 새로 만 들 고 OSM 기와 지 도 를 불 러 옵 니 다.구체 적 으로 이 글 을 볼 수 있 습 니 다OpenLayers 3 기초 튜 토리 얼 구현 지도 표시 기능
(2)맵 로드 완료 후 ZoomSlider,ZoomToExtent,컨트롤 을 초기 화하 고 addControl 방법 으로 컨트롤 을 맵 용기 에 불 러 옵 니 다.
코드 는 다음 과 같다.

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>       </title>
 <!--   ol.css，  ol.css -->
 <link rel="stylesheet" href="css/ol.css" rel="external nofollow" >
 <script src="js/ol.js"></script>
 <style>
 #map {
 width: 100%;
 height: 100%;
 position: absolute;
 }
 </style>
 <script>
 function init() {
 //   Map  ，      
 var map = new ol.Map({
 target: 'map', //    div id
 //           
 layers: [
  //        
  new ol.layer.Tile({
  source: new ol.source.OSM() //  osm  
  })
 ],
 //      
 view: new ol.View({
  center: [0, 0],
  zoom: 2
 })

 });
 //   ZoomSlider           
 var zoomslider = new ol.control.ZoomSlider();
 map.addControl(zoomslider);
 //   zoomToExent           
 var zoomToExent = new ol.control.ZoomToExtent({
 extend: [13100000, 4290000,
  13200000, 5210000
 ]
 });
 map.addControl(zoomToExent);
 }
 </script>
</head>

<body onload="init()">
 <div id="map"></div>
</body>

</html>
코드 설명:우선 컨트롤 대상 을 예화 한 다음 맵 의 addControl 방법 으로 맵 용기 에 불 러 오 면 됩 니 다.코드 에 있 는 ZoomToExtent 컨트롤 의 extent 매개 변 수 는 맵 의 크기 조정 범위 입 니 다.현재 지 도 를 이 범위 로 크기 조정 하면 보기 에 이 범 위 를 표시 합 니 다.
2.2 크기 조정 컨트롤 스타일 수정
우 리 는 css 스타일 을 통 해 Zoom,ZoomSlider,ZoomToExtent 스타일 을 설정 하여 그 가 지도 에 표시 한 위 치 를 조정 할 수 있 습 니 다.코드 는 다음 과 같 습 니 다:

#map .ol-zoom .ol-zoom-out {
 margin-top: 204px;
}

#map .ol-zoomslider {
 background-color: transparent;
 top: 2.3em;
}

#map .ol-touch .ol-zoom .ol-zoom-out {
 margin-top: 212px;
}

#map .ol-touch .ol-zoomslider {
 top: 2.75em;
}

#map .ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
#map .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {
 top: 3px;
}

#map .ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
#map .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {
 top: 232px;
}


/*      ZoomToExtent   ，         
 */

#map .ol-zoom-extent {
 top: 280px;
}
실현 효 과 는 다음 과 같다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
웹 스 톰 에 less 를 설정 하 는 방법 에 대한 자세 한 설명
OpenLayers 3 지도 표시 기능 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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