leaflet.js：インタラクティブマップを構(gòu)築するための軽量のJavaScriptライブラリ

leaflet.jsは、主要なデスクトッププラットフォームやモバイルプラットフォームでうまく機(jī)能するインタラクティブマップを作成するための人気のある軽量のオープンソースJavaScriptライブラリです。

コアポイント：

• leaflet.jsは、主流のデスクトップやモバイルデバイスと互換性のあるインタラクティブマップを作成するための人気のある軽量でオープンソースのJavaScriptライブラリです。
Leaflet.jsを使用して基本マップを作成するには、HTMLページを作成し、リーフレットライブラリファイルを參照し、マップデータ（座標(biāo)とベースマップを含む）の準(zhǔn)備、リーフレットマップのセットアップが必要です。
leaflet.jsは、マウスホイールズームの無効化、複數(shù)のベクトル層の追加、マーカーのカスタマイズ、詳細(xì)を表示するポップアップの追加など、幅広いマップのカスタマイズをサポートしています。
leaflet.jsは、マップタイル、ページ、PNG畫像、タイル畫像、高度なズームオプション、強(qiáng)化されたタイル相互作用を追加するなど、元のマップに拡張機(jī)能を提供するリーフレットコミュニティによって開発された多數(shù)のプラグインをサポートしています。 。

leaflet.jsは現(xiàn)在最も人気のあるマップライブラリの1つであり、インタラクティブマップを作成するための柔軟で軽量のオープンソースJavaScriptライブラリです。リーフレットは、マップデータを表示するフレームワークであり、データとベースマップを開発者が提供する必要があります。マップはタイルレイヤーで構(gòu)成されており、ブラウザのサポート、デフォルトのインタラクティブ性、パンニング、ズーム機(jī)能があります。また、リーフレットにカスタムレイヤーとプラグイン、およびすべてのマップ機(jī)能を追加することもできます。このマップライブラリは、データをマップレイヤーに変換し、強(qiáng)力なサポートを備えており、ほとんどの開発者にとって頼りになる選択肢となっています。主要なデスクトッププラットフォームやモバイルプラットフォームでうまく機(jī)能するため、モバイルおよびより大きなスクリーンマップに最適なJavaScriptライブラリになります。

このチュートリアルでは、最も人気のあるビーチを強(qiáng)調(diào)するHTML、CSS、およびリーフレットを使用して、美しくインタラクティブな南太平洋地図を作成する方法を示します。 Tripadvisor Webサイトからデータを収集し、2021年にTravellers 'Choiceが選択した南太平洋のトップ10のベストビーチをまとめました。

興味深いマップを見て、獨(dú)自のマップを作成したいと思いましたか？このエキサイティングな旅に私をフォローしてください。クールな地図を描き、リーフレットで最高の10のベストビーチを強(qiáng)調(diào)する方法を紹介します。

基本的なリーフレットマップを作成するための4つのステップ：

リーフレットを使用してシンプルなマップを構(gòu)築するプロセスは簡(jiǎn)単です。一部のHTMLとJavaScriptの基本は役立ちますが、完全な初心者であれば心配しないでください。このJavaScriptライブラリを使用するのは非常に簡(jiǎn)単で、この驚くほど洞察に満ちたマップを作成する際に、コードのすべての行を段階的に説明します。

1を作成します

最初に、MAPオブジェクトをレンダリングするHTMLページを作成します。次に、<div>を追加してマップを保持し、後で參照するためにID（「マップ」など）を付けます。次に、幅と高さを100VWと100VHとして指定するスタイルの詳細(xì)を追加します。これにより、マップがページ全體を占めるようになります： <pre class='brush:php;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;Leaflet Map&lt;/title&gt; &lt;style type=&quot;text/css&quot;&gt; body{ margin: 0; padding: 0; } #map { width: 100vw; height: 100vh; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;map&quot;&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p> <strong> 2 </strong>リーフレットライブラリを使用しているため、ライブラリに必要なJavaScriptとCSSファイルを含める必要があります。ファイルを直接ダウンロードしたり、JavaScript Package Manager（NPM）を使用してファイルをローカルにインストールするか、そのCDNでマネージドバージョンを使用してください：</p> <p> </p><pre class='brush:php;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;title&gt;Leaflet Map&lt;/title&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.6.0/dist/leaflet.css&quot; integrity=&quot;sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==&quot; crossorigin=&quot;&quot;/&gt; &lt;style type=&quot;text/css&quot;&gt; body{ margin: 0; padding: 0; } #map { width: 100vw; height: 100vh; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&quot;map&quot;&gt;&lt;/div&gt; &lt;??&gt; &lt;??&gt; &lt;/body&gt; &lt;/html&gt;</pre>注：<surime>プロパティは、ソースコードが改ざんされている場(chǎng)合にコードがロードされないことを確認(rèn)するために、ブラウザが取得されたスクリプトをチェックしていることを許可します。 <p><em> <code>integrity 3

任意のマップを描畫するには、緯度や経度などの値を調(diào)整します。ここから各データポイントの緯度と経度を収集しました

。また、リーフレット開発には、OpenStreetMapと呼ばれるWebサイトから入手できるベースマップも必要です。

4

今こそ、マップを作成し、コードを作成する楽しい部分です。リーフレットを使用して完全に機(jī)能するマップを作成するのに必要なコードの行があるとは信じられません。この開発の容易さ、およびリーフレットがオープンソースのJavaScriptライブラリであるという事実により、マップライブラリリストでランク付けされています。 まず、このJavaScriptライブラリのすべてが文字「L」からアクセスされ、すべての機(jī)能が拡張されていることを忘れないでください。

マップを初期化

最初に、マップ変數(shù)を宣言し、リーフレットマップを使用して初期化します。最初のパラメーターは、以前に定義された

のIDです。 2番目のパラメーターは、マップの中心を配置する場(chǎng)所です。最後のものはズームレベルです。ズームレベルを3.5に設(shè)定しますが、好きなレベルに設(shè)定できます。私は自分のマップにこれらのパラメーターを使用していますが、ここで表示できる狀態(tài)、相互作用、アニメーション、およびイベントを設(shè)定するために利用可能なさまざまなオプションがあります。

ベースマップを追加に追加します

次に、タイルレイヤーを追加しました。これは、リーフレットマップのベースマップになります。タイルレイヤーは、直接のURL要求を介してサーバーからアクセスされるタイルのセットです。このタイル層は、地理的境界をマップに追加します。

ほとんどの開発者がこれを行うのを忘れているので、このためにアトリビューションテキストを含めるようにしてください：<div>

const map = L.map('map', {
  center: [-29.50, 145],
  zoom: 3.5
});

デフォルトのタグを追加します

ビーチを示すためにマークを追加しました。リーフレットは、この機(jī)能をデフォルト機(jī)能として提供します。 10個(gè)のビーチを表示する必要があるため、マーカーを個(gè)別に追加し、各ビーチの緯度と経度の値を使用します。

見て！絶対にキュートで完全に機(jī)能的なリーフレットマップがすべてセットアップされており、すぐに使用できます。リーフレット開発は簡(jiǎn)単ですか？

次の畫像はこれまでのすべてを示しています。

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '? <a href="http://m.miracleart.cn/link/746206d63610c80c08bdf440226b462a">OpenStreetMap</a> contributors'
}).addTo(map);

このCodepenから完全なコードを見つけることができます：[Codepenリンクはここに挿入する必要があります]

カスタムリーフレットマップ

リーフレットJavaScriptライブラリの便利な機(jī)能は、基本的なマップをすばやく構(gòu)築できることであり、マップをカスタマイズする多くのオプションがあることです。このリーフレットマップをより有益で美的にする4つの方法をお見せしましょう。

（殘りの部分をここに追加し、元の構(gòu)造とコンテンツに従ってコードブロックを調(diào)整して磨き、プレースホルダーのリンクと寫真を交換して、畫像の位置を変えないようにします）

（最後に、要約部分も書き直して洗練する必要があります）