2014年5月28日水曜日

1 - ol3-beta.5 11 - Workshop 3.1. Displaying a Scale Line

3. コントロールとインターラクション(対話操作)
3.1. スケールラインを表示する
マップに表示するもうひとつの典型的なウィジェットは、スケールバーです。OpenLayers 3 はまさにこのために ol.control.SaleLine を提供しています。

3.1.1. ScaleLine コントロールの作成
タスク
1. テキストエディタで map.html を開きます。
2. マップの設定のどこかに、地図に新しいスケールラインコントロールを作成するための次のコードを追加します。
controls: ol.control.defaults().extend([
  new ol.control.ScaleLine()
]),

3. 変更を保存し、map.htm をブラウザで開きます。:http://localhost:8080/ol_workshop/map.html(訳注:Webサーバが動作している任意のディレクトリなら、対応するアドレス。以降、これに準じます。)


左下隅にあるデフォルトのスケールバー。

3.1.2. ScaleLine コントロールの移動
画像の上のスケールバーを読むのは少し難しいかもしれません。スケールの視認性を向上させるために取るべきアプローチ(見やすくする方法)がいくつかあます。あなたがマップのビューポート内のコントロールを維持したい場合は、ドキュメントの CSS 内でいくつかのスタイル宣言を追加することができます。これをテストするには、次のようなものでスケールバーに背景色とパディング(ボーダとコンテンツの間隔)を含めることができます。
.ol-scale-line, .ol-scale-line:not([ie8andbelow]) {
  background: black;
  padding: 5px;
}

しかしながら、この演習のために、マップのビューポートがひどく混雑しつつあると思うでしょう。このような過剰な混雑を避けるには、別の場所にスケールを表示することができます。これを実現するためには、まず最初に、マークアップに追加要素を作成して、それから、この新しい要素の中でスケールコントロールにそのものを描画することを指示する必要があります。

タスク
1. ページの <body> に新しいブロックレベル要素を作成します。要素の参照を簡単にするために、それに id 属性を与えます。map.html ページの <body> のどこかに次のマークアップを挿入します。(マップビューポート要素 <div id="map"></div> の後でスケール要素を右に配置することは、理にかなっています。):
<div id="scale-line" class="scale-line"></div>

2. ここでは、「scale-line」要素を参照するために、スケールコントロールを作成するコードを修正します。
controls: ol.control.defaults().extend([
  new ol.control.ScaleLine({className: 'ol-scale-line', target: document.getElementById('scale-line')})
]),

3. 変更を保存し、map.html をブラウザで開きます。:http://localhost:8080/ol_workshop/map.html
.scale-line {
  position: absolute;
  top: 350px;
}
.ol-scale-line {
  position: relative;
  bottom: 0px;
  left: 0px;
}

4. ここで、変更を保存し、ブラウザで map.html を再び表示します。:http://localhost:8080/ol_workshop/map.html


マップビューポートの外側のスケールライン制御。

注意:ol.control.Control から(ol.inherits を使用して)継承できるカスタムコントロールを作成します。この例を参照するために、次を確認します。:http://ol3js.org/en/master/examples/custom-controls.html

0 件のコメント: