今回のハンズオンの内容
readmeファイルが含まれており、ファイル構造の説明などが載っています。
動かし方も記載しておきます。
前者の実装に対して、PostgresQLを使っていたり細かい違いはありますが概ね一緒です。
ドラッグアンドドロップで読み込んだCSVを、ユーザが緯度経度を設定して、地図上にプロットできます。
PapaParseでデータ構造を抽出する様にしているほか、文字コード上のエラーが内容に解析するステップを持っています。
少し改造すると、csvに「ジオメトリ」の形式で緯度経度のペアがあっても読み込めると思います。
ポイントデータを配列にオブジェクトを入れ子にしていく形式で、テーブルとしてもパースしやすくしていて、三つの形式へのエクスポートも容易にしています。。
// ポイントデータを単一の配列で管理
let points = [];
// データ構造を一貫性のあるものに
const point = {
id: nextId++,
lng: lng.toFixed(6),
lat: lat.toFixed(6),
name: name
};
blobAPIの様なクライアント側でファイルを作成する様なメモリ管理ができる仕組みを使うと、エクスポートは容易になります。
function downloadFile(content, filename, mimeType) {
const blob = new Blob([content], { type: mimeType });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url); // メモリリークを防ぐ
}
また、実はポイントを打つたびに(状態が変わるごとに)、テーブルを再描画しています。
動かし方