GIS OpenLayers2

2024-12-042024
92.4% (338.3/366)
December
10.8% (3.3/31)
Week 49
33.5% (2.3/7)
Day 04 Wed
34.8% (8.3/24)

訪問者

total: 16317
today: 1
yesterday: 0
now: 1

↑

更新

MenuBar

整理中

Link
動作環境
最初の一歩
Layer
- Layer の基本的な使い方
- Layer Properties
Control
Google Map
Open Street Map
Vector Layer
Attribution
Marker
Popup

Link †

API Docs, http://dev.openlayers.org/apidocs
Tutorial, http://vasir.net/blog/openlayers
Text book, http://www.packtpub.com/openlayers-2-1-javascript-web-mapping-library-beginners-guide/book
How To Ask Questions The Smart Way, http://www.catb.org/~esr/faqs/smart-questions.html

↑

動作環境 †

http://openlayers.org/ より OpenLayers?-2.13.1.tar.gz をダウンロード
展開してできた資産のうち OpenLayers?.js, img/, theme/ をルートディレクトリにコピーする

↑

最初の一歩 †

[source] [reload]

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset="utf-8"/>
  <title>map01</title>
</head>
<body>
  <div id='map_element' style='width: 480px; height: 320px'></div>
</body>
<script type="text/javascript" src="OpenLayers.js"></script>
<script type="text/javascript">

var map = new OpenLayers.Map('map_element', {});
var wms = new OpenLayers.Layer.WMS(
  'OpenLayers WMS',
  'http://vmap0.tiles.osgeo.org/wms/vmap0',
  {layers: 'basic'}
);
map.addLayer(wms);

if (!map.getCenter()) {
    // GETパラメータに、緯度・経度が設定されていない場合には初期値を設定する
    map.zoomToMaxExtent(new OpenLayers.Bounds([-180,-90,180,90]));
    map.setCenter(new OpenLayers.LonLat(135,35), 5);
}
</script>
</html>

mapserver への要求は下記のようになる

http://vmap0.tiles.osgeo.org/wms/vmap0?LAYERS=basic&SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap
&STYLES=&FORMAT=image%2Fjpeg&SRS=EPSG%3A4326&BBOX=123.75,33.75,135,45&WIDTH=256&HEIGHT=256

cf. GIS Mapserver

↑

Layer †

↑

Layer の基本的な使い方 †

[source] [reload]

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset="utf-8"/>
  <title>map01</title>
</head>
<body>
  <div id='map_element' style='width: 480px; height: 320px'></div>
</body>
<script type="text/javascript" src="OpenLayers.js"></script>
<script type="text/javascript">

var map = new OpenLayers.Map('map_element', {});
var wms_base = new OpenLayers.Layer.WMS(
  'Base Layer',
  'http://vmap0.tiles.osgeo.org/wms/vmap0',
  {layers: 'basic'},
  {isBaseLayer: true}
);
var wms_label = new OpenLayers.Layer.WMS(
  'Localtion Labels',
  'http://vmap0.tiles.osgeo.org/wms/vmap0',
  {layers: 'clabel,ctylabel,statelabel', transparent: true},
  {opacity: 0.5}
);

map.addLayers([wms_base, wms_label]);
map.addControl(new OpenLayers.Control.LayerSwitcher({}));

if (!map.getCenter()) {
    // GETパラメータに、緯度・経度が設定されていない場合には初期値を設定する
    map.zoomToMaxExtent(new OpenLayers.Bounds([-180,-90,180,90]));
    map.setCenter(new OpenLayers.LonLat(135,35), 5);
}
</script>
</html>

layer には、2 種類ある
- base layer
- overlay
base layer は、一番下に表示される layer。
- isBaseLayer? を true に設定する。(isBaseLayer? の初期値は false)
- 複数指定できるが、そのうち必ず一つが表示される (ラジオボタン)
ovverlay は、base layer に重ねて表示される layer
- 複数指定でき、そのうちいくつかを表示できる (チェックボックス)
Layer.WMS
- http://dev.openlayers.org/apidocs/files/OpenLayers/Layer/WMS-js.html
- 第一引数 : レイヤ名
- 第二引数 : mapserver の URL
- 第三引数 : mapserver の GET パラメータ。どのようなパラメータがあるかは、GIS Mapserver#med093b1 でやったように、
```
$ curl "http://app.example.com/cgi-bin/mapserver?map=/opt/maps/map07.map&SERVICE=wms&VERSION=1.1.1&REQUEST=GetCapabilities"
```
  で mapserver のスペックを確認できる。
- 第四引数 : 描画のためのプロパティ設定。インスタンスを作ったあとで、設定/変更することもできる。

↑

Layer Properties †

Layer を作る際のプロパティ(第四引数)で、Layer の設定を行う
[source] [reload]
```
var wms_label = new OpenLayers.Layer.WMS(
  'Localtion Labels',
  'http://vmap0.tiles.osgeo.org/wms/vmap0',
  {layers: 'clabel,ctylabel,statelabel', transparent: true},
  {opacity: 0.5, visibility: false, wrapDateLine: true}
);
```
- 日付変更線をまたいで地図を無限に横スクロールできるようにする
- レイヤを初期状態で無効化する (ユーザはレイヤコントローラで有効化できる)

http://dev.openlayers.org/docs/files/OpenLayers/Layer-js.html

主なプロパティ

プロパティ名	デフォルト値	意味
isBaseLayer?	false	このLayerは、BaseLayer?か?
alpha	false	このLayerに表示する画像の alpha チャンネル(透過度)を考慮するか?
displayInLayerSwitcher?	true	このLayerの表示非表示を LayerSwiter? コントローラで制御するか?
visibility	true	このLayerを表示するか?
attribution	{String}	このLayerの右下に表示するテキスト。著作権表示など
projection	Map's projection	Projection
units	'dd'	'degrees'(='dd'), 'm', 'ft', 'km', 'mi', 'inches'
wrapDateLine?	false	日付変更線をまたいで無限に横スクロールできるようにするか?
opacity	0	このLayerの透明度

プロパティには setter/getter が付いているものもある。setVisibility(boolean) とか。setter は、プロパティの変更を GUI に反映する処理もしているので、実行中に Layer の振る舞いを変えたいときには setter を使う

↑

Control †

↑

Control の基本的な使い方 †

[source] [reload]

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset="utf-8"/>
  <title>map06</title>
</head>
<body>
  <div id='map_element' style='width: 480px; height: 320px'></div>
</body>
<script type="text/javascript" src="OpenLayers.js"></script>
<script type="text/javascript">

var navigation_control = new OpenLayers.Control.Navigation({});
var controls = [
  navigation_control,
  new OpenLayers.Control.LayerSwitcher({}),
//  new OpenLayers.Control.PanZoom({}), // PanPanel + ZoomPanel
//  new OpenLayers.Control.PanZoomBar({}), // PanPanel + ZoomBar
  new OpenLayers.Control.PanPanel(),
  new OpenLayers.Control.ZoomPanel(), 
  new OpenLayers.Control.Permalink({}),
  new OpenLayers.Control.MousePosition({}),
  new OpenLayers.Control.ScaleLine(),
  new OpenLayers.Control.KeyboardDefaults(),
];

var map = new OpenLayers.Map('map_element', {
	controls: controls
});
var wms_base = new OpenLayers.Layer.WMS(
  'Base Layer',
  'http://vmap0.tiles.osgeo.org/wms/vmap0',
  {layers: 'basic'},
  {isBaseLayer: true, wrapDateLine: true}
);
var wms_label = new OpenLayers.Layer.WMS(
  'Localtion Labels',
  'http://vmap0.tiles.osgeo.org/wms/vmap0',
  {layers: 'clabel,ctylabel,statelabel', transparent: true},
  {opacity: 0.5, visibility: true, wrapDateLine: true}
);

map.addLayers([wms_base, wms_label]);
map.addControl(new OpenLayers.Control.Graticule({visible: false}));
map.addControl(new OpenLayers.Control.OverviewMap({mapOptions: {wrapDateLine : true}}));

if (!map.getCenter()) {
    // GETパラメータに、緯度・経度が設定されていない場合には初期値を設定する
    map.zoomToMaxExtent(new OpenLayers.Bounds([-180,-90,180,90]));
    map.setCenter(new OpenLayers.LonLat(135,40), 4);
}
</script>
</html>

http://dev.openlayers.org/apidocs/files/OpenLayers/Control-js.html
map に Control を追加・削除する
- var map = new OpenLayers?.Map('map_element', {controls: controls});
- map.addControl();
- map.addControls();
- map.removeControl();
OpenLayers?.Map のコンストラクタで設定する
- OpenLayers?.Control.Navigation : OpenLayers?の基本操作に関する設定 (map のデフォルト設定を上書きする場合に設定)
- OpenLayers?.Control.KeyboardDefaults? : キーボードでの操作をできるようにする
- OpenLayers?.Control.LayerSwitcher? : LayerSwitcher?
- OpenLayers?.Control.PanPanel? : Pan
- OpenLayers?.Control.ZoomPanel? : Zoom
- OpenLayers?.Control.PanZoom? : PanPanel? + ZoomPanel?
- OpenLayers?.Control.PanZoomBar? : PanPanel? + ZoomBar? (単体で ZoomBar? は使えないっぽい)
- OpenLayers?.Control.Permalink : 画像へのリンク
- OpenLayers?.Control.MousePosition? : マウス位置の表示
- OpenLayers?.Control.ScaleLine? : 距離凡例の表示
OpenLayers?.Map に Layer を設定し終わった後で設定する
- OpenLayers?.Control.Graticule({visible: false}) : 経線、緯線 (表示、非表示は LayerSwitcher? で制御可能。サンプルコードはデフォルト非表示)
- OpenLayers?.Control.OverviewMap?({mapOptions: {wrapDateLine? : true}}) : 周辺地図を表示 (県単位くらいまで拡大しないとうまく動かない。まぁ Overview が必要なのは拡大し過ぎた時なんで良いか)
その他の Control
- OpenLayers?.Control.ArgParser? : URLパラメータ (map06.html?zoom=4&lat=84.63712&lon=-31.81641&layers=BTF) 解析用の Control

↑

Map のデフォルト Controler †

Map には、次の Controler が暗黙的に追加されている

OpenLayers?.Control.Navigation or OpenLayers?.Control.TouchNavigation?
OpenLayers?.Control.Zoom or OpenLayers?.Control.PanZoom?
OpenLayers?.Control.ArgParser?
OpenLayers?.Control.Attribution

↑

Editing Tool Bar †

[source] [reload]

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset="utf-8"/>
  <title>map05</title>
</head>
<body>
  <div id='map_element' style='width: 480px; height: 320px'></div>
</body>
<script type="text/javascript" src="OpenLayers.js"></script>
<script type="text/javascript">

var map = new OpenLayers.Map('map_element', {});
var wms_base = new OpenLayers.Layer.WMS(
  'Base Layer',
  'http://vmap0.tiles.osgeo.org/wms/vmap0',
  {layers: 'basic'},
  {isBaseLayer: true, wrapDateLine: true}
);
var wms_label = new OpenLayers.Layer.WMS(
  'Localtion Labels',
  'http://vmap0.tiles.osgeo.org/wms/vmap0',
  {layers: 'clabel,ctylabel,statelabel', transparent: true},
  {opacity: 0.5, visibility: true, wrapDateLine: true}
);
var vector_layer = new OpenLayers.Layer.Vector('Editable Layer', {displayInLayerSwitcher: false});

map.addLayers([wms_base, wms_label, vector_layer]);
map.addControl(new OpenLayers.Control.LayerSwitcher({}));
map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer));

vector_layer.events.register('featuresadded', vector_layer, function(e){
  console.log(e);
  
  var features = e.features;
  for (fcnt = 0; fcnt < features.length; fcnt++) {
	  var feature = features[fcnt];
	  var geometry = feature.geometry; // OpenLayers.Geometry
	  var vertices = geometry.getVertices(); // OpenLayers.Geometry.Point[]
	  
	  var area = "";
	  for (pcnt = 0; pcnt < vertices.length; pcnt++) {
	    var point = vertices[pcnt];
  	    area += ("(" + point.x + "," + point.y + ")-");
	  }
	  alert(area);
  }

  vector_layer.removeFeatures(features); // remove polygon from the layer
});

if (!map.getCenter()) {
    // GETパラメータに、緯度・経度が設定されていない場合には初期値を設定する
    map.zoomToMaxExtent(new OpenLayers.Bounds([-180,-90,180,90]));
    map.setCenter(new OpenLayers.LonLat(-73,23), 5);
}
</script>
</html>

Vector Layer に、ポリゴンを書き込むことができる
ダブルクリックで確定
確定イベントは、Vector Layer のイベントハンドラでキャッチする
- イベント : http://dev.openlayers.org/apidocs/files/OpenLayers/Layer/Vector-js.html#OpenLayers.Layer.Vector.onFeatureInsert
- 頂点は、Event->Feature->Geometry->Point の順に取り出す
- ポリゴンを消すには layer.removeFeatures(features)

Vector Layer の表示・非表示を LayerSwitcher? で制御しない

var vector_layer = new OpenLayers.Layer.Vector('Editable Layer', {displayInLayerSwitcher: false});

↑

Draw Feature †

[source] [reload]

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset="utf-8"/>
  <title>map07</title>
</head>
<body>
  <div id='map_element' style='width: 480px; height: 320px'></div>
</body>
<script type="text/javascript" src="OpenLayers.js"></script>
<script type="text/javascript">

var map = new OpenLayers.Map('map_element', {});
var wms_base = new OpenLayers.Layer.WMS(
  'Base Layer',
  'http://vmap0.tiles.osgeo.org/wms/vmap0',
  {layers: 'basic'},
  {isBaseLayer: true, wrapDateLine: true}
);
var wms_label = new OpenLayers.Layer.WMS(
  'Localtion Labels',
  'http://vmap0.tiles.osgeo.org/wms/vmap0',
  {layers: 'clabel,ctylabel,statelabel', transparent: true},
  {opacity: 0.5, visibility: true, wrapDateLine: true}
);
var vector_layer = new OpenLayers.Layer.Vector('Editable Layer');

map.addLayers([wms_base, wms_label, vector_layer]);
map.addControl(new OpenLayers.Control.LayerSwitcher({}));

var boxControl = new OpenLayers.Control.DrawFeature(
  vector_layer,
  OpenLayers.Handler.RegularPolygon,
  {
  	  title : 'Polygon',
      displayClass : 'olControlDrawFeaturePolygon',
	  handlerOptions: {
	  	// 第二引数の Handler のオプション
	  	sides : 4, // 四角形
		irregular : true // ひし形にしない。辺は、経線、緯線に並行
	  }
  }
);
var navControl = new OpenLayers.Control.Navigation({});

var controlPanel = new OpenLayers.Control.Panel({
	displayClass: 'olControlEditingToolbar'
});
controlPanel.addControls([
  navControl,
  boxControl
]);
map.addControl(controlPanel);
navControl.activate(); // Navigation のアイコンを選択状態にするために、activate() する

vector_layer.events.register('featuresadded', vector_layer, function(e){
  console.log(e);
  
  var features = e.features;
  for (fcnt = 0; fcnt < features.length; fcnt++) {
	  var feature = features[fcnt];
	  var geometry = feature.geometry;
	  var vertices = geometry.getVertices();
	  
	  var area = "";
	  for (gcnt = 0; gcnt < vertices.length; gcnt++) {
	    var point = vertices[gcnt];
  	    area += ("(" + point.x + "," + point.y + ")-");
	  }
	  alert(area);
  }

  vector_layer.removeFeatures(features);
});

if (!map.getCenter()) {
    // GETパラメータに、緯度・経度が設定されていない場合には初期値を設定する
    map.zoomToMaxExtent(new OpenLayers.Bounds([-180,-90,180,90]));
    map.setCenter(new OpenLayers.LonLat(-73,23), 5);
}
</script>
</html>

Editing Tool Bar は、Draw Feature に標準的な実装を行ったもの。マウス Drag で矩形選択をしたい場合には、自前で Draw Feature に個別処理を実装する必要がある。

Control の構成

map : OpenLayers.Map
  |
  +-- controlPanel : OpenLayers.Control.Panel
        |
        +-- navControl : OpenLayers.Control.Navigation
        |
        +-- boxControl : OpenLayers.Control.DrawFeature
              |
              +-- : OpenLayers.Handler.RegularPolygon

controlPanel : OpenLayers?.Control.Panel
- アイコンをひとまとめに格納するパネル
- Style は、EditingToolbar? と同じにした
navControl : OpenLayers?.Control.Navigation
- 地図のスクロールや拡大縮小を行うモード
- 何も設定しなくても {autoActivate : true} なので、デフォルト状態で有効
- ところが、デフォルト状態のアイコンは未選択状態のもの
- アプリ開始時に、有効化状態のアイコンを表示したい場合には、初期化処理で navControl.activate() を呼ぶ必要あり
boxControl : OpenLayers?.Control.DrawFeature?
- 地図上に何かを描画するための Control
```
var boxControl = new OpenLayers.Control.DrawFeature(
  vector_layer,
  OpenLayers.Handler.RegularPolygon,
  {
      title : 'Polygon',
      displayClass : 'olControlDrawFeaturePolygon',
      handlerOptions: {
        // 第二引数の Handler のオプション
        sides : 4, // 四角形
        irregular : true // ひし形にしない。辺は、経線、緯線に並行
      }
  }
);
```
- 何を描画するかは、第二引数の Handler で決まる。http://dev.openlayers.org/docs/files/OpenLayers/Handler-js.html
- 第三引数には、オプションを設定する
- title : アイコンの title
- displayClass : アイコンの形状
  - "img/editing_tool_bar.png"
  - olControlZoomBox?
  - olControlNavigation?
  - olControlDrawFeaturePoint?
  - olControlDrawFeaturePath?
  - olControlDrawFeaturePolygon?
  - olcontrolZoom
- handlerOptions : Hanlder 個別のプロパティを設定する

↑

Button Control †

[source] [reload]

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset="utf-8"/>
  <title>map08</title>
  <style type="text/css">
.olControlMyToolBar {
    margin: 5px 5px 0 0;
}
.olControlMyToolBar div {
    background-image: url("img/mybutton_tool_bar.png");
    background-repeat: no-repeat;
    margin: 0 0 5px 5px;
    width: 24px;
    height: 22px;
    cursor: pointer
}
/* positions */
.olControlMyToolBar {
    right: 0;
    top: 0;
}
/* layouts */
.olControlMyToolBar div {
    float: right;
}
/* individual controls */
.olControlMyToolBar .olControlCalendarItemInactive {
    background-position: 0px 0px;
}
.olControlMyToolBar .olControlCalendarItemActive  {
    background-position: 0px -24px;
}
.olControlMyToolBar .olControlPingItemInactive {
    background-position: -50px 0px;
}
.olControlMyToolBar .olControlPingItemActive  {
    background-position: -50px -24px;
}
.olControlMyToolBar .olControlRedItemInactive {
	border-radius: 50%; /* Circle、角丸50%の資格 */
    background-position: -200px -0px; /* Image の外側 。Image を使わない */
	background-color: darkred;
}
.olControlMyToolBar .olControlRedItemActive  {
	border-radius: 50%;
    background-position: -200px -0px;
    background-color: red;
}
.olControlMyToolBar .olControlBlueItemInactive {
	border-radius: 50%;
    background-position: -200px -0px;
	background-color: darkblue;
}
.olControlMyToolBar .olControlBlueItemActive  {
	border-radius: 50%;
    background-position: -200px -0px;
	background-color: cyan;
}
.olControlMyToolBar .olControlYellowItemInactive {
	border-radius: 50%;
    background-position: -200px -0px;
	background-color: chocolate;
}
.olControlMyToolBar .olControlYellowItemActive  {
	border-radius: 50%;
    background-position: -200px -0px;
	background-color: yellow;
}
  </style>
</head>
<body>
  <div id='map_element' style='width: 480px; height: 320px'></div>
</body>
<script type="text/javascript" src="OpenLayers.js"></script>
<script type="text/javascript">
var map = new OpenLayers.Map('map_element', {});
var wms_base = new OpenLayers.Layer.WMS(
  'Base Layer',
  'http://vmap0.tiles.osgeo.org/wms/vmap0',
  {layers: 'basic'},
  {isBaseLayer: true, wrapDateLine: true}
);
var wms_label = new OpenLayers.Layer.WMS(
  'Localtion Labels',
  'http://vmap0.tiles.osgeo.org/wms/vmap0',
  {layers: 'clabel,ctylabel,statelabel', transparent: true},
  {opacity: 0.5, visibility: true, wrapDateLine: true}
);

map.addLayers([wms_base, wms_label]);

var calendarControl = new OpenLayers.Control.Button({
	type : OpenLayers.Control.TYPE_BUTTON, // default value
	displayClass : 'olControlCalendar',
	trigger : function() {
	    this.activate();
		alert(new Date());
		this.deactivate();
	}
});

var pingControl = new OpenLayers.Control.Button({
	type : OpenLayers.Control.TYPE_TOGGLE,
	displayClass : 'olControlPing',
	eventListeners : {
		activate : function() {
			alert('Ping mode ON');
		},
		deactivate : function() {
			alert('Ping mode OFF');
		}
	}
});

var redControl = new OpenLayers.Control.Button({
	type : OpenLayers.Control.TYPE_TOOL,
	displayClass : 'olControlRed',
	eventListeners : {
		activate : function() {
			alert('RED ON');
		},
		deactivate : function() {
			alert('RED OFF');
		}
	}
});

var blueControl = new OpenLayers.Control.Button({
	type : OpenLayers.Control.TYPE_TOOL,
	displayClass : 'olControlBlue',
	eventListeners : {
		activate : function() {
			alert('BLUE ON');
		},
		deactivate : function() {
			alert('BLUE OFF');
		}
	}
});

var yellowControl = new OpenLayers.Control.Button({
	type : OpenLayers.Control.TYPE_TOOL,
	displayClass : 'olControlYellow',
	eventListeners : {
		activate : function() {
			alert('YELLOW ON');
		},
		deactivate : function() {
			alert('YELLOW OFF');
		}
	}
});

var controlPanel = new OpenLayers.Control.Panel({
    displayClass: 'olControlMyToolBar'
});
controlPanel.addControls([
  blueControl,
  yellowControl,
  redControl,
  calendarControl,
  pingControl
]);
map.addControl(controlPanel);

if (!map.getCenter()) {
    // map の初期化に成功した場合のみ初期値の設定を行う
    map.zoomToMaxExtent(new OpenLayers.Bounds([-180,-90,180,90]));
    map.setCenter(new OpenLayers.LonLat(-73,23), 5);
}
</script>
</html>

Control の構成

map : OpenLayers.Map
  |
  +-- controlPanel : OpenLayers.Control.Panel
        |
        +-- calendarControl : OpenLayers.Control.Button

Editing Tool Bar 相当のものを自分で作る
- img/mybutton_tool_bar.png
- CSS
  - calendarControl の displayClass : 'olControlCalendar?' に対応する CSS の Class を作る
  - olControlCalendar?ItemInactive?
  - olControlCalendar?ItemActive?
OpenLayers?.Control.Button
- type : OpenLayers?.Control.TYPE_BUTTON
- displayClass
- trigger : ボタンクリック時の処理を記述する
TOGGLE, TOOL
- type : OpenLayers?.Control.TYPE_TOGGLE / OpenLayers?.Control.TYPE_TOOL
- displayClass
- eventListeners
  - activate : 有効化時の処理を記述する
  - deactivate : 無効化時の処理を記述する
TOGGLE と TOOL の違い
- TOGGLE : check box。単独で状態を持つ
- TOOL : radio button。Control Panel の中で、有効なのは一つだけ。他の要素が有効化されたら無効化される。このとき、無効化イベント(deactivate)も起きる
独自のアイコンを Editing Tool Bar に追加したいんだけど → 無理
- CSS の継承の関係上、Editing Tool Bar のアイコンには、　img/editing_tool_bar.png　しか使えない
- 独自のアイコンを Editing Tool Bar の横に並べたいときには、
```
.olControlMyToolBar {
    right: 100px;
    top: 0;
}
```
  とかやって、Editing Tool Bar の左に My Tool Bar を表示すれば良い

↑

Google Map †

[source] [reload]

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset="utf-8"/>
  <title>map04</title>
</head>
<body>
  <div id='map_element' style='width: 480px; height: 320px'></div>
</body>
<script type="text/javascript" src="OpenLayers.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">

var map = new OpenLayers.Map('map_element', {});
var wms_gmap1 = new OpenLayers.Layer.Google(
  'Google Map ROADMAP',
  {type: google.maps.MapTypeId.ROADMAP}
);
var wms_gmap2 = new OpenLayers.Layer.Google(
  'Google Map TERRAIN',
  {type: google.maps.MapTypeId.TERRAIN}
);
var wms_gmap3 = new OpenLayers.Layer.Google(
  'Google Map HYBRID',
  {type: google.maps.MapTypeId.HYBRID}
);
var wms_gmap4 = new OpenLayers.Layer.Google(
  'Google Map SATELLITE',
  {type: google.maps.MapTypeId.SATELLITE}
);
var vector_layer = new OpenLayers.Layer.Vector('Editable Layer', {displayInLayerSwitcher: false});
map.addLayers([wms_gmap1,wms_gmap2,wms_gmap3,wms_gmap4,vector_layer]);
map.addControl(new OpenLayers.Control.LayerSwitcher({}));
map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer)); 

vector_layer.events.register('featuresadded', vector_layer, function(e){
  console.log(e);
   
  var features = e.features;
  for (fcnt = 0; fcnt < features.length; fcnt++) {
      var feature = features[fcnt];
      var geometry = feature.geometry; // OpenLayers.Geometry
      var vertices = geometry.getVertices(); // OpenLayers.Geometry.Point[]
       
      var area = "";
      for (pcnt = 0; pcnt < vertices.length; pcnt++) {
        var point = google2lonlat(vertices[pcnt]);
        area += ("(" + point.lon + "," + point.lat + ")-");
      }
      alert(area);
  }
 
  vector_layer.removeFeatures(features); // remove polygon from the layer
});

if (!map.getCenter()) {
    // map の初期化に成功した場合のみ初期値の設定を行う
    map.setCenter(lonlat2google(135, 35), 5);
}

function lonlat2google(lon,lat) {
  return new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
}

function google2lonlat(point) {
  return new OpenLayers.LonLat(point.x, point.y).transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
}

</script>
</html>

GoogleMap? の projection は EPSG:900913 なので、一般的な EPSG:4326 との変換が必要
EPSG:900913 メートル
EPSG:4326 経度、緯度

↑

Open Street Map †

[source] [reload]

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset="utf-8"/>
  <title>map04</title>
  <style type="text/css">
.olControlAttribution {
    bottom:3px !important;
}  
  </style>
</head>
<body>
  <div id='map_element' style='width: 480px; height: 320px'></div>
</body>
<script type="text/javascript" src="OpenLayers.js"></script>
<script type="text/javascript">

var map = new OpenLayers.Map('map_element', {});
var wms_osm = new OpenLayers.Layer.OSM(
  'Open Street Map'
);

var vector_layer = new OpenLayers.Layer.Vector('Editable Layer', {displayInLayerSwitcher: false});
map.addLayers([wms_osm,vector_layer]);
map.addControl(new OpenLayers.Control.LayerSwitcher({}));
map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer)); 

vector_layer.events.register('featuresadded', vector_layer, function(e){
  console.log(e);
   
  var features = e.features;
  for (fcnt = 0; fcnt < features.length; fcnt++) {
      var feature = features[fcnt];
      var geometry = feature.geometry; // OpenLayers.Geometry
      var vertices = geometry.getVertices(); // OpenLayers.Geometry.Point[]
       
      var area = "";
      for (pcnt = 0; pcnt < vertices.length; pcnt++) {
        var point = google2lonlat(vertices[pcnt]);
        area += ("(" + point.lon + "," + point.lat + ")-");
      }
      alert(area);
  }
 
  vector_layer.removeFeatures(features); // remove polygon from the layer
});

if (!map.getCenter()) {
    // map の初期化に成功した場合のみ初期値の設定を行う
    map.setCenter(lonlat2google(135, 35), 6);
}

function lonlat2google(lon,lat) {
  return new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
}

function google2lonlat(point) {
  return new OpenLayers.LonLat(point.x, point.y).transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));
}

</script>
</html>

OpenLayers?.Layer.OSM の著作権表示の位置が高いので、style.css の定義内容を !important をつけて上書きする

↑

Vector Layer †

↑

Attribution †

↑

Marker †

↑

Popup †

GIS

目次

訪問者

更新

最新の10件

人気の10件

MenuBar

Link †

動作環境 †

最初の一歩 †

Layer †

Layer の基本的な使い方 †

Layer Properties †

Control †

Control の基本的な使い方 †

Map のデフォルト Controler †

Editing Tool Bar †

Draw Feature †

Button Control †

Google Map †

Open Street Map †

Vector Layer †

Attribution †

Marker †

Popup †