OpenLayers 3通常のコントロールの使い方をロードします。

4014 ワード

OpenLayers 3 読み込み

本論文の例では、OpenLayers 3に共通のコントロールをロードする具体的なコードを共有します。
1.はじめに
地図コントロールとは地図のズーム、フルスクリーン、座標表示コントロールなどです。私たちは地図を操作しやすいです。OpenLayers 3は多くの一般的な地図コントロールを実装しています。例えば、地図ナビゲーション、スケール、イーグル・アイ、計測ツールなどです。これらのコントロールはすべてol.ntrol.C.ontrol虚基類に基づいてカプセル化されています。マップウィンドウには、MapオブジェクトのControlパラメータで設定またはaddControl方法でコントロールを追加することができます。
地図をロードする時OpenLayers 3はol.ntrol.defaultsのデフォルトで三つの一般的な空間をロードしました。スケーリングコントロール（ol.co ntrol.Zoom）、回転コントロール（ol.co ntrol.Roate）、レイヤーデータソース属性コントロール（ol.co ntrol.Attribution）はマウスを通じて地図容器の左上のズームボタンを使うことができます。そして、右下のレイヤーデータソースコントロールを使って地図を操作します。

2.コントロール
2.1ナビゲーションコントロール
ナビゲーションコントロールとは、地図のレベル別スケーリングを行い、ナビゲーションバーの上のスライダをドラッグしてスケーリングを行います。OpenLayers 3フレームで提供される制御地図のスケーリングに関するコントロールは、地図スケーリングコントロール（ol.ntrol.Zoom）、スケーリングスライダ（ol.co ntrol.ZoomSlider）、ボタン式スケーリングを特定の範囲のコントロール（ol.com.ZoomToExtent）を含み、これらのコントロールのスタイルをカスタマイズすることができます。
地図の拡大縮小に関するコントロールのデフォルトのスタイルを変更することで、次のようなナビゲーションバーを実現します。

実装手順は以下の通りです。
（1）新しいページを作成し、OSI瓦の地図をロードし、具体的にはこの記事を見ることができるOpenLayers 3基礎教程の実現地図表示機能
（2）地図のロードが完了したら、ZoomSlider、ZoomToExtent、コントロールを初期化し、addControl方法で地図容器にコントロールをロードする。
コードは以下の通りです


<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>       </title>
 <!--   ol.css，  ol.css -->
 <link rel="stylesheet" href="css/ol.css" rel="external nofollow" >
 <script src="js/ol.js"></script>
 <style>
 #map {
 width: 100%;
 height: 100%;
 position: absolute;
 }
 </style>
 <script>
 function init() {
 //   Map  ，      
 var map = new ol.Map({
 target: 'map', //    div id
 //           
 layers: [
  //        
  new ol.layer.Tile({
  source: new ol.source.OSM() //  osm  
  })
 ],
 //      
 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);
 }
 </script>
</head>

<body onload="init()">
 <div id="map"></div>
</body>

</html>

コードの説明：まずコントロールオブジェクトを実例化してからMapのaddControl方法を呼び出して地図コンテナにロードすればいいです。コードの中のZoomToExtentコントロールのextentパラメータは地図のズーム範囲です。現在の地図をこの範囲に拡大縮小して表示します。
2.2ズームコントロールスタイルの変更
私たちはcssスタイルでZoom、ZoomSlider、ZoomToExtentのスタイルを設定して、彼の地図に表示される位置を調整することができます。コードは以下の通りです


#map .ol-zoom .ol-zoom-out {
 margin-top: 204px;
}

#map .ol-zoomslider {
 background-color: transparent;
 top: 2.3em;
}

#map .ol-touch .ol-zoom .ol-zoom-out {
 margin-top: 212px;
}

#map .ol-touch .ol-zoomslider {
 top: 2.75em;
}

#map .ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
#map .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {
 top: 3px;
}

#map .ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
#map .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {
 top: 232px;
}


/*      ZoomToExtent   ，         
 */

#map .ol-zoom-extent {
 top: 280px;
}

実現効果は以下の通りです

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

kotlin ankoページジャンプの実現方法は、パラメータやflagsを携帯します。

OpenLayers 3は地図表示機能を実現します。