OpenLayers 3地図イーグル・アイ及び地図スケールの追加を実現します。

4701 ワード

本論文の例では、OpenLayers 3が地図イーグル・アイ及び地図スケールの追加を実現するための具体的なコードを共有しています。
1.はじめに
地図イーグル・アイとは地図の鳥瞰図であり、いわゆる小さな地図のことです。イーグル・アイを通じて現在の地図の表示位置を得ることができます。イーグル・アイをクリックしたり、ドラッグしたりして、見たい位置に移動することもできます。Openlayers 3パッケージのイーグル・アイコントロールは、ol.co ntrol.OverviewMapで、表示されているスタイルをカスタマイズできます。
2.考え方を実現する
（1）ウェブページを新規作成し、前の記事地図表示機能を実現するを参照して、OSIタイル層をロードする。
（2）イーグル・アイコントロール（ol.ntrol.OverviewMap）を実装し、前のように、デフォルトのイーグル・アイコントロールを実装できます。必要に応じてパラメータを設定することもできます。
(3)実用化されたイーグル・アイコントロールを地図コンテナにロードします。実際の地図コンテナMapのコードにおいて、controlsパラメータを設定してイーグル・アイコントロールをロードすることもできますし、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/OverviewMap.js"></script>
 <style>
 #map {
  width: 100%;
  height: 100%;
 }
 /*         */

 .ol-custom-overviewmap,
 .ol-custom-overviewmap.ol-uncollapsible {
  bottom: auto;
  left: auto;
  right: 0;
  /*    */
  top: 0;
  /*    */
 }
 /*                */

 .ol-custom-overviewmap:not(.ol-collapsed) {
  border: 1px solid black;
 }
 /*              */

 .ol-custom-overviewmap .ol-overviewmap-map {
  border: none;
  width: 300px;
 }
 /*                      */

 .ol-custom-overviewmap .ol-overviewmap-box {
  border: 2px solid red;
 }
 /*                    */

 .ol-custom-overviewmap:not(.ol-collapsed) button {
  bottom: auto;
  left: auto;
  right: 1px;
  top: 1px;
 }
 </style>
</head>

<body onload="init()">
 <div id="map"></div>
</body>

</html>

コード解析
上のコードは主にイーグル・アイのスタイルを定義するために使われています。ol-custom-overviewmapを通じてイーグル・アイコントロールを右側の上部に設定して表示し、イーグル・アイコントロールの外枠を設定します。
jsコード:


function init() {
 //        （OverviewMap），      
 var overviewMapControl = new ol.control.OverviewMap({
 className: 'ol-overviewmap ol-custom-overviewmap', //      
 //                     
 layers: [
  new ol.layer.Tile({
  source: new ol.source.OSM({
   'url': 'http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg'
  })
  })
 ],
 collapseLabel: '\u00BB', //               
 label: '\u00AB', //               
 collapsed: false //       
 });
 //    map  ，      
 var map = new ol.Map({
 target: 'map', //     div
 //            
 layers: [
  new ol.layer.Tile({ //        
  source: new ol.source.OSM() //  OSM      
  })
 ],
 //       
 view: new ol.View({
  center: [12000000, 4000000], //      
  zoom: 8 //        
 }),
 //           
 //       
 controls: ol.control.defaults().extend([overviewMapControl])
 });
}

コード解析
上のコードは、実際にイーグル・アイコントロールを溶かし、コントロールの関連パラメータを設定します。
（1）layers：イーグル・アイ容器に装填されているレイヤーは、イーグル・アイ容器が地図容器と似ています。必要に応じて、メイン図とは異なるレイヤーデータをロードすることができますが、主図とイーグル・アイのサムネイルは同じ座標で結ばれています。
（2）CollappseLabel：イーグル・アイコントロールを展開する際の機能ボタンの表示。
（3）label：イーグル・アイコントロールが折り畳まれた時の機能ボタンの表示は、collappseLabelに対して行われます。
（4）Collappsed：イーグル・アイコントロールの初期ロード時に展開表示されますか？falseは展開状態です。
（5）クラスName：イーグル・アイコントロールのクラス名で、このような名来によって、イーグル・アイコントロール全体のスタイルを定義します。
4.効果を実現する

5.スケールの追加
スケールを追加する方法は、スケールコントロール（ol.ntrol.Screaneline）を実例化することにより、アプリケーションのニーズに応じてパラメータを設定することができます。たとえば、スケールの単位（units）を設定することができます。その後、地図コンテナMapによりそのcontrolパラメータを設定してスケールコントロールをロードしても良いし、mapオブジェクトのaddControlを呼び出してコントロールをロードしても良いです。
主なコードは以下の通りです


//         
var scaleLineControl = new ol.control.ScaleLine({
 //         degrees、imperial、us、nautical metric（    ）
 units: "metric"
 });

map.addControl(scaleLineControl);

効果を実現する

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

Vimマルチライン切り取り、コピー、削除機能

Kotlinは、インターフェースまたは抽象クラスの匿名のオブジェクトの例を作成します。