OpenLayers 3はレイヤーコントロール機能を実現します。

7245 ワード

OpenLayers 3 レイヤーのコントロール

この例では、OpenLayers 3のレイヤーコントロールを実現するための具体的なコードを共有します。
1.はじめに
実際のアプリケーションでは、地図容器にロードされたレイヤーをレイヤー表示のコントロール機能により表示し、ロードされたレイヤーを表示します。ユーザの確認と操作に便利です。OpenLayers 3には同様のレイヤーコントロールが提供されていませんが、彼のAPIはこの機能に関するインターフェースを提供しています。
2.考え方を実現する
（1）新しいウェブページを作成し、前の文章を参考にしてOSI瓦層をロードする方法で、OSI瓦、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がLayer Controlのdivを作成し、z-indxを設定して地図の上に表示させ、レイヤーリストコンテナに新しいリスト（idはlayer Treeの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）まず地図容器を作成し、OSIタイル層、JSONとKML形式のベクトル図をそれぞれロードし、これらのレイヤーを初期化する時、name属性を追加して、現在のレイヤーの名前を説明する。
（2）レイヤーのリストをロードするために機能関数loadLayersControlをカプセル化しました。二つのパラメータが必要です。mapとidはそれぞれ地図コンテナオブジェクト、レイヤーリストIDです。構想を実現します。
①MapオブジェクトのgetLayersメソッドを呼び出して、現在の地図コンテナにロードされているすべてのレイヤーを取得し、レイヤー配列Layerに保存します。
②これらのレイヤーを巡回して、レイヤーのオブジェクトからget（name）を呼び出してレイヤー名を取得し、レイヤー名配列layer Nameに保存し、getVisibleを呼び出して、レイヤーの可視性を得て、レイヤーの可視性配列に保存します。
③それぞれli要素を追加して、レイヤー項目を運ぶために、liでチェックボックス要素（checkbox）を作成してレイヤー表示を制御し、Label元素を作成してレイヤー名を表示します。ここでは、addChangeEvent方式でcheckbox要素バインディング変更イベントを行い、イベントではLayerのsetVisible方式でレイヤーの表示を制御することができます。
(3)headタグには、scriptタグを介してloadLayersControl.jsを導入し、レイヤーリストを動的にロードすることができます。
4.実現効果は以下の通りです。

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

centos 7の中のsysteemeを深く分析します。

OpenLayers 3は地図の基本操作を実現します。