JA:OpenLayers osm file example

From OpenStreetMap Wiki
Jump to: navigation, search
利用できる言語 — OpenLayers osm file example
Afrikaans Alemannisch aragonés asturianu azərbaycanca Bahasa Indonesia Bahasa Melayu Bân-lâm-gú Basa Jawa Baso Minangkabau bosanski brezhoneg català čeština dansk Deutsch eesti English español Esperanto estremeñu euskara français Frysk Gaeilge Gàidhlig galego Hausa hrvatski Igbo interlingua Interlingue isiXhosa isiZulu íslenska italiano Kiswahili Kreyòl ayisyen kréyòl gwadloupéyen kurdî latviešu Lëtzebuergesch lietuvių magyar Malagasy Malti Nederlands Nedersaksies norsk norsk nynorsk occitan Oromoo oʻzbekcha/ўзбекча Plattdüütsch polski português português do Brasil română shqip slovenčina slovenščina Soomaaliga suomi svenska Tiếng Việt Türkçe Vahcuengh vèneto Wolof Yorùbá Zazaki српски / srpski беларуская български қазақша македонски монгол русский тоҷикӣ українська Ελληνικά Հայերեն ქართული नेपाली मराठी हिन्दी অসমীয়া বাংলা ਪੰਜਾਬੀ ગુજરાતી ଓଡ଼ିଆ தமிழ் తెలుగు ಕನ್ನಡ മലയാളം සිංහල ไทย မြန်မာဘာသာ ລາວ ភាសាខ្មែរ ⵜⴰⵎⴰⵣⵉⵖⵜ አማርኛ 한국어 日本語 中文(简体)‎ 吴语 粵語 中文(繁體)‎ ייִדיש עברית اردو العربية پښتو سنڌي فارسی ދިވެހިބަސް
その他の言語このウィキの翻訳を支援してください

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>