Daily Archives: 05/30/2013

OpenLayersのLayer OptionとPropertyについて[Chapter 5]

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

OpenLayersのLayer Objectについて[Chapter 4] に引き続き、OpenLayersのLayer OptionとPropertyについて学んでみます。
OpenLayers 2.10 Beginner's Guideなる書籍の章立てにあわせて、OpenLayersの使い方を学んでいきます。

本Blog中のsource code等に関しては、あくまでも参考としてください。なにがあっても責任とれませんので。
そこんところ、ヨロシク~~!!

Layer Option

再度、[Chapter 4]のcodeの一部を載せておきます。
ファイル名は、chapter3_ex2_options_config.htmlです。

[javascript]
// Setup our two layer objects
var wms_layer_map = new OpenLayers.Layer.WMS(‘Base layer’,
‘http://vmap0.tiles.osgeo.org/wms/vmap0′, {
layers : ‘basic’
}, {
isBaseLayer : true
});

// Add an overlay layer. We set the transparent property to true
// in the WMS parameters so it doesn’t cover up the base layer
var wms_layer_labels = new OpenLayers.Layer.WMS(‘Location Labels’,
‘http://vmap0.tiles.osgeo.org/wms/vmap0′, {
layers : ‘clabel,ctylabel,statelabel’,
transparent : true
}, {
visibility : false,
opacity : 0.5
});

//Add some more layers, this time we’ll specify more options
var wms_state_lines = new OpenLayers.Layer.WMS(‘State Line Layer’,
‘http://labs.metacarta.com/wms/vmap0′, {
layers : ‘stateboundary’,
transparent : true
}, {
displayInLayerSwitcher : false,
minScale : 13841995.078125
});

var wms_water_depth = new OpenLayers.Layer.WMS(‘Water Depth’,
‘http://labs.metacarta.com/wms/vmap0′, {
layers : ‘depthcontour’,
transparent : true
}, {
opacity : .8
});

var wms_roads = new OpenLayers.Layer.WMS(‘Roads’,
‘http://labs.metacarta.com/wms/vmap0′, {
layers : ‘priroad,secroad,rail’,
transparent : true
}, {
transistionEffect : ‘resize’
});
[/javascript]

ます、line[25]-[28]のoption設定ですが、
{ displayInLayerSwitcher: false, minScale: 13841995.078125}

これは、LayerSwitcherに表示しない。表示する際の最小スケールが13841995.078125であることと意味しています。

次に、line[15]-[18]のoption設定ですが、
{visibility: false, opacity:0.5}

これは、初期表示では、表示しない。透過率は0.5とする事を意味しています。

example codeのtrueをfalseに変更すると、optionの効果を確認することができます。

利用できるlayer properties

Layerの表示状態を設定するpropertyについて学んでおきます。

Data Type

propertyについて学ぶ前に、Data Typeについてまとめておきます。 paramaterは[]で囲まれたものを示します。
Datatypeは:

  • {Array}: []で閉じたカンマで区切られた要素 例えば: [1,2,3]
  • {Boolean}: true か false.
  • {Float}: 10進法で小数点を持つ値 例えば: 42.5
  • {Integer}: 10進法の整数 例えば: 42
  • {Object}: object, キーと値がペアになって、カンマで区切られたもの. 例えば: {'answer': 42, 'question': null}
  • {OpenLayers.__}: OpenLayers classから生成されたobject. 例えば: new OpenLayers.Control. LayerSwitcher({});
  • {String}: 文字列 (single quote, ', か double quote, ”). 例えば: 'This is a string'

上記のData Typeを頭に入れて利用できるlayer propertyを見てみます。

OpenLayers.Layer class properties

非常に多くのlayer propertyがあります。
とりえず、原文のまま載せておきます。 日本語に訳せば良いのでしょうが、それほど難しいものはないので、各自翻訳にtryしてみてください。こちらのOpenLayers.Layerクラスが非常に参考になります。先人に感謝です。

Property Property Data Type Description Default Value
events {OpenLayers.Event} An OpenLayers event object. We can pass in an event object here that will call a function when an event, such as zooming in, occurs. We will talk more about events in a later chapter. -
map {OpenLayers.Map} The map object that this layer belongs to. This is set automatically when the layer is added to the map via the setMap() function.
isBaseLayer {Boolean} Determines if a layer is to act as a base layer. false
alpha {Boolean} Specifies if the layer's images contain an alpha channel. This was originally designed to fix transparency issues in IE, but incurs a large performance hit. It is recommended that you do not use this. false
displayInLayerSwitcher {Boolean} Determines if the layer should be displayed in the layer switcher. true
visibility {Boolean} Determines if the layer is visible on the map and enabled or disabled in the Layer Switcher control. true
attribution {String} Text that is displayed when the Attribution control has been added to the map. By default, the attribution text appears in the bottom right and each layer's attribution is separated by a comma. -
inRange {Boolean} Is either True or False, depending if the current map's resolution is within the layer's minimum and maximum range. This is set when the zoom level changes. -
imageOffset {OpenLayers.Pixel} The displacement of the image tiles for layers with a gutter. -
options {Object} Optional object whose properties will be set on the layer. Any of these layer properties can be defined in this options object. This is the same options object we've spent the past couple of pages discussing. -
eventListeners {Object} Event listeners will be registered if this is set during the layer object's creation. We will discuss this in detail in Chapter 6. -
gutter {Integer} Sometimes you may notice artifacts around the edges of tiles that the map requests. When you set the gutter value, OpenLayers will request tiles that are bigger than the normal tile size by two times the gutter value. So, if your default tile size was 256 x 256, and if you had a gutter value of 10 then OpenLayers would request tiles with a size of 276 x 276. Anything outside the normal tile though (256 x 256 in this case) is not shown, and to OpenLayers the tile size is still 256 x 256. This really only needs to be used when you encounter problems with artifacts near the edge of your tiles. Non-tiled layers always have a gutter value of zero.
projection {OpenLayers.Projection} or {String} This will override the default projection of the map if specified. You may also need to set the maxExtent, maxResolution, and units properties. If you pass in a string instead of a projection object, it will be converted to a projection object. Projections are used to display a three dimensional object (the earth) in two dimensions (on our map). Different projections use different coordinates and measurement units. We will cover projections in more detail in Chapter 4. {EPSG:4326}
units {String} The units the map's layer is in. Possible values are 'degrees' (or 'dd'), 'm', 'ft', 'km', 'mi', or 'inches'. 'degrees' scales {Array} Contains the map scales, from highest to lowest values. The units property must also be set when using this. It is recommended that you use the resolutions property instead. -
resolutions {Array} Contains an array of map resolutions (map units per pixel) from highest to lowest values. If this is not set, it will be calculated automatically based on other properties, such as maxExtent, maxResolution, etc.). -
maxExtent {OpenLayers.Bounds} An OpenLayers.Bounds object consisting of min x, min y, max x, and max y values that specify the extent of the layer. Any coordinates outside this bounding box will not be displayed. If the displayOutsideMaxExtent property is set to false, tiles that fall outside these coordinates will simply not be requested. -
maxResolution {Float} Sets the maximum resolution (the width or height, in map nits, per pixel). Default max is 360 degrees/256 pixels. If you are not using a geographic projection, specify a different value. -
numZoomLevels {Float} Specifies the number of zoom levels a layer has. The layer will not be displayed if the zoom level of the map is greater than this value. 16
minScale {Float} Specifies the minimum scale at which the layer will turn on. -
MaxScale {Float} Specifies the maximum scale at which the layer will be shown. If the map scale is greater than this value, the layer will not be displayed. -
displayOut sideMaxExtent {Boolean} Specifies if the map should request tiles that are completely outside of the layer's maxExtent property. false
wrapDateLine {Boolean} This will cause the map to wrap around the date line. This allows you to continue dragging the map left/right forever, as the map is wrapped around onto itself. -
transitionEffect {String} Specifies the transition effect to use when the map is panned or zoomed. Possible values at the time of writing are null (no effect) and 'resize.' null
SUPPORTED_TRANSITIONS {Array} This is a constant—it does not change. It contains a list of support transition effects to use with the transitionEffect property. -
metadata {Object} Allows you to store additional information about the layer. This does not have an effect on the layer itself. -

詳しくは、OpneLayers.Layerを参照してください。

今回のまとめ

OpenLayersによるLayer OptionPropertyの基本を学びました。
example codeのlayer Propertyの値を変更して、propertyのcheckをして見ることをおすすめします。実際にpropertyがどのように機能しているかがわかります。
次回は、LayerのClassについて学んでいきます。

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

OpenLayers Tutorialの目次に戻る。

1 / 11

Social Widgets powered by AB-WebLog.com.