osm_0
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン | |||
|
osm_0 [2018/05/21 09:43] 管理者 |
osm_0 [2018/09/09 14:55] (現在) 管理者 [地図を使う] |
||
|---|---|---|---|
| ライン 1: | ライン 1: | ||
| + | {{tag>プログラミング関連 OpenStreetMap_API}} | ||
| + | [[start]]＞[[programming_start]] | ||
| + | ====== OpneStreetMapについて ====== | ||
| + | OpenStreetMap(OSM)[[https://www.openstreetmap.org/|(公式サイト)]]はオープンデータベースライセンス(ODbL1.0)で利用できる地図です。GoogleMap APIのように自分のWebサイトでコントロールできる地図を使う事ができます。また地図の基盤となるデータをダウンロードして使用できるので自分専用の地図サーバーを構築する事もできます（高性能なサーバーとシステム構築するための高度な知識が必要です） | ||
| + | 無料で使えますが地図データの編集はWikipediaと同じようなボランティアで行われているため更新速度・精度・信用などの点が地域によって大きく違います。 | ||
| + | |||
| + | <html> | ||
| + | <div id="mapid" style="width: 500px; height: 300px;"></div> | ||
| + | |||
| + | <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script> | ||
| + | |||
| + | <script> | ||
| + | /* 外部CSSの読み込み用 */ | ||
| + | function cssLoad(cssFile){ | ||
| + | if(document.all){ | ||
| + | document.createStyleSheet(cssFile); | ||
| + | }else{ | ||
| + | var link = document.createElement("link"); | ||
| + | link.rel = "stylesheet"; | ||
| + | link.href = cssFile; | ||
| + | link.type = "text/css" | ||
| + | document.getElementsByTagName('head')[0].appendChild(link); | ||
| + | } | ||
| + | } | ||
| + | cssLoad("https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"); | ||
| + | </script> | ||
| + | |||
| + | <script> | ||
| + | var mymap = L.map('mapid').setView([51.505, -0.09], 13); | ||
| + | |||
| + | L.tileLayer('https://c.tile.openstreetmap.org/{z}/{x}/{y}.png', { | ||
| + | maxZoom: 18, | ||
| + | attribution: 'Map data © <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors, ' | ||
| + | }).addTo(mymap); | ||
| + | |||
| + | </script> | ||
| + | </html> | ||
| + | |||
| + | ---- | ||
| + | |||
| + | ===== PR ===== | ||
| + | <html> | ||
| + | <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> | ||
| + | <!-- respon_0 --> | ||
| + | <ins class="adsbygoogle" | ||
| + | style="display:block" | ||
| + | data-ad-client="ca-pub-9251612436023685" | ||
| + | data-ad-slot="1409739163" | ||
| + | data-ad-format="auto"></ins> | ||
| + | <script> | ||
| + | (adsbygoogle = window.adsbygoogle || []).push({}); | ||
| + | </script> | ||
| + | </html> | ||
| + | |||
| + | |||
| + | ====== 地図を使う ====== | ||
| + | GoogleMap APIのように自分のWebサイトでコントロールできる地図を表示するには、JavaScriptライブラリのOpenLayersかLeafletを使い地図サーバー(タイルサーバー)から地図画像を入手します。 | ||
| + | |||
| + | ===== タイルサーバー ===== | ||
| + | 注意しなければならないのは地図データは無料ですが、公式サイト(タイルサーバー)を利用するにはリクエスト回数などのポリシーに従う必要があります。公式サイトに高い負荷をかける恐れがある場合はサードパーティーのタイルサーバーを探すか、自分自身でタイルサーバーを準備しなければなりません。 | ||
| + | |||
| + | 公式サイトのタイル使用ポリシーは下記アドレスから確認できます。 | ||
| + | https://operations.osmfoundation.org/policies/tiles/ | ||
| + | [[https://wiki.openstreetmap.org/wiki/JA:%E3%82%BF%E3%82%A4%E3%83%AB%E5%88%A9%E7%94%A8%E8%A6%8F%E7%B4%84|和訳]] | ||
| + | |||
| + | ===== OpenLayers ライブラリ ===== | ||
| + | Webサイトに地図を表示するためのJavasScriptで動作するライブラリー、オープンソース(BSDライセンス)で提供されている。同種のLeafletと比べると機能が豊富で色々な状況に対応できるがファイルサイズが大きく(Ver4.6.5の本体だけで530KB)ソースコードの記述が難しい。 | ||
| + | |||
| + | |||
| + | * 公式サイト http://openlayers.org/ | ||
| + | * [[osm_ol1|当サイトでの動作デモ]] | ||
| + | |||
| + | ===== Leaflet ライブラリ ===== | ||
| + | Webサイトに地図を表示するためのJavasScriptで動作するライブラリー、オープンソース(BSDライセンス)で提供されている。同種のOpenLayersと比べると機能面では劣るがファイルサイズが小さく(Ver1.3.1の本体だけで137KB)ソースコードの記述が簡単(OpenLayersとの比較なので最低限のJavaScriptの基礎知識は必要)になっている。 | ||
| + | |||
| + | * 公式サイト http://leafletjs.com/ | ||
| + | * [[osm_lf1|当サイトでの動作デモ]] | ||
| + | |||
| + | ---- | ||
| + | [[start]]＞[[programming_start]] | ||
osm_0.txt · 最終更新: 2018/09/09 14:55 by 管理者
