OpenLayer 3 사용자 정의 측정 컨트롤 MeasureTool

OpenLayer 3 에 기 존의 측정 도구 가 없어 서 고민 하 다가 비 뚤 어 진 과일 로 만 든 그래 픽 컨트롤 을 보고 홈 페이지 의 measure 인 스 턴 스 와 비 뚤 어 진 과일 로 만 든 템 플 릿 을 결합 하여 측정 도구 컨트롤 을 만 들 었 습 니 다.
다운로드
묘사 하 다.
Openlayers 3 의 사용자 정의 컨트롤 을 기반 으로 거리 측정(line)과 면적 측정(area)및 geodesic 측정 을 지원 합 니 다.
css 와 js 파일 을 불 러 온 후 직접 인용 하면 됩 니 다

JavaScript 원생 작성 을 사용 하여 JQuery 를 도입 할 필요 가 없습니다

사용 효 과 는 그림:

사용 방식
html 페이지 에 OpenLayer 3 의 css 와 js 파일 을 도입 한 후 다운로드 한 measuretool.css 와 measuretool.js 를 추가 합 니 다.


<link rel="stylesheet" href="measureTool.css" type="text/css">
<script type="text/javascript" src="measureTool.js"></script>

이후 맵 을 초기 화한 후 MeasureTool 도 구 를 추가 합 니 다.


var MeasureTool = new ol.control.MeasureTool({
 sphereradius : 6378137,//sphereradius
});
map.addControl(MeasureTool);

그 중의 매개 변수 인 sphereradius 는 geodesic 측정 을 지원 하여 구체 반경 을 설정 하 는 데 사용 되 며,모델 에 따라 반경 크기 를 설정 할 수 있 으 며,기본 크기 는 6378137 이 며,도입 시 에 도 이 매개 변 수 를 전송 하지 않 을 수 있 습 니 다.
주:측정 도구 의 checkbox 는 geodesic 측정 으로 선택 되 었 으 며,geodesic 측정 을 사용 하지 않 는 것 으로 선택 되 지 않 았 으 며,기본 값 은 선택 되 지 않 았 습 니 다.
전체 예제 html 코드:


<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <meta name="author" content="[email protected]" />
 <title>ol3-MeasureTool    (example)</title>
 <link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css">
 <script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script>
 <link rel="stylesheet" href="measureTool.css" type="text/css">
 <script type="text/javascript" src="measureTool.js"></script>

 <style>
  #map{
  height: 80%;
  width: 90%;
  }

  </style>
 </head>
 <body>
 <div id="map" class="map"></div>

 <script type="text/javascript">
  var map = new ol.Map({
  layers: [
   new ol.layer.Tile({
   source: new ol.source.OSM()
   })
  ],
  target: 'map',
  view: new ol.View({
   center: [11575000, 3602500],
   zoom: 14
  })
  });

  var MeasureTool = new ol.control.MeasureTool({
  sphereradius : 6378137,//sphereradius
  });
  map.addControl(MeasureTool);
 </script>

 </body>
</html>

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

OpenLayer 3 사용자 정의 측정 컨트롤 MeasureTool

좋은 웹페이지 즐겨찾기