Leaflet getBounds() trả lại kinh độ lớn hơn 180

Question

Tôi đã đề xuất một vấn đề và tác giả đã đóng nó trên Github, nhưng tôi vẫn không có kết luận. Longitudes nằm trong khoảng từ -180 đến 180. Nhưng đôi khi, Leaflet trả về các kinh độ như 474.2578215 từ getBounds(), mà sau đó tất nhiên không có gì được trả về trong cơ sở dữ liệu của tôi.

Tôi được thông báo: Đó là hành vi dự định. Điều đó xảy ra khi bạn phóng to quá xa và/hoặc kéo bản đồ đến một bản sao khác của thế giới và các khoảng thời gian getBounds không được bao bọc theo mặc định. Bạn có thể sử dụng phương thức bọc LatLng để có được những gì bạn muốn - ví dụ: bounds.getSouthWest(). wrap().

Ok. Vì vậy, tôi đã thêm phương thức bọc trong đó và dữ liệu chính xác được trả lại, nhưng hiện tại không có điểm đánh dấu nào sẽ hiển thị trên bản đồ. Điều này có thể là do các vị trí đánh dấu không nằm trong phạm vi số cao đó (tờ rơi nào là tọa độ của các ranh giới ...)

Tôi không chắc rằng việc thu phóng hoặc kéo là nguyên nhân của vấn đề. Sự cố vẫn tiếp diễn khi làm mới trang, nơi người dùng không phóng to hoặc kéo các sự kiện đã xảy ra. Tôi có zoom giới hạn trong init với: minZoom: 6, maxZoom: 13.

Tôi cũng cần lưu ý rằng mã này (không thay đổi) được sử dụng để hoạt động tốt. Đây là mã của tôi:

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

Hàm wrap() đưa ra tọa độ chính xác và DB trả về các ô chính xác. Nhưng vì lý do nào đó, chúng không hiển thị. Dưới đây là những âm mưu trả lại (phần 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,…} 

Không có lỗi trong giao diện điều khiển, và như tôi đã nói, đôi khi nó tất cả các công trình (khi getBounds không trả lại một LON lớn điên). Vì vậy, những gì trong heck tôi làm sai, và quan trọng hơn, làm thế nào để giải quyết nó?

Answer 1

Điều này là do worldCopyJump được đặt thành false theo mặc định. Đặt nó thành true và các điểm đánh dấu sẽ hiển thị chính xác, vì thế giới sẽ không trùng lặp.

Answer 2

Tôi chưa bao giờ gặp phải những giới hạn không chính xác đó, nhưng sẽ không giới hạn theo chương trình chúng phục vụ như ít nhất là giải pháp tạm thời?

Đối với các điểm đánh dấu không hiển thị - điều đó có xảy ra khi bạn di chuyển bản đồ không? Nếu vậy, nó có khả năng gây ra bởi sự kiện 'di chuyển' chồng lên nhau. Tôi không biết có bao nhiêu điểm trung bình nhưng nếu tải xuống dữ liệu không hoàn thành và thêm điểm đánh dấu, cuộc gọi tiếp theo 'di chuyển' sẽ xóa tất cả các điểm đánh dấu hiện có và bắt đầu thay thế chúng (cũng sẽ ghi đè lên 'cốt truyện' sau này). Bạn có thể thử thêm chúng vào danh sách chung sau khi tất cả các thao tác được hoàn tất và các dấu được vẽ hoặc bạn chỉ có thể di chuyển các điểm đánh dấu không có trong tập mới.

Trên sidenote - tại sao không sử dụng geojson để tạo các lớp đó? Với 'pointToLayer' và 'onEachFeature', bạn có thể tùy chỉnh đánh dấu/quảng cáo và có một lớp ở cuối, thay vì danh sách dài các dấu mốc.

Answer 3

Tôi đã nhìn thấy một điều tương tự, ngoại trừ tôi đã xử lý sự kiện nhấp bản đồ qua gọi lại là event.latlng.lng. Thêm worldCopyJump: true đã không sửa chữa vấn đề này đối với tôi - tôi vẫn nhìn thấy kinh độ giá trị lớn hơn 180.

Cuối cùng, tôi gọi là phương pháp wrap() đến đối tượng latlng:

event.latlng.wrap().lng 

mà cố định vấn đề.