OpenLayers 3 마우스 이동 표시 좌표 구현

본 논문 의 사례 는 OpenLayers 3 가 마우스 이동 으로 좌 표를 표시 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
1.머리말
마우스 이동 으로 좌 표를 표시 합 니 다.OpenLayers 3 프레임 워 크 는 마우스 이동 으로 좌 표를 표시 하 는 컨트롤(ol.control.Mouse Position)을 제공 합 니 다.기본적으로 지도의 오른쪽 상단 에 표 시 됩 니 다.스타일 을 사용자 정의 할 수 있 습 니 다.이 예 에서 우 리 는 앞의 OSM 을 불 러 와 기와 그림 을 불 러 와 지도 용기 의 왼쪽 아래 에 좌표 점 을 표시 하 는 정 보 를 실현 합 니 다.
2.사고의 실현
(1)웹 페이지 를 새로 만 들 고 앞의 OSM 기와 지 도 를 참고 하여 기와 지 도 를 불 러 옵 니 다.
(2)지도 용기 에 div 를 새로 만들어 좌표 정 보 를 표시 하고 스타일 을 설정 합 니 다.z-index 를 설정 하여 지도 에 표시 합 니 다.
(3)마우스 위치 컨트롤(ol.control.Mouse Position)을 예화 하면 실제 수 요 를 바탕 으로 설정 할 수 있 습 니 다.예 를 들 어 좌표계(procjection),좌표 값 의 디 스 플레이 형식(coordinateFormat),마우스 위치 좌표 점 을 표시 하 는 대상 용기(target)등 입 니 다.
(4)지도 용기 에 지도 용기 에 불 러 옵 니 다.지도 용기 Map 의 코드 를 예화 할 수 있 으 며,controlas 매개 변 수 를 설정 하여 마우스 위치 컨트롤 을 불 러 올 수도 있 고,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/MousePosition.js"></script>
 <style>
 #map {
  width: 100%;
  height: 100%;
  position: absolute;
 }

 #mouse-position {
  float: left;
  position: absolute;
  bottom: 5px;
  width: 200px;
  height: 20px;
  /*  z-index           */
  z-index: 2000;
 }
 /*                */

 .custom-mouse-position {
  color: red;
  font-size: 16px;
  font-family: "    ";
 }
 </style>
</head>

<body onload="init()">
 <div id="map">
 <div id="mouse-position"></div>
 </div>
</body>

</html>

코드 분석:
지도 용기 에 div 를 만 들 고 좌표 정 보 를 표시 하 며 스타일 을 설정 합 니 다.이 div 층 은 마우스 위치 컨트롤 의 가장 바깥쪽 용기 입 니 다.안쪽 은 마우스 정보 텍스트 탭 이 고 기본 클래스 는 ol-mouse-position 이 며 스스로 정의 할 수 있 습 니 다.예 를 들 어 우 리 는 그의 글씨체 크기 와 색깔 등 을 수정 했다.
js 코드:


function init() {
 //          
 var mousePositionControl = new ol.control.MousePosition({
 coordinateFormat: ol.coordinate.createStringXY(4), //    
 projection: 'EPSG:4326', //       
 className: 'custom-mouse-position', //        
 //              
 target: document.getElementById('mouse-position'),
 undefinedHTML: '&nbsp' //        
 });


 //    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: [102, 35],
  zoom: 3
 }),
 //           
 //         
 controls: ol.control.defaults().extend([mousePositionControl])
 });
}

코드 분석
(1)coordinateFormat:좌표 값 의 표시 형식.
(2)procjection:투영 좌표계,현재 마우스 위치의 좌표 점 을 현재 좌표계 아래 의 해당 값 으로 설정 하여 표시 합 니 다.
(3)target:좌표 점 정 보 를 표시 하 는 대상 용기,즉 가장 바깥쪽 용기 요 소 는 우리 가 만 든 id 가 mouse-position 인 div 요소 입 니 다.
(4)className:좌표 정보 가 사용 하 는 디 스 플레이 스타일 의 클래스 이름 은 좌표 값 텍스트 의 스타일 클래스 이름 입 니 다.사용자 정의 스타일 클래스 이름 custom-mouse-position 입 니 다.
실현 효 과 는 다음 과 같다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

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

지도 컨트롤 은 지도 크기 조정,전체 화면,좌표 표시 컨트롤 등 으로 우리 가 지 도 를 조작 하 는 데 편리 합 니 다.OpenLayers 3 은 지도 내 비게 이 션,비례 자,매의 눈,측정 도구 등 자주 사용 하...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

OpenLayers 3 마우스 이동 표시 좌표 구현

좋은 웹페이지 즐겨찾기