OpenLayers 그래 픽 전환 컨트롤 실현

OpenLayers 는 그림 계층 전환 을 위 한 컨트롤 이 없 기 때문에 그림 계층 컨트롤 을 스스로 실현 해 야 합 니 다.
사용자 정의 그림 층 전환 컨트롤 의 원 리 는 간단 합 니 다.그림 층 을 표시 할 때 다른 그림 층 을 숨 깁 니 다.
전체 코드:
layerSwitch.html:


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>      </title>
 <link rel="stylesheet" href="../v5.3.0/css/ol.css" />
 <script src="../v5.3.0/build/ol.js"></script>
</head>
<body>
 <div id="controls">
 <input type="checkbox" id="osm" checked />OpenStreetMap
 <input type="checkbox" id="bingmap" />Bing Map
 <input type="checkbox" id="stamen" />Stamen Map
 </div>
 <div id="map"></div>
 
 <script>
 let map = new ol.Map({
  target: 'map', //       div  
  layers: [
  new ol.layer.Tile({ // OpenStreetMap  
   source: new ol.source.OSM() 
  }),
  new ol.layer.Tile({ // Bing Map  
   source: new ol.source.BingMaps({
   key: ' ', //      Bing Map    key
   imagerySet: 'Aerial'
   }),
   visible: false //       
  }),
  new ol.layer.Tile({
   source: new ol.source.Stamen({
   layer: 'watercolor'
   }),
   visible: false //       
  })
  ],
  view: new ol.View({ //     
  projection: 'EPSG:3857',
  center: [0, 0],
  zoom: 0
  })
 });
 
 let controls = document.getElementById('controls'); 
 //     
 controls.addEventListener('click', (event) => {
  if(event.target.checked){ //          
  //   DOM   id               
  switch(event.target.id){
   case "osm": 
   map.getLayers().item(0).setVisible(true);
   break;
   case "bingmap":
   map.getLayers().item(1).setVisible(true);
   break;
   case "stamen": 
   map.getLayers().item(2).setVisible(true);
   break;
   default: break;
  }
  }else{  //          
  //   DOM   id               
  switch(event.target.id){
   case "osm": 
   map.getLayers().item(0).setVisible(false);
   break;
   case "bingmap":
   map.getLayers().item(1).setVisible(false);
   case "stamen": 
   map.getLayers().item(2).setVisible(false);
   default: break;
  }
  } 
 });
 </script>
</body>
</html>

구현 효과:

코드 의 전체적인 논 리 는 매우 간단 하 다.그 중에서 사건 의뢰 라 는 메커니즘 을 사용 하여 사건 을 귀속 시 켰 다.사건 의뢰 는 사건 귀속 으로 인 한 메모리 소 모 를 줄 일 수 있 기 때문에 평소에 개발 할 때 사건 의뢰 를 많이 사용 하 는 것 을 추천한다.
또한,map.getLayers()는 ol.collection 류 의 대상 을 되 돌려 줍 니 다.이 대상 에는 지도 에 있 는 세 개의 그림 대상(ol.layer.Tile)이 포함 되 어 있 으 며,item()방법 에 대응 하 는 색인 을 전송 하여 해당 하 는 그림 대상 을 찾 을 수 있 습 니 다.
마지막 으로 ol.layer.Tile 류 의 set Visible()방법 은 그림 의 표시 와 숨 김 을 설정 할 수 있 습 니 다.
어 떻 습 니까?스스로 그림 전환 컨트롤 을 실현 하 는 것 은 간단 하지 않 습 니까?
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

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

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

OpenLayers의 클릭 이벤트

OpenLayers의 클릭 이벤트는 전체ol에 추가됩니다.Map 객체의: 클릭 이벤트는 구체적인 Feature를 클릭하면 터치되며 밑그림을 클릭하면 클릭 이벤트가 터치되지 않습니다. 이벤트를 터치하면 위의 리셋 함수...

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

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

OpenLayers 그래 픽 전환 컨트롤 실현

좋은 웹페이지 즐겨찾기