leaflet.js と geoJSON を使用して大きなポリゴン エリアを作成し、jQuery と leaflet.js を組み合わせて小さな円を配置するアプリケーションがあります。
これは、円が作成される場所です。
$.getJSON('http://localhost/json/json.php', function(data){
$(data.payload.incidents).each(function(key, value) {
var lati = data.payload.incidents[key].incident.locationlatitude;
var longi = data.payload.incidents[key].incident.locationlongitude;
var title = data.payload.incidents[key].incident.incidenttitle;
var desc = data.payload.incidents[key].incident.incidentdescription;
var mark = L.circle([lati, longi], 50,{
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
mark.bindPopup("<b>"+title+"</b></br></br>"+desc).openPopup();
console.log("success");
}
})
});
このコード行を使用して円を検出しようとしました:
if(geojson.getBounds().contains(mark){console.log('mark detected')}
ただし、 .contains() は長方形にのみ使用されるようです。
これは、ポリゴンがマップに追加される場所です。(areaDataはgeoJSON)
var geojson
geojson = L.geoJson(areaData, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);