OpenLayersのControl Subclassについて-3[Chapter 22]

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

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

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

OpenLayer.Control Subclass

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

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

OpenLayers.Control.NaviToolbar

NaviToolbar controlは、navigation control buttonのtoolbarを作成します。そして、移動と拡大縮小の2つのbuttonを持っています。

OpenLayers.Control.OverviewMap

OverviewMap controlは、mapの右下にtoggle buttonとして追加されます。mapの概観を表示します。
numZoomLevelsやmapOptions propertyなどで制御することができます。また、HTML Elementを持っています。

blog.godo-tys.jp_wp-content_gallery_openlayers_22_image01.jpg
OverviewMapのexample

OverviewMap properties

Name Type Description Default
size {OpenLayers.Size} Sets the size of the overview map, in pixels, in the format of width, height. An example call would be: size: new OpenLayers.Size(300,300). This will increase the size of the overview map itself, but the actual div element the overview map resides in is specified with CSS. new OpenLayers.Size(180, 90)
layers {Array{OpenLayers.Layer}} Specifies an array of layers from the map to be used in the overview map. If none are added here, by default the base layer will be used in the overview map. Uses the map base layer by default.
minRectSize {Integer} This property determines what the minimum width or height, in pixels, of the extent rectangle can be before it will be replaced with the value of the minRectDisplayClass. The larger the number, the bigger the extent rectangle will be before it gets replaced. This property can be used in accordance with the minRatio and maxRatio properties to provide a more custom behavior of the overview map control. 15
minRect DisplayClass {String} This specifies the name of the class that the extent rectangle will use when the minRectSize value is reached. We'll talk about control styling in much more detail in the next chapter on Styling Map Controls. 'RectReplacement'
minRatio {Float} This property will help determine when to zoom out the overview map. This ratio is calculated by dividing the overview map's resolution with the base map's resolution. The default value is 8. This means that if the resolution of the overview map is less than 8 times the resolution of your main map, the overview map will zoom out. 8
maxRatio {Float} This property helps in determining when to zoom the overview map in. The same principle applies here as above. The default value is 32, meaning, if the resolution of the overview map is greater than 32 times the resolution of the main map, the overview map will zoom in. 32
mapOptions {Object} This is an object just like the options property of the map object. It is an anonymous object that can contain the same options the map can contain. Setting some of these options can be very useful, especially the numZoomLevels property. For example, mapOptions: {numZoomLevels: 1} will cause the overview map never to zoom in or out, staying at the max extent. {}
autoPan {Boolean} This property determines whether to automatically pan the overview map to keep the extent rectangle in the middle. Setting this value to true will mimic the behavior of the overview map in Google Maps. false
div {HTML Element} If specified, the HTML Element to place this control in. If not specified, the OverviewMap control goes in the bottom right hand of the map.

OverviewMap functions

OverviewMap controlは手動で、表示と非表示に切り替える機能を持っています。

  • minimizeControl():がcallされた時は、最小化されます。これは、program内でLayerSwitcher controlを非表示する場合に使います。
  • maximizeControl():はminimizeControl()の反対の機能を持っています。

OpenLayers.Control.PanPanel

PanPanel controlは、mapの左上にpan panel(移動パネル)を追加します。これは、右、左、上、下の4つのimageを含んでいます。それぞれの矢印をclickするとmapを移動することができます。

PanPanel properties

Name Type Description Default Value
slideFactor {Integer} Similar to the KeyboardDefault control, it sets the amount of pixels to slide by. 50

OpenLayers.Control.PanZoom

PanZoom controlはdefaultで追加されているcontrolの一つです。PanPanelZoomPanelと同様に左上に追加されます。

OpenLayers.Control.PanZoomBar

PanZoomBar controlはPanZoomと同様なcontrolですが、mapの左側に上下のslide barとして追加されます。

PanZoomBar properties

Name Type Description Default Value
zoomWorldIcon {Boolean} Specifies whether the zoom to max extent world icon should be displayed. If set to false, the icon will be hidden. true
div {HTML Element} If specified, the HTML Element to place this control in.

OpenLayers.Control.Scale

Scale controlは、map上のscaleを(Scale = 1.443Mのように)、mapの右下に追加します。

Scale properties

Name Type Description Default Value
geodesic {Boolean} Determines if geodesic measurement should be used. This value should be changed to true if your map's projection is EPSG:900913. When set to true, the scale is calculated from the horizontal size of the pixel to the center of the map. false

OpenLayers.Control.ScaleLine

ScaleLine controlは、mapの左下にkmとmiで拡大縮小時にscaleを表示します。また、HTML Elementを持ちます。

ScaleLine properties

Name Type Description Default Value
maxWidth {Integer} Controls the maximum width of the scale line, in pixels. 100
topOutUnits {String} Specifies the units to zoom on the top bar of the scale line when the map is zoomed out. km (kilometers)
topInUnits {String} Specifies the units to zoom on the top bar of the scale line when the map is zoomed in. m (meters)
bottomOutUnits {String} Specifies the units to zoom on the bottom bar of the scale line when the map is zoomed out. mi (miles)
bottomInUnits {String} Specifies the units to zoom on the bottom bar of the scale line when the map is zoomed in. ft (feet)
geodesic {Boolean} Determines if geodesic measurement should be used. This value should be changed to true if your map's projection is EPSG:900913. false
div {HTML Element} If specified, the HTML Element to place this control in.

OpenLayers.Control.ZoomPanel

ZoomPanel controlは、mapの左上にzoom panelを追加します。これは、ZoomIn,ZoomOutZoomToMaxExtent controlを含みます。そして、PanZoom conrtolの一部としてmap上に追加されます。

今回のまとめ

OpenLayersによるControl Subclassの基本について学びました。非常にたくさんあるので、すべてのcontrolを網羅できませんが、詳細は、OpenLayers.Control を参考にしてください。
次回は、引き続きOpenLayers Control Panelについて学んでいきます。

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

OpenLayers Tutorialの目次に戻る。

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 

WP-SpamFree by Pole Position Marketing

Social Widgets powered by AB-WebLog.com.