LeafBounds() ritorno longitudini maggiore di 180

Question

Ho suggerito un problema e l'autore lo ha chiuso su Github, ma sono ancora senza conclusioni. Le lunghezze vanno da -180 a 180. Ma a volte, Leaflet restituisce longitudini come 474.2578215 da getBounds(), che ovviamente non viene restituito nel mio database.

Mi è stato detto: è il comportamento previsto. Ciò accade quando si esegue lo zoom troppo lontano e/o si trascina la mappa in un'altra copia del mondo e le longitudini getBounds non vengono spostate di default. Puoi utilizzare il metodo a capo LatLng per ottenere ciò che desideri, ad es. bounds.getSouthWest(). avvolgere().

Ok. Quindi ho aggiunto il metodo di avvolgimento e sono stati restituiti i dati corretti, ma ora sulla mappa non vengono visualizzati indicatori. Ciò è probabilmente dovuto al fatto che le posizioni dei marcatori non rientrano in quell'intervallo di numeri elevato (il foglietto illustrativo è le coordinate dei limiti ...)

Non sono sicuro che lo zoom o il trascinamento siano la causa del problema. Il problema persiste quando si aggiorna la pagina, in cui l'utente non ha effettuato operazioni di zoom o trascinamento. Ho lo zoom limitato nella init con: minZoom: 6, maxZoom: 13.

Devo anche notare, che questo codice (invariato) usato per funzionare bene. Ecco il mio codice:

$(document).ready(function(){ initmap(); }); 

var map; 
var plotlist; 
var plotlayers=[]; 

function initmap(){ 
    // set up the map 
    map = new L.Map('map'); 

    //get our map 
    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; 
    var osmAttrib='&copy; <a href = "http://www.openstreetmap.org/copyright"> OpenStreetMap </a> contributors'; 
    var osm = new L.TileLayer(osmUrl, {minZoom: 6, maxZoom: 13, 
      attribution: osmAttrib});  

    map.setView(new L.LatLng(<?=$slat;?>, <?=$slng;?>),9); 
    map.attributionControl.setPrefix(''); 
    map.addLayer(osm); 
    getGameMarkers(); 
    map.on('moveend', onMapMove); 
} 

    function onMapMove(e){ 
     getGameMarkers(); 
    } 

function getGameMarkers(){ 
    var center = map.getCenter(); 
    var zoo = map.getZoom(); 
    var bounds = map.getBounds(); 
    console.log(bounds); 

     var min = bounds.getSouthWest().wrap(); 
    var max = bounds.getNorthEast().wrap(); 

    $.ajax({type: "GET", url: "./ajax/markers.php", dataType: "json", data: "clat="+center.lat+"&clng="+center.lng+"&zoom="+zoo+"&minlat="+min.lat+"&minlng="+min.lng+"&maxlat="+max.lat+"&maxlng="+max.lng+cookiestr, 
    success: function(data){ 
     if (data.showmap == 1) { 
      plotlist = data.map_data;  
      removeMarkers(); 
      for (i=0;i<plotlist.length;i++) { 
       var iconic = String(plotlist[i].icon); 
       var plotmark = new L.marker([plotlist[i].lat,plotlist[i].lng], {icon: L.icon({iconUrl: iconic, iconSize: [32, 32]}) }).bindPopup(plotlist[i].html); 
       map.addLayer(plotmark); 
       plotlayers.push(plotmark); 
      } 

      $("#content").html(data.html); 
     }else { 
      $("#map_content").show(); 
      $("#map_content").html(data.main_content); 
      $("#content").html(data.side_content); 
     } 
     } 
     }); 
    } 

Le funzioni di wrap() forniscono le coordinate corrette e il DB restituisce i grafici corretti. Ma per qualche ragione, non vengono visualizzati. Ecco le trame restituiti (la parte map_data):

map_data: [{lat:36.672825, lng:-76.541748, icon:./img/avicon3.png,…},…] 
      0: {lat:36.672825, lng:-76.541748, icon:./img/avicon3.png,…} 
      1: {lat:36.901314, lng:-76.041870, icon:./img/avicon2.png,…} 
      2: {lat:37.101192, lng:-76.264343, icon:./img/avicon3.png,…} 
      3: {lat:37.300274, lng:-75.673828, icon:./img/avicon3.png,…} 
      4: {lat:37.348328, lng:-76.830139, icon:./img/avicon3.png,…} 
      5: {lat:37.2481003, lng:-76.1194000, icon:./img/bicon3.png,…} 
      6: {lat:37.0298691, lng:-76.3452225, icon:./img/ricon.png,…} 
      7: {lat:37.6087608, lng:-77.3733063, icon:./img/ricon.png,…} 
      8: {lat:37.7440300, lng:-77.1316376, icon:./img/ricon.png,…} 
      9: {lat:37.5917015, lng:-77.4207993, icon:./img/bicon2.png,…} 
      10: {lat:37.5206985, lng:-77.3783112, icon:./img/ricon.png,…} 
      11: {lat:37.3306999, lng:-77.3227615, icon:./img/ricon.png,…} 
      12: {lat:37.1228981, lng:-75.9063034, icon:./img/bicon2.png,…} 

Nessun errore in console, e come ho detto, a volte tutte le opere (quando getBounds non restituisce un grande LON pazza). Quindi cosa diamine sto sbagliando e, cosa più importante, come risolverlo?

Answer 1

Ciò è dovuto al fatto che worldCopyJump è impostato su false per impostazione predefinita. Impostandolo su true, i marker verranno visualizzati correttamente, poiché il mondo non si sovrapporrà.

Answer 2

Non ho mai sperimentato quei limiti errati, ma non li avrei programmaticamente limitati come soluzione almeno temporanea?

Come per gli indicatori non visualizzati, si verifica quando si sposta la mappa? Se è così è piuttosto probabile che gli eventi "spostati" si sovrappongano. Non so quanti punti ci siano in media, ma se il download dei dati non finisce e aggiungi marcatori, la prossima chiamata di "moveend" cancellerà tutti i marcatori esistenti e inizierà a sostituirli (inoltre sovrascriverà "plotlist" che può causare errori più tardi). Puoi provare ad aggiungerli alla lista globale dopo che tutte le operazioni sono state completate e gli indicatori sono stati disegnati o puoi spostare solo i marcatori non nel nuovo set.

Su sidenote: perché non utilizzare geojson per creare questi livelli? Con 'pointToLayer' e 'onEachFeature' puoi personalizzare marcatori/popup e avere un livello alla fine, piuttosto che un lungo elenco di marcatori.

Answer 3

Stavo vedendo una cosa simile, tranne che stavo elaborando un evento click sulla mappa tramite un callback come event.latlng.lng. L'aggiunta di worldCopyJump: true fatto non correzione questo problema per me - ero ancora vedendo valori di longitudine maggiore di 180.

Alla fine, ho chiamato il metodo wrap() all'oggetto latlng:

event.latlng.wrap().lng 

che ha fissato il problema.