OpenLayersを使ってみる。[Chapter 31]
OpenLayersのMap Class Propertiesについて－４[Chapter 30] に引き続き、OpenLayersのMap Class Propertiesについての基本を学んでおきます。
OpenLayers 2.10 Beginner's Guideなる書籍の章立てにあわせて、OpenLayersの使い方を学んでいきます。
OpenLayers Mapについての詳細は、OpenLayers.Map を参考にしてください。
Map class properties
ここでは、Map classのよく使うpropertiesについて学んでいきます。すべてのpropertiesについては、
OpenLayers.Map を参考にしてください。
Map propteries
OpenLayersのMap Class Propertiesについて－３[Chapter 29] に引き続き、OpenLayersのMap Class Propertiesについて引き続き、Map propertiesを学びます。
panMethod
Pan(移動)のpropertiesです。Panをanimationっぽく動かします。
ただ、あまり使ったことがないので、なんとも。。。
panMethod: {Function}
panMethodのanimationを定義します。Deafultは、OpenLayers.Easing.Expo.easeOutとなっています。ほかには、OpenLayers.Easing.Quad.easeInOutがありますが、詳しくは、OpenLayers.Tweenを参考にしてください。
panDuration
panDuration: {Integer} Default: 50
panDurationは、panのclick時の移動を定義します。Defaultは50となっています。
ここで、上記のpropertiesを使ってexample codeを実行してみましょう。
pan animation example code
Panのanimationですので、jsfiddleを使ってみましょう。
Resultをclickすると、Mapが表示されます。
順に上記codeを見ていきましょう。
まずは、Map objectの作成を行います。
//Create a map with an empty array of controls map = new OpenLayers.Map('map_element', { controls : [ new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.LayerSwitcher()], panMethod : OpenLayers.Easing.Quad.easeInOut, //panMethod : OpenLayers.Easing.Expo.easeOut, panDuration : 100 });
panMethodを設定しています。
Edit jsfiddleでコメントを入れ替えて、pan animationの違いを確認してください。
projection
projection: {String}
projectionは地図の投影法です。Defaultでは、'EPSG:4326'です。度表示になります。
このprojectionは、maxExtent、maxResolution、unitsに関係してきます。
theme
theme: {String or null}
Defaultでは、'theme/default/style.css'です。
ほかにcssを変更することで、themeを代えることができます。
tileSize
tileSize: {OpenLayers.Size}
tileSizeは、defaultではGooglsmaps APIのように(256px,256px)となっています。
Tile cache serverに仕様にもよりますが、(512px,512px)のようにoverrideして定義することもできます。
そのときは、
tileSize: new OpenLayers.Size(512,512);
のように定義します。
unit
unit: {String}
unitは、mapの単位になります。Defaultでは、'degrees'で「度」になります。
利用可能はunitは、'degrees' または 'dd', 'm', 'ft', 'km', 'mi', 'inches'となります。Projectionよりunitを変更することができます。
今回のまとめ
OpenLayersのMap class propertyの基本について概要を学びました。
次回は、Map class functionについて学んでいきます。
また、本tutorialは、htmlやCSSやJavaScriptの基本的なことはある程度理解している前提で今後も話を進めていきます。また、誤字、脱字、spell間違いや勘違いも多々出てくると考えられます。
それは違うじゃん！！とかいろんな意見をいただければと思います。
そこんところ ヨロシク～～！！
最近のコメント