2016-07-26 15 views
4

リーフレットを使用しています。誰かが、ユーザーがクリックするすべてのレイヤーからすべての機能を返す関数を提案していますか?リーフレットでクリックしたすべてのレイヤのすべての機能を取得

たとえば、ポイントレイヤーとポリゴンレイヤーがあります。ユーザーがポイントをクリックすると、ポイントとそのポイントの下のポリゴンの属性を表示したいと思います。ユーザーがポリゴンだけをクリックすると、ポリゴンの属性のみが表示されます。

ご協力いただきありがとうございます。

+0

フィーチャレイヤーをループするトリックを試してみましたか? – nothingisnecessary

答えて

5
  1. キャプチャポイントはclickハンドラ
  2. に渡されたイベントからクリックmap._layers
  3. の各表示層を介してポイントのバウンディングボックス(L.latLngBounds
  4. ループを作成フィーチャレイヤを探す:層が機能層である場合それは_layersプロパティを持っています。各フィーチャごとに1つのレイヤー
  5. 各フィーチャレイヤの各フィーチャをループし、各フィーチャのバウンディングボックスを取得または作成する
  6. ステップ1で作成したクリック境界ボックスと交差するかどうかをテストし、
  7. クリックしたポイントの背後にあるすべての機能を表示するために、配列の内容をユーザーに表示します。

(注:あなたが別の配列に、独自の機能を追跡する場合、それはより簡単に、より信頼性のあるあなたがこれを行う場合は、手順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/

+0

btw、マーカクラスタプラグインなどを使用していないときに、フィーチャ間のあいまいさを解消するための非常に便利なトリックです(1つではなく複数のマッチがある場合) – nothingisnecessary

+0

ニース。これは機能します。 –

+0

OK、解決策は完璧ではありません。 JSfiddleシナリオは機能しますが、ポリゴン(cirlce)はかなり小さいです。この手順は「ポリゴンのクリック」を測定するのではなく、「ポリゴンの四角形の枠内をクリック」を測定します。おそらくポリゴン機能のポイントで動作します。 –

0

@nothingisnecessary応答に加えて、pip(POを参照してくださいint in polygon)

関連する問題