JA:OpenLayers osm file example

From OpenStreetMap Wiki
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>