OpenLayers 3 그래 픽 컨트롤 기능 구현

7742 단어 OpenLayers3그래 픽 컨트롤
본 논문 의 사례 는 OpenLayers 3 가 그림 컨트롤 을 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
1.머리말
실제 응용 프로그램 에서 저 희 는 지도 용기 에 불 러 온 그림 을 그림 으로 표시 하 는 컨트롤 기능 을 통 해 불 러 온 그림 을 표시 하고 사용자 가 보고 조작 할 수 있 도록 합 니 다.OpenLayers 3 에 서 는 비슷 한 그림 컨트롤 을 제공 하지 않 았 지만 그의 API 는 이 기능 과 관련 된 인 터 페 이 스 를 제공 합 니 다.저 희 는 관련 인 터 페 이 스 를 호출 하여 이 기능 을 실현 할 수 있 습 니 다.
2.사고의 실현
(1)웹 페이지 를 새로 만 들 고 앞의 글 에서 OSM 기와 그림 을 불 러 오 는 방법 을 참고 하여 OSM 기와,MapQuest 영상,JSON 과 KML 형식의 벡터 그림 을 불 러 옵 니 다.
(2)지도 용기 에 div 층 을 새로 만 들 고 그림 목록 을 표시 합 니 다.그림 목록 div 에 목록 머리 div,그림 목록 ul 을 추가 하고 css 를 통 해 스타일 을 제어 합 니 다.
(3)그림 목록 을 불 러 오 는 기능 함 수 를 작성 하고 지도 가 불 러 온 후에 이 방법 을 사용 하여 그림 목록 의 보 여 줍 니 다.
3.그림 목록 기능 을 실현 하 는 코드 는 다음 과 같다.
html：

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

<head>
 <meta charset="UTF-8">
 <title>      </title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <link rel="stylesheet" href="css/ol.css" >
 <link rel="stylesheet" href="css/bootstrap.min.css" >
 <link rel="stylesheet" href="css/ZoomSlider.css" >
 <script src="js/ol.js"></script>
 <script src="js/loadLayersControl.js"></script>
 <style>
 body,
 html,
 div,
 ul,
 li,
 iframe,
 p,
 img {
  border: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-family: "    ";
 }

 #map {
  width: 100%;
  height: 100%;
  position: absolute;
 }
 /*           */

 .layerControl {
  position: absolute;
  bottom: 5px;
  min-width: 200px;
  max-height: 200px;
  right: 0px;
  top: 5px;
  z-index: 2001;
  /*        ，   z-index           */
  color: #ffffff;
  background-color: #4c4e5a;
  border-width: 10px;
  /*     */
  border-radius: 10px;
  /*      */
  border-color: #000 #000 #000 #000;
  /*    */
 }

 .layerControl .title {
  font-weight: bold;
  font-size: 15px;
  margin: 10px;
 }

 .layerTree li {
  list-style: none;
  margin: 5px 10px;
 }
 /*             */

 #mouse-position {
  float: left;
  position: absolute;
  bottom: 5px;
  width: 200px;
  height: 20px;
  z-index: 2000;
  /*        ，   z-index           */
 }
 </style>
</head>

<body onload="init()">
 <div id="map">
 <div id="layerControl" class="layerControl">
  <div class="title"><label>    </label></div>
  <ul id="layerTree" class="layerTree"></ul>
 </div>
 </div>
</body>

</html>
코드 분석:
그림 목록 으로 id 를 layerControl 로 만 듭 니 다.z-index 를 설정 하여 지도 위 에 표시 하고 그림 목록 용기 에 새 목록(id 는 layerTree 의 ul)을 통 해 지도 용기 에 있 는 그림 을 불 러 옵 니 다.목록 에 있 는 li 는 코드 동적 으로 만 들 어 졌 으 며 html 에 서 는 ul 만 만 만 듭 니 다.
js 코드:

var layer = new Array(); //map      
var layerName = new Array(); //      
var layerVisibility = new Array(); //        

/**
 *         
 * @param {ol.Map} map     
 * @param {string} id       ID
 */
function loadLayersControl(map, id) {
 var treeContent = document.getElementById(id); //      

 var layers = map.getLayers(); //         
 for (var i = 0; i < layers.getLength(); i++) {
 //         、      
 layer[i] = layers.item(i);
 layerName[i] = layer[i].get('name');
 layerVisibility[i] = layer[i].getVisible();

 //  li  ，       
 var elementLi = document.createElement('li');
 treeContent.appendChild(elementLi); //      
 //       
 var elementInput = document.createElement('input');
 elementInput.type = "checkbox";
 elementInput.name = "layers";
 elementLi.appendChild(elementInput);
 //  label  
 var elementLable = document.createElement('label');
 elementLable.className = "layer";
 //      
 setInnerText(elementLable, layerName[i]);
 elementLi.appendChild(elementLable);

 //          
 if (layerVisibility[i]) {
  elementInput.checked = true;
 }
 addChangeEvent(elementInput, layer[i]); // checkbox            
 }
}
/**
 *  checkbox        
 * @param {input} element checkbox  
 * @param {ol.layer.Layer} layer     
 */
function addChangeEvent(element, layer) {
 element.onclick = function() {
 if (element.checked) {
  layer.setVisible(true); //    
 } else {
  layer.setVisible(false); //     
 }
 };
}
/**
 *           （  ）
 */
function setInnerText(element, text) {
 if (typeof element.textContent == "string") {
 element.textContent = text;
 } else {
 element.innerText = text;
 }
}

function init() {
 //   Map      
 var map = new ol.Map({
 target: 'map', //    div ID
 //          
 layers: [
  //        
  new ol.layer.Tile({
  source: new ol.source.OSM(),
  name: '    (OSM  )'
  }),

  new ol.layer.Vector({
  source: new ol.source.Vector({
   url: 'data/geojson/countries.geojson',
   format: new ol.format.GeoJSON()
  }),
  name: '  (Json     )'
  }),
  new ol.layer.Vector({
  source: new ol.source.Vector({
   url: 'data/kml/2012-02-10.kml',
   format: new ol.format.KML({
   extractStyles: false
   })
  }),
  name: ' (KML     )'
  })
 ],
 //      
 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);
 //        
 loadLayersControl(map, "layerTree");
}
코드 분석:
(1)먼저 지도 용 기 를 만 들 고 OSM 기와 그림,JSON,KML 형식의 벡터 그림 을 각각 불 러 오고 이 그림 들 을 초기 화 할 때 name 속성 을 추가 하여 현재 그림 의 이름 을 설명 합 니 다.
(2)기능 함수 loadLayersControl 을 패키지 하여 그림 층 의 목록 을 불 러 오 는 데 사 용 됩 니 다.두 개의 매개 변 수 를 입력 해 야 합 니 다.map 와 id 는 각각 지도 용기 대상,그림 층 목록 id 로 방향 을 실현 해 야 합 니 다.
① 맵 대상 의 getLayers 방법 을 호출 하여 현재 맵 용기 에 불 러 온 모든 그림 을 가 져 와 그림 배열 layer 에 저장 합 니 다.
② 이 그림 들 을 옮 겨 다 니 며 그림 의 대상 을 통 해 get('name')을 호출 하여 그림 의 이름 을 얻 고 그림 의 이름 배열 layerName 에 저장 합 니 다.getVisible()을 호출 하여 그림 의 보 이 는 속성 을 얻 고 그림 의 보 이 는 배열 에 저장 합 니 다(layerVisibility).
③ li 요 소 를 각각 추가 하여 그림 항목 을 불 러 옵 니 다.li 에서 체크 상자 요소(checkbox)제어 그림 층 을 만 들 고 label 요 소 를 만들어 그림 층 이름 을 표시 합 니 다.그 중에서 addChangeEvent 방법 을 통 해 checkbox 요소 바 인 딩 변경 사건 으로 이벤트 에서 Layer 의 setVisible 방법 으로 그림 의 표 시 를 제어 합 니 다.
(3)헤드 탭 에서 script 탭 을 통 해 loadLayersControl.js 를 도입 하여 동적 로드 레이 어 목록 을 실현 합 니 다.
4.실현 효 과 는 다음 과 같다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
centos 7 의 systemd 를 깊이 분석 하 다.
Android-ViewModel 과 LiveData 사용 에 대한 자세 한 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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