リーフレットを使用しています。誰かが、ユーザーがクリックするすべてのレイヤーからすべての機能を返す関数を提案していますか?リーフレットでクリックしたすべてのレイヤのすべての機能を取得
たとえば、ポイントレイヤーとポリゴンレイヤーがあります。ユーザーがポイントをクリックすると、ポイントとそのポイントの下のポリゴンの属性を表示したいと思います。ユーザーがポリゴンだけをクリックすると、ポリゴンの属性のみが表示されます。
ご協力いただきありがとうございます。
リーフレットを使用しています。誰かが、ユーザーがクリックするすべてのレイヤーからすべての機能を返す関数を提案していますか?リーフレットでクリックしたすべてのレイヤのすべての機能を取得
たとえば、ポイントレイヤーとポリゴンレイヤーがあります。ユーザーがポイントをクリックすると、ポイントとそのポイントの下のポリゴンの属性を表示したいと思います。ユーザーがポリゴンだけをクリックすると、ポリゴンの属性のみが表示されます。
ご協力いただきありがとうございます。
click
ハンドラmap._layers
L.latLngBounds
)_layers
プロパティを持っています。各フィーチャごとに1つのレイヤー(注:あなたが別の配列に、独自の機能を追跡する場合、それはより簡単に、より信頼性のあるあなたがこれを行う場合は、手順3と4を省略できます。)
// Create the map
var map = L.map('map').setView([39.5, -0.5], 5);
// Set up the OSM layer
var baseLayer1 = L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
name: "Base layer 1"
}).addTo(map);
function clickHandler(e) {
var clickBounds = L.latLngBounds(e.latlng, e.latlng);
var intersectingFeatures = [];
for (var l in map._layers) {
var overlay = map._layers[l];
if (overlay._layers) {
for (var f in overlay._layers) {
var feature = overlay._layers[f];
var bounds;
if (feature.getBounds) bounds = feature.getBounds();
else if (feature._latlng) {
bounds = L.latLngBounds(feature._latlng, feature._latlng);
}
if (bounds && clickBounds.intersects(bounds)) {
intersectingFeatures.push(feature);
}
}
}
}
// if at least one feature found, show it
if (intersectingFeatures.length) {
var html = "Found features: " + intersectingFeatures.length + "<br/>" + intersectingFeatures.map(function(o) {
return o.properties.type
}).join('<br/>');
map.openPopup(html, e.latlng, {
offset: L.point(0, -24)
});
}
}
map.on("click", clickHandler);
// add some markers
function createMarker(lat, lng) {
var marker = L.marker([lat, lng]);
marker.on("click", clickHandler);
marker.properties = {
type: "point"
}; // add some dummy properties; usually would be geojson
return marker;
}
var markers = [createMarker(36.9, -2.45), createMarker(36.9, -2.659), createMarker(36.83711, -2.464459)];
// create group to hold markers, it will be added as an overlay
var overlay = L.featureGroup(markers).addTo(map);
// show features
map.fitBounds(overlay.getBounds(), {
maxZoom: 11
});
// create another layer for shapes or whatever
var circle = L.circle([36.9, -2.45], 2250, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
});
circle.on('click', clickHandler);
circle.properties = {
type: "circle"
};
var overlay2 = L.featureGroup([circle]).addTo(map);
#map {
height: 400px;
}
<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
<link href="https://npmcdn.com/[email protected]/dist/leaflet.css" rel="stylesheet" />
<div id="map"></div>
あなたは、あなたが知りたい場合にはJSフィドル、バイオリン:http://jsfiddle.net/xn8opdjq/
btw、マーカクラスタプラグインなどを使用していないときに、フィーチャ間のあいまいさを解消するための非常に便利なトリックです(1つではなく複数のマッチがある場合) – nothingisnecessary
ニース。これは機能します。 –
OK、解決策は完璧ではありません。 JSfiddleシナリオは機能しますが、ポリゴン(cirlce)はかなり小さいです。この手順は「ポリゴンのクリック」を測定するのではなく、「ポリゴンの四角形の枠内をクリック」を測定します。おそらくポリゴン機能のポイントで動作します。 –
@nothingisnecessary応答に加えて、pip(POを参照してくださいint in polygon)
フィーチャレイヤーをループするトリックを試してみましたか? – nothingisnecessary