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 件のコメント:
コメントを投稿