3.1. スケールラインの表示
マップに表示するもうひとつの典型的なウィジェットは、スケールバーです。OpenLayers はまさにこのために ol.control.ScaleLine を提供しています。
3.1.1. ScaleLine コントロールの作成
タスク
1. テキストエディタで map.html を開きます。
2. マップ設定（map config）のどこかに、地図に新しいスケールラインコントロールを作成するための次のコードを追加します。
controls: ol.control.defaults().extend([ new ol.control.ScaleLine() ]),
左下隅にあるデフォルトのスケールバー。
3.1.2. ScaleLine コントロールの移動
画像の上のスケールバーを読むのは少し難しいかもしれません。スケールの視認性を向上させるために取るべきアプローチ（見やすくする方法）がいくつかあます。マップのビューポート内のコントロールを維持したい場合は、ドキュメントの CSS 内でいくつかのスタイル宣言を追加することができます。これをテストするには、次のようなものでスケールバーに background color（背景色）と padding（パディング: ボーダとコンテンツの間隔）を含めることができます。
.ol-scale-line {
background: black;
padding: 5px;
}
タスク
1. ページの <body> に新しいブロックレベル要素を作成します。この要素の参照を簡単にするために、それに id 属性を与えます。map.html ページの <body> のどこかに次のマークアップを挿入します。（マップビューポート要素 <div id="map"></div> の後でスケール要素を右に配置することは、理にかなっています。）：
<div id="scale-line" class="scale-line"></div>
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({className: 'ol-scale-line', target: document.getElementById('scale-line')})
]),
4.コントロールの位置を、例えば、次の CSS ルールで修正します。
.scale-line {
position: absolute;
top: 350px;
}
.ol-scale-line {
position: relative;
bottom: 0px;
left: 0px;
}
マップビューポートの外側のスケールラインコントロール。
注意：ol.control.Control から（ol.inherits を使用して）継承できるカスタムコントロールを作成します。この例を参照するために、次を確認します。：http://openlayers.org/en/master/examples/custom-controls.html
0 件のコメント:
コメントを投稿