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,
        });  
   }

Это работает более или менее, потому что всплывающее окно появляется слишком быстро (то есть до конца увеличения), поэтому всплывающее окно иногда плохо размещается. Поэтому я бы хотел получить всплывающее окно в конце увеличения с помощью события "zoomend":

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

Моя проблема в том, что я не могу получить / получить / передать слой и объект, выбранный из этого события карты (e.target.feature), чтобы отобразить его данные.

Кто-нибудь знает, как это обойти? Спасибо, Т.

Источник

1 ответ

Решение

Вы можете передать контекст / область действия листовки. Вот с без передачи контекста:

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);
}

Теперь с передачей контекста слоя в обработчик события moveend карты:

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());
}

Так что теперь вы можете просто использовать this в обработчике moveend, потому что он ссылается на слой. Вот полный пример:

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/leaflet@1.0.3/dist/leaflet.css" />
  </head>
  <body>
    <div id="leaflet"></div>
    <script type="application/javascript" src="//unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
  </body>
</html>

Источник
Другие вопросы по тегам