LeafletJS：ズーム終了時のポップアップをクリックして、クリックした機能の詳細を表示

現在、機能をクリックするとこのようなポップアップを使用しています。基本的にはズームインしや機能の詳細をポップアップを表示：LeafletJS：ズーム終了時のポップアップをクリックして、クリックした機能の詳細を表示

function ClickPopup(e) {  
     var layer = e.target; 
     name = e.target.feature.properties.name; 
     var main_popup = L.popup() 
     .setLatLng(e.latlng()) 
     .setContent('<span class="big-text">'+name+'</span>') 
     .openOn(map); 
    } 

    function zoomToFeature(e) { 
     map.fitBounds(e.target.getBounds()); 
     ClickPopup(e); 
    } 

    function onEachFeature(feature, layer) { 
     layer.on({ 
      mouseover: highlightFeature, 
      mouseout: resetHighlight, 
      click: zoomToFeature, 
     }); 
    }

ポップアップが（すなわち、ズームの終了前に）あまりにも早く来ているので、ポップアップがsomtimesひどく置かれているので、それは多かれ少なかれ動作します。だから私は「zoomend」イベントを使用してズームの終了時にポップアップを取得したいのですが：

map.on('zoomend',function(e){ console.log("Zoom End"); });

私の問題は、私が取得/取得/層や機能を渡すことができないんだということであるからクリック/彼の詳細を表示するために、このマップイベント（e.target.feature）に。

誰もがこのことをどうやって知っているのですか？ありがとう、 T.

出典

2017-07-03 Tom

リーフレットイベントにコンテキスト/スコープを渡すことができます。ここでは、コンテキストを渡さずにです：

マップのmoveendイベントハンドラに渡し層コンテキストで今すぐ

function onMapMoveEnd() { 
    console.log(this); // this === map 
} 

function onLayerClick() { 
    console.log(this); // this === layer 
    map.once('moveend', onMapMoveEnd); 
    map.fitBounds(this.getBounds()); 
} 

function onEachFeature (feature, layer) { 
    layer.on('click', onLayerClick); 
}

：

function onMapMoveEnd() { 
    console.log(this); // this === layer 
} 

function onLayerClick() { 
    console.log(this); // this === layer 
    map.once('moveend', onMapMoveEnd, this); // passing context 
    map.fitBounds(this.getBounds()); 
}

だから今、それが層を参照しているため、あなただけのmoveendハンドラでthisを使用することができます。ここでは完全な例です：説明と完全な例について

var map = new L.Map('leaflet', { 
 
    center: [0, 0], 
 
    zoom: 0, 
 
    layers: [ 
 
     new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
 
      'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors' 
 
     }) 
 
    ] 
 
}); 
 

 
var feature = { 
 
    type: 'Feature', 
 
    properties: { 
 
     property: 'value' 
 
    }, 
 
    geometry: { 
 
     type: 'Polygon', 
 
     coordinates: [[[-30, 30], [30, 30], [30, -30], [-30, -30]]] 
 
    } 
 
}; 
 

 
function onMapMoveEnd() { 
 
    this.bindPopup(this.feature.properties.property).openPopup(); 
 
} 
 

 
function onLayerClick() { 
 
    map.once('moveend', onMapMoveEnd, this); 
 
    map.fitBounds(this.getBounds()); 
 
} 
 

 
function onEachFeature (feature, layer) { 
 
    layer.on('click', onLayerClick); 
 
} 
 

 
new L.GeoJSON(feature, { 
 
    onEachFeature: onEachFeature 
 
}).addTo(map);

body { 
 
    margin: 0; 
 
} 
 

 
html, body, #leaflet { 
 
    height: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>Leaflet 1.0.3</title> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
    <link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/leaflet.css" /> 
 
    </head> 
 
    <body> 
 
    <div id="leaflet"></div> 
 
    <script type="application/javascript" src="//unpkg.com/[email protected]/dist/leaflet.js"></script> 
 
    </body> 
 
</html>

出典

2017-07-03 13:41:32 iH8

おかげで多くのことを。テストされ、それは素晴らしい動作します。再度、感謝します！ – Tom

ありがとうございます、いつでもようこそ。それが私たちがここにいるのです。あなたは、同じ問題を持つ他の人も受け入れられた答えを見つけることができるように答えを受け入れることができます:) – iH8

LeafletJS：ズーム終了時のポップアップをクリックして、クリックした機能の詳細を表示

答えて

関連する問題