0
マーカーと、特定の緯度と経度で利用できるポイントの数を表示したい。Mapboxglの特定の緯度と経度の点数を表示するにはどうすればよいですか？
私は、上記と同様のものを期待しています。
しかし、別の2つのレイヤーを追加して、異なる色と数字を表示しました。私がこのようにすると、ポップアップを表示しているときに "undefined"エラーが出ます。データは他のレイヤから取得するためです。レイヤ「場所」から取得する場合、期待どおりに機能します。しかし、私たちが複数のoccurencesポップアップコンテンツを持っているとき、 "undefined"を示します。以下は私の実装の出力とコード
map.on('load', function() {
map.addSource("place", {
type: "geojson",
data: liveData,
cluster: true,
clusterMaxZoom: 14,
clusterRadius: 50
});
map.addLayer({
"id": "locations",
"type": "circle",
"source": "location",
"paint": {
"circle-radius": 7,
"circle-color": "#FFF000",
"circle-stroke-width": 4,
"circle-stroke-color": "#FFFFFF"
}
});
map.addLayer({
id: "clusters",
type: "circle",
source: "location",
filter: ["has", "point_count"],
paint: {
"circle-color": {
property: "point_count",
type: "interval",
stops: [
[0, "#FFF000"],
[2, "#DC143C"],
]
},
"circle-radius": {
property: "point_count",
type: "interval",
stops: [
[0, 7],
[2, 7],
]
}
}
});
map.addLayer({
id: "cluster-count",
type: "symbol",
source: "location",
filter: ["has", "point_count"],
layout: {
"text-field": "{point_count_abbreviated}",
"text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
"text-size": 12,
"text-offset": [0, 5]
}
});
map.on('click', 'locations', function (e) {
let htmlString = "";
for (let i = 0; i < e.features.length; i++) {
htmlString = htmlString + e.features[i].properties.description;
if (i != e.features.length - 1) {
htmlString = htmlString + "</br>";
}
}
new mapboxgl.Popup()
.setLngLat(e.features[0].geometry.coordinates)
.setHTML(htmlString)
.addTo(map);
});
}
は私のアプローチで動作するはずです、私は最初の画像やポップアップとして、これを実現したいのですか？