リーフレット入門: インタラクティブなマップをゼロから作成する

序文

このブログへようこそ。インタラクティブなマップの作成に興味があり、一から学びたい場合は、ここが最適な場所です。このブログでは、Leaflet ライブラリと WebStorm の統合を使用してインタラクティブなマップを作成する方法を紹介します。初心者でも経験豊富な開発者でも、心配しないでください。基本から始めて、このエキサイティングな世界へ段階的にガイドします。

リーフレットとは何ですか？

Leaflet は、インタラクティブな地図を作成するための JavaScript ライブラリです。これはオープンソースプロジェクトであり、軽量で使いやすいです。Leaflet を使用すると、Web ページ上に地図を表示したり、マーカーをカスタマイズしたり、ポップアップウィンドウを追加したり、地図のズームやパン機能を実装したりできます。Web サイトにマッピング機能を追加したい場合でも、マッピングアプリケーションを構築したい場合でも、Leaflet はニーズを満たすことができます。

準備

開始する前に、次の準備手順を完了する必要があります。

WebStorm をインストールする: WebStorm は、JavaScript コードをより簡単に作成できる強力な統合開発環境 (IDE) です。
新しい WebStorm プロジェクトを作成する: WebStorm で、新しい空のプロジェクトを作成して、マップアプリケーションのクリーンな開始点を提供します。

HTMLファイルを作成する

次に、Web ページ上に地図を表示するための HTML ファイルを作成しましょう。WebStorm でプロジェクトフォルダーを右クリックし、「新規」→「HTML ファイル」を選択し、「index.html」という名前を付けます。

「index.html」ファイルを開き、次のコードを追加します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Leaflet@cheungxiongwei</title>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
          crossorigin=""/>
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
            crossorigin=""></script>
    <style>
        /* 在这里编写CSS样式表 */
    </style>
</head>
<body>
    <div id="map"></div>
</body>
    <script>
        // 在这里编写JavaScript代码
    </script>
</html>

上記のコードでは、Leaflet ライブラリの CSS ファイルと JavaScript ファイル、および地図を収容するための「map」ID を持つ div 要素を導入しました。

スタイルシートを追加する

次のスタイルシートを追加すると、マップをスクロールバーなしで全画面表示にすることができます。

<style>
    html, body {
    
    
      overflow: hidden;
      background: #fff;
      width: 100%;
      height: 100%;
      margin: 0;
      position: absolute;
      top: 0;
    }
    #map {
    
    
      height: 100%;
      width: 100%;
      margin: 0 auto;
      background-color: #01172a;
    }  
</style>

マップの初期化

テストを容易にするために、Google マップから緯度と経度の座標点を取得します (オフセットなし)。
Google マップマーカー

次に、JavaScript コードを使用してマップを初期化します。「index.html」ファイルに次のコードを追加します。

<script>
    var map = L.map('map').setView([22.5247, 113.8578], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
</script>

上記のコードでは、マップインスタンスを作成し、それを「map」div に追加します。オープンソースのマップサービスである OpenStreetMap をマップレイヤーとして使用します。

タグ付けする

地図にマーカーを追加して、場所をマークしましょう。JavaScript コードに次のコードを追加します。

<script>
    var map = L.map('map').setView([22.5247, 113.8578], 13);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    var marker = L.marker([22.5247, 113.8578]).addTo(map);
</script>

上記のコードでは、マーカーを作成し、マップに追加します。22.5247マークされた位置は、緯度と経度およびの点です113.8578。

ポップアップウィンドウを追加

マーカーにポップアップを追加して、場所に関する情報を表示しましょう。JavaScript コードに次のコードを追加します。

<script>
    var map = L.map('map').setView([22.5247, 113.8578], 13);
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

    var marker = L.marker([22.5247, 113.8578]).addTo(map);
    marker.bindPopup("这是一个标记的弹出窗口。").openPopup();
</script>

地図上のマーカーをクリックすると、ウィンドウがポップアップしてテキストが表示されます。
OSM マップマーカー

マップを実行する

「index.html」ファイルを保存し、WebStorm で開きます。ファイルの上部にある [実行] ボタンをクリックする (またはショートカット Shift+F10 を押す) と、ブラウザーに対話型マップを含むページが表示されます。おめでとうございます。最初のリーフレットマップが正常に作成されました。

完全なコード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Leaflet@cheungxiongwei</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
        crossorigin=""/>
  <!-- Make sure you put this AFTER Leaflet's CSS -->
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
          integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
          crossorigin=""></script>
  <style>
    html, body {
      
      
      overflow: hidden;
      background: #fff;
      width: 100%;
      height: 100%;
      margin: 0;
      position: absolute;
      top: 0;
    }
    #map {
      
      
      height: 100%;
      width: 100%;
      margin: 0 auto;
      background-color: #01172a;
    }
  </style>
</head>
<body>
<div id="map"></div>
</body>
<script>
  let map = L.map('map').setView([22.5247, 113.8578], 13);
  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
      
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);

  let marker = L.marker([22.5247, 113.8578]).addTo(map);
  marker.bindPopup("这是一个标记的弹出窗口。").openPopup();
</script>
</html>

結論

このブログでは、インタラクティブなマップを最初から作成し、WebStorm 統合を通じてマップを表示しました。これは Leaflet の氷山の一角にすぎません。さらに強力な機能があり、探索して使用できるようになっています。このガイドがマップ開発の開始と興味のきっかけになれば幸いです。独自のマッププロジェクトの構築を開始して、このエキサイティングな学習プロセスを楽しんでください。