リーフレット（ソフトウェア）
JavaScript library for web mapping applications
リーフレット
原作者ヴォロディミル・アガフォンキン
初回リリース2011年5月13日 (2011-05-13)
安定版リリース
1.9.4 [1] / 2023年5月18日; 2年前 (18 May 2023)
リポジトリ
  • github.com/リーフレット/リーフレット
書かれたJavaScript
プラットフォームブラウザのサポートを参照してください
タイプJavaScriptライブラリ
ライセンスBSD-2条項[2]
Webサイトleafletjs.com

Leafletは、Webマッピングアプリケーションの構築に使用されるJavaScript ライブラリです。GISの経験がない開発者でも、公開サーバー上にホストされているタイル化されたWebマップを表示できます。オプションでタイルオーバーレイも使用できます。GeoJSONファイルから地物データを読み込み、スタイルを設定したり、クリックするとポップアップが表示されるマーカーなどのインタラクティブなレイヤーを作成したりできます。

2011年に初めてリリースされ、[3] HTML5とCSS3をサポートし、ほとんどのモバイルおよびデスクトッププラットフォームをサポートしています。ユーザーには、FourSquare、Pinterest、Flickr、USGSなどがあります。

Leafletはオープンソースであり、2013年にMapboxに入社したウクライナの開発者Volodymyr Agafonkinによって開発されました。 [4]

使用

Leaflet を使用した基本的なデモ。

Leafletの典型的な使用法は、Leafletの「マップ」要素をdivなどのHTML要素にバインドすることです。その後、レイヤーとマーカーがマップ要素に追加されます。 

< html > 
< head > 
  < title > Leaflet マップの例</ title > 
  <!-- Leaflet CSS ファイルへのリンク --> 
  < link  rel = "stylesheet"  href = "https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"  /> 
  <!-- Leaflet JavaScript ファイルへのリンク --> 
  < script  src = "https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" ></ script > 
  < style > 
# map { height : 250 px ; width : 400 px ; border : 1 px solid gray ; } </ style > </ head > < body > < div id = "map" ></ div > < script > // マップを初期化しますvar map = L . map ( 'map' ). setView ([ 51.505 , - 0.09 ], 13 );     
       
	   
	     
    
  


   
  
    
         

    // タイル レイヤーを追加します (URL を変更することで、別のマップ スタイルを選択できます) 
L . tileLayer ( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' , { attribution : '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors' }). addTo ( map );     
		 
	

    // 特定の半径と色で円オーバーレイを追加します。var 
circle = L . circle ( [ 51.508 , - 0.11 ], { color : 'red' , radius : 500 // 半径（メートル）}). addTo ( map );         
       
        
    

    // ポップアップでマーカーを追加します
var marker = L . marker ([ 51.5 , - 0.09 ]). addTo ( map ) . bindPopup ( '<b>Hello World!</b><br/> 私はポップアップです。' );        
      

  </スクリプト> 
</本体> 
</ html >

このコード サンプルでは、​​変数 を介して Leaflet ライブラリ自体にアクセスできますL。

特徴

Leafletは、 Web Map Service（WMS）レイヤー、GeoJSONレイヤー、ベクターレイヤー、タイルレイヤーをネイティブにサポートしています。その他多くの種類のレイヤーは、プラグインを介してサポートされます。

他の Web マップ ライブラリと同様に、Leaflet によって実装される基本的な表示モデルは、1 つのベースマップと、0 個以上の半透明オーバーレイで構成され、その上に 0 個以上のベクター オブジェクトが表示されます。

要素

主要なLeafletオブジェクトの種類は次のとおりです。[5]

  • ラスタータイプ（TileLayerとImageOverlay）
  • ベクター型（パス、ポリゴン、円などの特定の型）
  • グループ化されたタイプ（LayerGroup、FeatureGroup、GeoJSON）
  • コントロール（ズーム、レイヤーなど）

投影、変換、 DOMとの対話を管理するためのインターフェースなど、さまざまなユーティリティ クラスもあります。

GIS形式のサポート

Leaflet は複数の GIS 標準形式をコアでサポートしており、その他の形式はプラグインでサポートされています。

標準 サポート
ジオJSON geoJson機能を通じて優れたコアサポート[6]
KML、CSV、WKT、TopoJSON、GPX Leaflet-Omnivoreプラグインでサポートされています[7]
TMS コアサポートTileLayer[8]
倉庫管理システム TileLayer.WMS[9]サブタイプ によるコアサポート
WFS サードパーティ製のプラグインは存在するが、サポートされていない。[10]
GML サポートされていません。[11]

ブラウザのサポート

Leaflet 0.7はChrome、Firefox、Safari 5+、Opera 12+、IE 7～11をサポートしています。[12]

便利な機能の例

Leafletの関数はonEachFeature、例えばGeoJSONデータを扱う際に非常に便利です。この関数には「feature」と「layer」という2つのパラメータがあります。「feature」はGeoJSON内の各オブジェクトにアクセスするためのもので、「layer」はポップアップやツールチップなどを追加するためのものです。

JavaScript の例を以下に示します。 

geoJson = L . geoJSON ( geoJsonData 、{ weight : 2 、onEachFeature : getFeature 、style : getStyle }). addTo ( map )とします。    
     
     
     


const getFeature = ( feature , layer ) => { if ( ! feature . properties . name ) return layer . bindTooltip ( feature . properties . cityName ); layer . bindPopup ( `<ul>             <li>Name: ${ feature . properties . cityName } </li>             <li>Population: ${ feature . properties . population } </li>         </ul>` ) };

getFeature関数に「async」キーワードを追加して、 などの Promise を使用することも可能です。GeoJSON の各オブジェクトのプロパティを利用してカスタマイズされた jsonqueries を作成し、例えば都市固有の情報を取得して、など fetch()を使用して表示することができます。layer.bindTooltiplayer.bindPopup

他のライブラリとの比較

LeafletはOpenLayersと直接比較できます。どちらもオープンソースのクライアントサイド専用のJavaScriptライブラリです。ライブラリ全体のコード行数は約7,000行と、OpenLayersの230,000行（2015年時点）と比べてはるかに小さくなっています。[13] LeafletのコードサイズはOpenLayersよりも小さくなっています（約123KB [14]に対し、423KB [15]）。これはモジュール構造によるところが大きいです。コードベースは新しく、JavaScriptの最新機能に加え、HTML5とCSS3を活用しています。しかし、LeafletにはWeb Feature Service（WFS）[16]やGoogle Web Mercator （EPSG 3857）以外の投影法のネイティブサポートなど、OpenLayersがサポートする機能が欠けています。[17]

これは、独自仕様のクローズドソースであるGoogle Maps API（2005年登場）やBing Maps APIにも匹敵します。どちらも、ジオコーディング、ルーティング、検索、Google Earthなどの機能との統合といったサービスを提供する重要なサーバー側コンポーネントを組み込んでいます。[要出典] Google Maps APIは高速性とシンプルさを提供しますが、柔軟性に欠け、Google Mapsサービスへのアクセスにしか使用できません。ただし、Google APIの新しいDataLayer部分では、外部データソースの表示が可能です。[18]

歴史

Leafletは2010年に「Web Maps API」として誕生しました。これは、当時アガフォンキン氏が勤務していた地図サービスプロバイダーCloudMade向けのJavaScriptライブラリです。2011年5月、CloudMadeはLeafletの最初のリリースを発表しました。これはゼロから構築されたものの、古いAPIコードの一部を使用していました。[19]

  • 0.1: 2011年5月17日
  • 0.2: 2011年6月18日
  • 0.3: 2012年2月14日
  • 0.4: 2012年7月30日
  • 0.5: 2013年1月17日
    • このリリースではRetinaサポートが導入され、多くの使いやすさとユーザーエクスペリエンスが向上しました。[20]
  • 0.6: 2013年6月26日
    • このリリースでは、APIのメソッドとイベントの範囲が拡張され、使いやすさが向上し、GeoJSON保存機能が追加されました。これは、Mapboxの支援を受けた2日間のコードスプリントで完了しました。[21]
  • 0.7: 2013年11月22日
    • このリリースではバグ修正に重点が置かれ、リファクタリングと潜在的な下位互換性の修正が間もなく行われることが発表されました。[22]
  • 1.0: 2016年9月27日
    • このリリースにはv0.7.7と比較して400以上の変更が含まれています。[23]
      • 特にライブラリとベクター レイヤーのあらゆる側面でパフォーマンスが向上しました。
      • フライオーバーアニメーション（曲線でのズームとパン）。
      • 分数ズーム レベルのサポート。
      • ちらつきが少なくなり、タイルの読み込みアルゴリズムが向上しました。
      • カスタム ペイン管理 (複数のベクター レイヤー ペイン、インターリーブ ベクターとタイル レイヤーを含む)。
      • 非標準投影のサポートが強化されました。
      • より多くのアクセシビリティ機能。
      • ドキュメントが改善されました。
      • 安定性の向上。
  • 1.1: 2017年6月27日
    • このリリースでは、ビデオ オーバーレイが追加され、ECMAScript 6 モジュールに移行します。
  • 1.2: 2017年10月25日
  • 1.3: 2018年1月15日
  • 1.3.2: 2018年7月17日
  • 1.3.3: 2018年7月18日
  • 1.3.4: 2018年8月21日
  • 1.4.0: 2018年12月30日
  • 1.5.0 および 1.5.1: 2019 年 5 月 8 日
  • 1.6.0: 2019年11月17日
  • 1.7.1: 2020年9月4日
  • 1.8: 2022年4月18日[24]
  • 1.9: 2022年9月22日[25]

2022年3月、開発者はLeafletのウェブサイトでロシアのウクライナ侵攻に対する行動を促した。 [26]

参考文献

  1. ^ “v1.9.4 最新”. 2023年5月18日. 2023年5月20日閲覧。
  2. ^ 「ライセンス - リーフレット」リーフレット. 2018年11月3日閲覧。
  3. ^ Lovelace, Robin. 「ウェブマップAPIのテスト - Google vs OpenLayers vs Leaflet」。2017年11月3日時点のオリジナルよりアーカイブ。 2018年11月3日閲覧。
  4. ^ MacWright, Tom (2014年8月6日). 「リーフレットクリエイターのVladimir AgafonkinがMapBoxに加入」. 2015年9月12日時点のオリジナルよりアーカイブ。2018年11月3日閲覧。
  5. ^ 「Leaflet APIリファレンス」 。 2018年11月3日閲覧。
  6. ^ 「LeafletでGeoJSONを使用する」 。 2018年11月3日閲覧。
  7. ^ "leaflet-omnivore". 2021年10月5日 – GitHub経由。
  8. ^ "TileLayer.WMS" . 2018年11月3日閲覧。
  9. ^ "TileLayer.WMS" . 2018年11月3日閲覧。
  10. ^ 「WFSサンプル付きリーフレット」2019年7月19日 – GitHub経由。
  11. ^ 「GMLのサポート」GitHub . 2012年6月23日. 2018年11月3日閲覧。
  12. ^ 「Features」 . 2018年11月3日閲覧。
  13. ^ 「OpenHub.netによるOpenLayersとLeafletの比較」OpenHub.net . 2014年8月8日時点のオリジナルよりアーカイブ。2018年11月3日閲覧。
  14. ^ 「Leafletのフロントページ」。Leaflet - モバイルフレンドリーなインタラクティブマップのためのオープンソースJavaScriptライブラリ。 2018年11月3日閲覧。
  15. ^ “OpenLayers 3.4.0 圧縮ソースコード”. OpenLayers.org. 2016年11月29日時点のオリジナルよりアーカイブ。2018年11月3日閲覧。
  16. ^ WFS サポートを提供するさまざまなプラグインが https://leafletjs.com/plugins.html にリストされています。
  17. ^ 「投影」 。 2018年11月3日閲覧。
  18. ^ 「データレイヤー」。Google Maps Platform。Google Inc. 2018年11月3日閲覧。
  19. ^ 「Leaflet：インタラクティブマップのための最新のオープンソースJavaScriptライブラリを発表」CloudMade . 2011年5月13日. 2014年8月11日時点のオリジナルよりアーカイブ。 2018年11月3日閲覧。
  20. ^ Agafonkin, Vladimir (2013年1月17日). 「Leaflet 0.5 リリース」. 2018年11月3日閲覧。
  21. ^ Agafonkin, Vladimir (2013年6月26日). 「Leaflet 0.6リリース、MapBoxを使用したワシントンD.C.でのコードスプリント」 . 2018年11月3日閲覧。
  22. ^ Agafonkin, Vladimir (2013年11月18日). 「Leaflet 0.7リリース、MapBox、そして今後の計画」 . 2018年11月3日閲覧。
  23. ^ Agafonkin, Vladimir (2016年9月27日). 「Meet Leaflet 1.0」 . 2018年11月3日閲覧。
  24. ^ 戦争の最中に公開されたリーフレット1.8
  25. ^ v1.9.0
  26. ^ “Leaflet - インタラクティブマップ用のJavaScriptライブラリ”. 2022年3月21日. 2022年3月21日時点のオリジナルよりアーカイブ。2022年3月22日閲覧。
  • 公式サイト
  • リーフレットチュートリアル
  • Leaflet TileLayer のマップ
  • オープンストリートマップ:リーフレット
  • Leafletで作られた無料のウェブアプリ：embedMap
Retrieved from "https://en.wikipedia.org/w/index.php?title=Leaflet_(software)&oldid=1316784892"