応用
ハウツー 大量の点をクラスタリングするには
数百〜数千の点を地図に載せると、点が重なって見づらくなります。クラスタリングを有効にすると、近い点を自動でまとめて件数ラベルを表示し、拡大すると個別の点に分かれます。
コード
マーカーの配列を MarkerClusterer に渡すと、近い点を自動でまとめてくれます。
import "maplibre-gl/dist/maplibre-gl.css";
import "@geolonia/maps-core/css";
import { geolonia } from "@geolonia/maps-suite";
const map = new geolonia.maps.Map(document.getElementById("map"), {
apiKey: "YOUR-API-KEY",
center: { lat: 35.67, lng: 139.74 },
zoom: 10,
});
const res = await fetch("/data/dense-points.geojson");
const gj = await res.json();
const markers = gj.features.map(
(f) =>
new geolonia.maps.Marker({
position: { lng: f.geometry.coordinates[0], lat: f.geometry.coordinates[1] },
}),
);
new geolonia.maps.MarkerClusterer({ map, markers });Markerはmapを渡さずに作ります（取り外した状態）。地図への取り付けはMarkerClustererが管理します。MarkerClusterer({ map, markers })：近いマーカーを件数付きのクラスターにまとめ、ズームすると分かれます。- GeoJSON の
coordinatesは[経度, 緯度]の順なので、positionに詰め替えるときの順序に注意してください。
結果
上のコードは、それぞれのタブの下でそのまま動いています。300点のデータがクラスタリングされて表示され、拡大するとクラスターが分かれて個別の点になります。
うまくいかないとき
- クラスターにならず全部バラバラ →
data-cluster="on"が書かれているか確認。値は"on"です（"true"ではありません）。 - 何も出ない →
data-geojsonのパスが正しいか確認。GeoJSON ファイルがサーバー上に存在し、アクセスできる必要があります。