OpenLayersで描画した図形をJSONで保存する方法~OpenLayersで図形を描画する⑫

JavaScript

今までの記事で、図形を描画する方法についてお伝えしてきました。

地図上に線を引いたり、円を描いたり、マーカーを配置することにより、ある地点を強調することが可能になります。

業務系のアプリケーションにおいて、一度描画した図形はファイルやデータベースに保存して、任意のタイミングで再描画する必要があります。

本記事ではOpenLayersのJSON出力機能を利用して以下の動作を実現します。

  • 描画した図形をファイルに保存する
  • 保存されたJSONを読み込み、地図上に再描画する

なお、OpenLayersのJSON出力機能は「円の座標情報の保存」についてバグがあり、正常に保存できないため、ある工夫を行います。

動作確認

まずは結論から。以下は実際に動作します。

JSON出力

まずは適当に図形を描画します。

「保」ボタンを押します。

JSONファイルが保存されます。

ファイルの中身は以下の通りです。(ブログ用に改行を挿入していますが、実際にはありません。)

JSON読込

一旦画面を再読み込みします。(F5)

「ファイルを選択」を押下します。(chromeの場合)

先ほど保存したJSONファイルを選択します。

結果はこちらです。

最初に描画した図形が再描画されています。

ソースコード

こちらがソースコードです。

解説

今回はOpenLayersに標準搭載されているGeoJSONという機能を使用して、JSONの読み書きを実現しました。

保存

510~556行目で保存ボタンの定義とクリックされた際の動作を定義しています。

540行目の以下のコードで画面上の図形を全て取得します。

542~548行目は図形が円だった場合の特別な処理です。

GeoJSONの機能では円の座標情報が保存されないため、再描画に必要な円の中心(center)と円の半径(radius)をプロパティに保存します。

550行目の以下の処理で、図形の情報をJSONに出力します。

551~552行目はJSON文字列を、ファイルとして保存するための処理です。
ファイル保存のためのライブラリとして、FileSaver.jsを使用しています。

読込

558~615行目でファイル選択ボタンの定義と選択された際の動作を定義しています。

611行目の処理で、選択されたファイルを読み込みます。読込にはJavaScript標準のFileReaderを使用します。

591~610行目はファイルの読込が完了した際の処理です。

593行目の処理でJSONの内容を読み込み、featureの配列を取得します。

読み込んだ図形情報はそのまま、addの処理を行わず、以下の処理を行います。

  • 円の場合、プロパティから中心と半径を取得し、GeometryおよびFeatureの再作成を行う
  • 固定画像の場合、背後に配置する画像を追加する
  • IDを振り直す(全図形)

その後、以下の処理を行い、地図上に描画します。

まとめ

今回はOpenLayersのJSON出力機能を使用して、描画した図形の保存と読込を行いました。

今回はブログ記事のため、ファイルに保存する形式の解説でしたが、出力されたJSON文字列をサーバ処理に引き継ぎ、座標情報をデータベースに保存するといったことも可能になります。

業務システムにおいてOpenLayersの描画機能を使用する場合には必要な知識になりますので、何度も本記事を読み返して身につけてください。

OpenLayersについての別記事もぜひご覧ください!

①図形を描画する(マーカー、線、円、多角形)
②テキストを書き込む(矩形)
③フリーハンドで書き込む
④矢印で強調する
⑤固定画像を配置する
⑥図形を選択する
⑦図形を移動させる
⑧固定画像の移動
⑨図形を変形させる
⑩長方形を変形させる
⑪図形を複数選択する
⑫図形をJSON形式で保存&読込
⑬図形を削除する
⑭線のスタイルを設定する
⑮図形の色を設定する

【入門】地図を表示させる方法
ボタンを配置する方法
ミニマップを表示する方法

    コメント

    タイトルとURLをコピーしました