Category Archives: jsfiddle

OpenLayersのMap Class Propertiesについて-5[Chapter 31]

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

OpenLayersのMap Class Propertiesについて-4[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について-3[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間違いや勘違いも多々出てくると考えられます。
それは違うじゃん!!とかいろんな意見をいただければと思います。
そこんところ ヨロシク~~!!

OpenLayers Tutorialの目次に戻る。

1 / 3123

Social Widgets powered by AB-WebLog.com.