地図上に数万件の位置情報を表示する
◆ 表示範囲を 10x10 に分割して件数を表示
◆ 5 件以下なら直接マーカーを表示
◆ 思ったより見やすい
◆ 5 件以下なら直接マーカーを表示
◆ 思ったより見やすい
2020 年初記事です
あけましておめでとうございます
今年もよろしくお願いします
地図を使うツールでマーカーを表示するのですが マーカーが多くなるとそのまま単純に表示していくとすごく重くなります
数万件を表示したいのですが さすがに同時に全部を表示してかつなめらかに操作できるのはたとえ高スペックの PC でも無理だと思います
そもそも全部表示してもほとんど重なって見えないので無駄ですよね
なので表示範囲を 10x10 のグリッドに分割してそれぞれの範囲のマーカー数を表示することにしてみました
5 件以下なら普通にマーカーを表示します
サンプルとして日本全体で数万件の位置情報があるデータを探した結果 郵便局にしました
コンビニとか良さそうかなって思ったのですが 変化が多すぎてまとめたデータがなさそうです
神社も多い気がすると思うのですがこれも位置情報のまとめがなさそうな気がします
そんな感じで全国あちこちにありそうなものを考えていたら郵便局がデータもあってちょうどよかったので使うことにしました
データは ここでダウンロードできました
xml で扱いづらかったので必要なデータだけ取り出して JSON に変換しました
処理は単純に JSON ファイルのデータをロードして範囲内の数を数えて表示するだけなので省略します
見た目はこんな感じで 特に遅延は感じません
思った以上に見やすくてけっこう良い感じです


DEMO
あけましておめでとうございます
今年もよろしくお願いします
地図を使うツールでマーカーを表示するのですが マーカーが多くなるとそのまま単純に表示していくとすごく重くなります
数万件を表示したいのですが さすがに同時に全部を表示してかつなめらかに操作できるのはたとえ高スペックの PC でも無理だと思います
そもそも全部表示してもほとんど重なって見えないので無駄ですよね
なので表示範囲を 10x10 のグリッドに分割してそれぞれの範囲のマーカー数を表示することにしてみました
5 件以下なら普通にマーカーを表示します
サンプルとして日本全体で数万件の位置情報があるデータを探した結果 郵便局にしました
コンビニとか良さそうかなって思ったのですが 変化が多すぎてまとめたデータがなさそうです
神社も多い気がすると思うのですがこれも位置情報のまとめがなさそうな気がします
そんな感じで全国あちこちにありそうなものを考えていたら郵便局がデータもあってちょうどよかったので使うことにしました
データは ここでダウンロードできました
xml で扱いづらかったので必要なデータだけ取り出して JSON に変換しました
処理は単純に JSON ファイルのデータをロードして範囲内の数を数えて表示するだけなので省略します
見た目はこんな感じで 特に遅延は感じません
思った以上に見やすくてけっこう良い感じです


DEMO