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 · Basa Sunda · Baso Minangkabau · bosanski · brezhoneg · català · čeština · corsu · 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 bokmål · norsk nynorsk · occitan · Oromoo · oʻzbekcha/ўзбекча · Plattdüütsch · polski · português · română · shqip · slovenčina · slovenščina · Soomaaliga · suomi · svenska · Tagalog · 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>