地図データファイル KMLの開発者体験を向上するホットリロード

5249 ワード
npm KML GoogleEarth KML テキストリンク

概要

GoogleEarth上で表示するプレースマークや線、視点などを記述するテキストファイル KMLを作成するときにちょっと便利な方法です。
Web版のGoogleEarth上で、作成しているKMLファイルの表示を確認をするときに、修正のたびに新しいプロジェクトとしてファイルをインポートするのは少し面倒じゃないですか？

そこで KMLファイルを変更したら自動でファイルをリロード する方法を考えました。

GIF動画では、<LookAt>要素を変更して、カメラの視点を変えています。
<LookAt>要素の内容は、そのアイテムをクリックするとレンダリングされるため、クリック後に視点が変わります。
<Point>要素の位置などは常時レンダリング処理されているため、KMLファイル保存後すぐに反映されます。

方法

Web版のGoogleEarthはローカルファイルを自動では読み込めません(セキュリティ保護のため)。ですが、サーバーと通信してアイテムを読み込む機能があるため、作成中のKMLファイルをローカルサーバーからサーブすることでホットリロードを実現しています。紹介する方法では、簡易サーバーを立てるのにnpmのライブラリをつかっています。

ローカルサーバーの準備

ローカルサーバーを準備しますが、https通信じゃないとGoogleEarth内部で通信エラーがおきます。そのため、npmのライブラリ live-server-httpsを使います。このライブラリは簡易サーバーを立てるlive-server用に、自作のssl証明書を用意してくれています。
まず、サーバー用にフォルダを用意し、必要なライブラリをインストールします。

mkdir kml-server
cd kml-server
npm install live-server live-server-https

package.jsonのscriptsを以下のようにしておきます。LOCAL_IPとPORTは各自で調べて記入します。

  "scripts": {
    "start": "live-server --https=./node_modules/live-server-https --cors --host=YOUR_LOCAL_IP --port=PORT"
  },

その後、

npm run start

とコマンドを打つと、ローカルサーバーが立ち上がります。

GoogleEarthにインポートするファイルの準備

GoogleEarthのプロジェクトにインポートするファイルは、ローカルサーバーとの通信用ファイルです。以下のようなファイルを準備します。<href>要素で作成中のKMLファイルを指定しますが、ローカルサーバー起点のパスを記述します。また<refreshInterval>要素でリロード間隔を指定します。

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <NetworkLink>
    <name>Server</name>
    <open>1</open>
    <Link>
      <href>https://LOCAL_IP_ADDRESS:PORT/EDITED_FILE.kml</href>
      <refreshMode>onInterval</refreshMode>
      <refreshInterval>1</refreshInterval>
    </Link>
  </NetworkLink>
</kml>

作成するKMLファイルの準備

作成するKMLファイルは、通信用のKMLファイルに記述したパスと、ローカルサーバー上のパスが一致しなければいけません。今回はプロジェクトディレクトリ直下でサーバーを立ち上げ、またそこに作成するKMLファイルを置きます。

touch EDITED_FILE.kml

このファイルのkml要素の子要素として、Folder要素を置きました。このFolder内部に地図表示用の記述を追加していきます。

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Folder>
  </Folder>
</kml>

ここでKMLファイル編集の際、2つ注意点があります。

  • 不正なKMLを記述したまま保存しない
  • kml要素の子として2つ以上要素を置かない

この2点を守らないと、ホットリロードが停止し、以降変更が適用されなくなります。その際は、KMLファイルを修正し、再度通信用のKMLファイルをインポートするか、GoogleEarthを再読み込みすることでホットリロード機能が復活します。

編集を始める

以上の準備を行い、以下の手順で行います。

  1. ローカルサーバーを立ち上げる
  2. GoogleEarthのプロジェクトに、通信用のKMLファイルをインポートする
  3. 作成中のKMLファイルを編集する

最初にローカルサーバーとhttps通信をする際、この通信の証明書は信頼されている機関発行のものではないとの警告がでると思います。そのときは、安全でない方法で続行するか、例外を追加する必要があります。どちらもプロンプトの詳細オプションの下にありますので、探して続行してください。
これでKMLファイルを編集して保存すると、変更内容が適用されているはずです。

最後に

少しでも便利だと感じてくれる人がいると嬉しいです。