Daily Archives: 07/03/2013

OpenLayersのControl Subclassについて-2[Capter 21]

OpenLayersを使ってみる。[Chapter 21]

OpenLayersのControl Subclassについて-1[Capter 20] に引き続き、OpenLayersのControl Subclassについての基本を学んでおきます。

OpenLayers 2.10 Beginner's Guideなる書籍の章立てにあわせて、OpenLayersの使い方を学んでいきます。

OpenLayer.Control Subclass

非常に多くのSubclassがありますが、ここでは主なSubclassと非推奨以外のSubclassを学んでいきます。

OpenLayers Controlについての詳細は、OpenLayers.Control を参考にしてください。

OpenLayers.Control.MousePosition

MousePosition controlは、map上のmouseの座標値を経度緯度で表示します。HTML Elementを持ち、表示場所は標準では、mapの右下になります。

MousePosition properties

Name Type Description Default Value
prefix {String} The string that will be added to the beginning of the coordinate text. ' '
suffix {String} The string that will be added after the coordinate text. ' '
emptyString {String} Text that will be displayed instead of the coordinates if the mouse is moved outside of the map. By default, when the mouse is moved outside of the map the last known coordinates will remain displayed. null
separator {String} The string that will be placed in between the longitude and latitude. ','
numDigits {Integer} Specifies the numbers of digits after the decimal point (i.e., precision), of the coordinate displayed. 5
displayProjection {OpenLayers.Projection} Controls what projection the coordinates will be displayed in. Any projection other than EPSG:4326 or EPSG:900913 will require the Proj4js library to properly re-project the coordinates. If this property is not set, the map's projection will be used.  
div {HTML Element} If specified, the HTML Element to place this control in.  

OpenLayers.Control.Navigation

Navigation controlは、defaultで追加されている4つのcontrolの一つです。このcontrolは、mouseで拡大縮小やmapの表示位置の移動などmouse操作ナビゲーションを行います。

Navigation properties

Name Type Description Default Value
documentDrag {Boolean} Determines whether the map should be allowed to be dragged when the mouse exits the map viewport (i.e., the map HTML div element). false
handleRightClicks {Boolean} If set to turn, the map will intercept right clicks. On a double right click, the map will zoom out. false
zoomWheel {Boolean} Specifies if the mouse scroll wheel will make the map zoom in. true
autoActivate {Boolean} Determines whether the control should be activated when it is added to the map. It can be useful when adding this control to a panel. true

OpenLayers.Control.NavigationHistory

NavigationHistory controlは、mapのNavigationで表示した履歴を操作するcontrolです。Controlからはnextとpreviousを呼び出して使います。 NavigationHistory controlは、nextTrigger()とpreviousTrigger()関数を呼び出します。

NavigationHistory properties

Name Type Description Default Value
limit {Integer} Specifies the limit of history states to store. 50
nextStack {Array} Contains an array of next history states. Not used when instantiating an object.
previousStack {Array} Contains an array of previous history states. Not used when instantiating an object.

NavigationHistory function

NavigationHistory controlは、次の2つのfunctionを飛び出します。

  • nextTrigger(): This function will call the child next control's trigger() function (which can also be called via nav_history_control.next.trigger()). If there is a next position, it will move the map to the next position on the position stack.
  • previousTrigger(): This function will call the child previous control's trigger() function (which can also be called via nav_history_control.previous.trigger()). If there is a previous position, it will move the map to the previous position on the position stack.

Using NavigationHistory control example code

OpenLayersのControl Subclassについて-1[Capter 20] のcodeをつかってFirefoxのFirebugで確認してみます。
c:¥ms4w¥apache¥htdocs¥openlayer¥chapter6¥chapter6_ex3_attributions.htmlをedtiorで呼び出して、

//Add a control to the map
var nav_history_control = new OpenLayers.Control.NavigationHistory();
map.addControl(nav_history_control);

のcodeを加えます。

保存後、FireFoxを立ち上げて、http://localhost/openlayers2_12/chapter6/chapter6_ex3_attributions.htmlと入力して、FireFoxを開いて、適当に拡大縮小や移動を何回か行います。

その後、FirefoxのFirebugのconsoleから、nav_history_control.previousTrigger();を入力することで、表示履歴を戻すことができます。

また、nav_history_control.nextTrigger();を入力することで、表示履歴を先に進めることができます。

NavigationHistory controlをmap上に配置する方法は、次の章で行います。

今回のまとめ

OpenLayersによるControl Subclassの基本について学びました。
次回は、引き続きOpenLayers Control Subclassの詳細その3について学んでいきます。

また、本tutorialは、htmlやCSSやJavaScriptの基本的なことはある程度理解している前提で今後も話を進めていきます。また、誤字、脱字、spell間違いや勘違いも多々出てくると考えられます。
それは違うじゃん!!とかいろんな意見をいただければと思います。
そこんところ ヨロシク~~!!

OpenLayers Tutorialの目次に戻る。

1 / 11

Social Widgets powered by AB-WebLog.com.