JA:OpenLayers osm file example
Jump to navigation
Jump to search
OpenLayers は .osm ファイル対応を内蔵しています。 要素を自動的にベクターレイヤー表示に変換します。
動作例
例のコードを実行するには:
- 以下のコードを新しい HTML ファイルとしてコピー&ペーストします
- 新しいファイル "myosmfile.osm" を作ります(例えば、データを少しダウンロードするために JOSM を使います)
- そのファイルを HTML ファイルと同じ位置に置きます
- 両方のファイルをウェブサーバーにアップロードします (.osm ファイルを読み込むために、これが必要のようです。)
<html>
<head>
<title></title>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
var lat=51.950;
var lon=7.613;
var zoom=13;
var map;
function init(){
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.Attribution()],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(layerMapnik);
layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
map.addLayer(layerCycleMap);
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
map.setCenter (lonLat, zoom);
//Initialise the vector layer using OpenLayers.Format.OSM
var layer = new OpenLayers.Layer.Vector("Polygon", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "myosmfile.osm", //<-- relative or absolute URL to your .osm file
format: new OpenLayers.Format.OSM()
}),
projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayers([layer]);
}
</script>
</head>
<body onload="init()">
<div id="map" class="smallmap"></div>
</div>
</body>
</html>