JA:Openlayers POI layer example

From OpenStreetMap Wiki
Jump to: navigation, search
利用できる言語 — Openlayers POI layer 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 · беларуская · български · қазақша · македонски · монгол · русский · тоҷикӣ · українська · Ελληνικά · Հայերեն · ქართული · नेपाली · मराठी · हिन्दी · भोजपुरी · অসমীয়া · বাংলা · ਪੰਜਾਬੀ · ગુજરાતી · ଓଡ଼ିଆ · தமிழ் · తెలుగు · ಕನ್ನಡ · മലയാളം · සිංහල · བོད་ཡིག · ไทย · မြန်မာဘာသာ · ລາວ · ភាសាខ្មែរ · ⵜⴰⵎⴰⵣⵉⵖⵜ ⵜⴰⵏⴰⵡⴰⵢⵜ‎ · አማርኛ · 한국어 · 日本語 · 中文(简体)‎ · 中文(繁體)‎ · 吴语 · 粵語 · ייִדיש · עברית · اردو · العربية · پښتو · سنڌي · فارسی · ދިވެހިބަސް
その他の言語このウィキの翻訳を支援してください
Screenshot of the result

目的

ここでの目的は、OSM スリッピーマップの上に POI のマーカーを表示することです。 この例では、これを行うためのとても簡単な方法を示します。

Example


ファイル

index.html

以下を新しい HTML ファイルとしてコピーして、index.html という名前にします。

<html><body>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
       
    var pois = new OpenLayers.Layer.Text( "My Points",
                    { location:"./textfile.txt",
                      projection: map.displayProjection
                    });
    map.addLayer(pois);
 
    //Set start centrepoint and zoom    
    var lonLat = new OpenLayers.LonLat( 9.5788, 48.9773 )
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
    var zoom=11;
    map.setCenter (lonLat, zoom);  
    
  </script>
</body></html>

textfile.txt

次に、textfile.txt という名前のファイルを作ります。 これはタブ区切りのテキストファイルで、それぞれの列は最初の行で定義されます。 このファイルの例は以下のようなものです:

lat	lon	title	description	icon	iconSize	iconOffset
48.9459301	9.6075669	Title One	Description one<br>Second line.<br><br>(click again to close)	Ol_icon_blue_example.png	24,24	0,-24
48.9899851	9.5382032	Title Two	Description two.	Ol_icon_red_example.png	16,16	-8,-8

注意: 最後の行の最後の文字の後に改行を入れるのを忘れないようにしてください。 さもなければ最後の行の POI は表示されません。

さらなる詳細については OpenLayers documentation on Layer.Text も参照してください。

アイコンファイル

それから、この例に必要な二つのアイコンファイルをダウンロードします:

  • Ol_icon_blue_example.png Blue icon
  • Ol_icon_red_example.png Red icon

結果

四つ全てのファイルはあなたのウェブサーバーの同じフォルダに置く必要があります。

Now you can open a browser window with the URL of your new index.html file. You will see OSM maps, served from the main server. If you click on the layers switcher symbol ("+" in the top right corner of the map), you will see an overlay layer called "My Points". This layer shows the markers defined by the file textfile.txt. The blue and the red marker on the map are the visible result.

重要

この例をあなたのウェブサイトで公開するなら、あなたは全ての ライセンス 要求に責任があります!

関連項目