OpenLayersを使ってみる。[Chapter 21]
OpenLayersのControl Subclassについて－１[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について－１[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の詳細その３について学んでいきます。
また、本tutorialは、htmlやCSSやJavaScriptの基本的なことはある程度理解している前提で今後も話を進めていきます。また、誤字、脱字、spell間違いや勘違いも多々出てくると考えられます。
それは違うじゃん！！とかいろんな意見をいただければと思います。
そこんところ ヨロシク～～！！
最近のコメント