OpenLayers 3 지도 매의 눈 및 지도 비례 자 추가 실현

5064 단어 OpenLayers3지도.
본 논문 의 사례 는 OpenLayers 3 가 지도 매의 눈 과 지도 비례 척 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
1.머리말
지도 매의 눈 은 바로 지도의 조감도 이다.흔히 말 하 는 작은 지도 이다.우 리 는 매의 눈 을 통 해 현재 지도의 표시 위 치 를 얻 을 수 있 고 매의 눈 에서 클릭 하거나 드래그 하거나 보고 싶 은 위치 로 이동 할 수 있다.매의 눈 이 보 이 는 구역 은 우리 가 보 는 주시 구역 의 범위 보다 크 고 매의 눈 중심 틀 은 바로 주시 구역 의 시각 범위 이다.Openlayers 3 봉 인 된 매의 눈 컨트롤 은 ol.control.Overview Map 으로 표 시 된 스타일 을 사용자 정의 할 수 있 습 니 다.
2.사고의 실현
(1)웹 페이지 를 새로 만 들 고 앞의 글 을 참고 하 십시오지도 표시 기능 구현OSM 기와 그림 을 불 러 옵 니 다.
(2)매의 눈 컨트롤(ol.control.Overview Map)을 예화 합 니 다.앞의 것 과 마찬가지 로 기본 적 인 매의 눈 컨트롤 을 예화 할 수도 있 고 필요 에 따라 파 라 메 터 를 설정 할 수도 있 습 니 다.
(3)실제 화 된 매의 눈 컨트롤 을 지도 용기 에 불 러 옵 니 다.지도 용기 Map 의 코드 를 예화 할 수 있 으 며,controls 파 라 메 터 를 설정 하여 매의 눈 컨트롤 을 불 러 올 수도 있 고,map 대상 의 addControl 방법 으로 컨트롤 을 불 러 올 수도 있 습 니 다.
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/OverviewMap.js"></script>
 <style>
 #map {
  width: 100%;
  height: 100%;
 }
 /*         */

 .ol-custom-overviewmap,
 .ol-custom-overviewmap.ol-uncollapsible {
  bottom: auto;
  left: auto;
  right: 0;
  /*    */
  top: 0;
  /*    */
 }
 /*                */

 .ol-custom-overviewmap:not(.ol-collapsed) {
  border: 1px solid black;
 }
 /*              */

 .ol-custom-overviewmap .ol-overviewmap-map {
  border: none;
  width: 300px;
 }
 /*                      */

 .ol-custom-overviewmap .ol-overviewmap-box {
  border: 2px solid red;
 }
 /*                    */

 .ol-custom-overviewmap:not(.ol-collapsed) button {
  bottom: auto;
  left: auto;
  right: 1px;
  top: 1px;
 }
 </style>
</head>

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

</html>
코드 분석
위의 코드 는 주로 매의 눈 스타일 을 정의 하 는 데 사 용 됩 니 다.ol-custom-over view map 를 통 해 매의 눈 컨트롤 을 오른쪽 상단 에 표시 하고 매의 눈 컨트롤 외곽 상자,매의 눈 에 있 는 지도 용기 와 매의 눈 단추 의 스타일 을 설정 합 니 다.
js 코드:

function init() {
 //        （OverviewMap），      
 var overviewMapControl = new ol.control.OverviewMap({
 className: 'ol-overviewmap ol-custom-overviewmap', //      
 //                     
 layers: [
  new ol.layer.Tile({
  source: new ol.source.OSM({
   'url': 'http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg'
  })
  })
 ],
 collapseLabel: '\u00BB', //               
 label: '\u00AB', //               
 collapsed: false //       
 });
 //    map  ，      
 var map = new ol.Map({
 target: 'map', //     div
 //            
 layers: [
  new ol.layer.Tile({ //        
  source: new ol.source.OSM() //  OSM      
  })
 ],
 //       
 view: new ol.View({
  center: [12000000, 4000000], //      
  zoom: 8 //        
 }),
 //           
 //       
 controls: ol.control.defaults().extend([overviewMapControl])
 });
}
코드 분석
위의 코드 는 매의 눈 컨트롤 을 예화 하고 컨트롤 의 관련 매개 변 수 를 설정 합 니 다.
(1)layers:매의 눈 용기 에 불 러 온 그림 층,매의 눈 용 기 는 지도 용기 와 유사 하 며 필요 에 따라 메 인 그림 과 다른 그림 층 데 이 터 를 불 러 올 수 있 으 나 메 인 그림 과 매의 눈 미리 보기 그림 은 같은 좌표 에 묶 어야 합 니 다.
(2)collapseLabel:매의 눈 컨트롤 을 펼 칠 때 기능 단추 의 표지 입 니 다.
(3)label:매의 눈 컨트롤 이 접 혔 을 때 기능 단추 의 표 지 는 collapseLabel 과 상대 적 으로 합 니 다.
(4)collapsed:매의 눈 컨트롤 을 처음 불 러 올 때 디 스 플레이 를 펼 칠 지,false 는 펼 친 상태 입 니 다.
(5)className:매의 눈 컨트롤 의 클래스 이름 입 니 다.이러한 이름 에 따라 전체 매의 눈 컨트롤 스타일 을 정의 합 니 다.
4.효과 실현

5.축척 의 첨가
비례 자 를 추가 하 는 방법 은 비례 자 컨트롤(ol.control.Scale Line)을 실례 화하 면 응용 수요 에 따라 파 라미 터 를 설정 할 수 있다.예 를 들 어 비례 자 단위(units)를 설정 할 수 있다.그리고 지도 용기 Map 을 통 해 controls 파 라 메 터 를 설정 하여 축척 컨트롤 을 불 러 오고 map 대상 의 addControl 방법 으로 컨트롤 을 불 러 올 수 있 습 니 다.
주요 코드 는 다음 과 같다.

//         
var scaleLineControl = new ol.control.ScaleLine({
 //         degrees、imperial、us、nautical metric（    ）
 units: "metric"
 });

map.addControl(scaleLineControl);
실현 효과

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
Vim 다 중 줄 잘라 내기,복사,삭제 기능
Kotlin 인터페이스 나 추상 클래스 의 익명 대상 인 스 턴 스 만 들 기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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