整理中


Link

動作環境

最初の一歩

[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>

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 Properties

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>

Map のデフォルト Controler

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

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>

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>

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>

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>

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


添付ファイル: filemap04osm.html 1912件 [詳細] filemap04.html 1928件 [詳細] filemap08.html 1912件 [詳細] filemybutton_tool_bar.png 885件 [詳細] filemap06.html 1984件 [詳細] fileediting_tool_bar.png 325件 [詳細] filemap07.html 1995件 [詳細] filemap05.html 1993件 [詳細] filemap03.html 2030件 [詳細] filemap02.html 2211件 [詳細] fileopenlayers01.png 393件 [詳細] filemap01.html 2264件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2014-08-03 (日) 20:32:52 (855d)
ISBN10
ISBN13
9784061426061