openlayersの研究活動をコツコツと進めています。今回は、1)図形データを作図・修正する、2)外部データ（GeoJSON形式）としてエクスポートする、3)外部データ（GeoJSON形式）を読み込んで図形を描画する、という3つの機能を組み込むことができたのでご紹介します。

図形データの作図・修正

まず作図機能を実装。

そして、一度描いた点や線を地図上で引っ張ったり伸ばしたりして修正できるようにしました。

参考にしたのはopenlayers公式サンプルのDraw and modify features example。

01_draw

作図したデータをGeoJSON形式でエクスポートする

作図した図形データの図形タイプ（ポイント・ライン・ポリゴン）や頂点座標などをテキストデータとして取得し、取得したテキストデータをGeoJSON形式に成形してダウンロードできるようにしました。

02_geojson

図形の情報をテキストデータとして取り扱う方法は下記サイトを参考にしました。

ただしこのサンプルが対応している図形タイプはライン（線）だけだったので、ポイント（点）とポリゴン（面）の取り扱いについては、いろいろ調べてなんとか対応できました。

テキストデータをローカルファイルに保存（エクスポート）する方法はこちらを参考にしました。

外部データ（GeoJSON）を読み込んで図形を描画する

データをドラッグ＆ドロップで地図に描画させる

ドラッグ＆ドロップでGeoJSONデータを地図に追加します。参考にしたのはopenlayers公式サンプルのDrag-and-Drop example。

ローカルにあるGeoJSONファイルを読み込んで地図上に表示させる

03_import_geojson

まず、javascriptで、ローカルにあるファイルをブラウザ上に読み込む方法はこちらを参考にしました。

読み込んだテキストファイル（GeoJSON）から図形情報を生成させて地図上に表示させる方法はこちらを参考にしました。

いろいろな方がソースを公開して下さっているおかげで、なんとかここまでできました。
ありがたいことです。

（式）