Leaflet getBounds() 返回大于 180 的经度答案

【问题标题】：Leaflet getBounds() returning longitudes greater than 180Leaflet getBounds() 返回大于 180 的经度
【发布时间】：2013-08-06 11:05:26
【问题描述】：

我提出了一个问题，作者在 Github 上关闭了它，但我仍然没有结论。经度范围从 -180 到 180。但有时，Leaflet 从 getBounds() 返回像 474.2578215 这样的经度，然后我的数据库中当然不会返回任何内容。

有人告诉我：这是预期的行为。当您将地图拉得太远和/或将地图拖到世界的另一个副本时，就会发生这种情况，并且 getBounds 经度默认情况下不会被包裹。你可以使用 LatLng 包装方法来获得你想要的东西——例如bounds.getSouthWest().wrap().

好的。所以我在那里添加了 wrap 方法，并返回了正确的数据，但现在地图上不会显示任何标记。这可能是由于标记位置不在那个高数字范围内（传单认为是边界的坐标......）

我不确定缩放或拖动是导致问题的原因。刷新页面时问题仍然存在，用户没有发生缩放或拖动事件。我在初始化中限制了缩放：minZoom：6，maxZoom：13。

我还应该注意，这段代码（未更改）过去可以正常工作。这是我的代码：

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

wrap() 函数给出正确的坐标，DB 返回正确的图。但由于某种原因，它们不显示。以下是返回的图（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,…}

控制台中没有错误，正如我所说，有时一切正常（当 getBounds 没有返回一个疯狂的大 LON 时）。那么我到底做错了什么，更重要的是，我该如何解决呢？

【问题讨论】：

标签： javascript map leaflet

【解决方案1】：

'worldCopyJump': true 为我工作。

可以看到这个link。

<!DOCTYPE html>
<html lang="en">
Lat: <p  id="LatClick"> </p><br>
Lng: <p id="LOnClick" > </p><br>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
 <meta name="referrer" content="never">
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        html, body, #map {
            height: 80%;
         }
        .lorem {
            font-style: italic;
            color: #AAA;
        }
    </style>
</head>
<body>
   
    <div id="map"  ></div>
    <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
    <script>
        var map = L.map('map',{'worldCopyJump': true});
        map.setView([31.623116,84.497856], 8); L.tileLayer( 'http://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png', { maxZoom: 18}).addTo(map);
//var marker = L.marker([31.2, 97]).addTo(map);
var theMarker={};
map.on('click', function(e){
  var coord = e.latlng;
  var lat = coord.lat;
   map.removeLayer(theMarker);
  var lng = coord.lng;
  theMarker=L.marker([lat,lng]).addTo(map);
document.getElementById("LatClick").innerHTML = lat;
document.getElementById("LOnClick").innerHTML = lng;
});
     </script>
</body>
</html>

【讨论】：

【解决方案2】：

我看到了类似的事情，除了我通过回调作为event.latlng.lng 处理地图点击事件。添加worldCopyJump: true 没有为我解决了这个问题 - 我仍然看到大于 180 的经度值。

最后我调用了wrap()方法到latlng对象：

event.latlng.wrap().lng

解决了问题。

【讨论】：

这解决了我的问题。应该更好地宣传 event.latlng.lng 可以返回 -180 到 180 范围之外的值这一事实。我花了很长时间才发现我的 API 调用失败的原因，并且花了更长的时间才意识到这似乎是 lng 值的故意行为。但是为什么有人会想要使用随着您向东滚动而增加的 lng 值呢？

【解决方案3】：

这是由于 worldCopyJump 默认设置为 false。将其设置为 true，标记将正确显示，因为世界不会重叠。

【讨论】：

【解决方案4】：

我从未遇到过这些不正确的界限，但以编程方式限制它们至少可以作为临时解决方案吗？

至于未显示的标记 - 移动地图时会发生这种情况吗？如果是这样，很可能是由“moveend”事件重叠引起的。我不知道平均有多少点，但如果数据下载没有完成并添加标记，下一次调用“moveend”将删除所有现有标记并开始替换它们（它也会覆盖“plotlist”，这可能会导致稍后出错）。您可以在所有操作完成并绘制标记后尝试将它们添加到全局列表，或者您可以只移动不在新集合中的标记。

旁注 - 为什么不使用 geojson 来创建这些图层？使用“pointToLayer”和“onEachFeature”，您可以自定义标记/弹出窗口并在末尾添加一层，而不是一长串标记。

【讨论】：

那些边界来自于拖动地图，并由传单返回。所以我不确定我可以以编程方式改变它。标记不会在初始化或拖动时显示。我有通过循环并打印出每个标记的 console.log，所以我知道该事件至少正在发生。我曾经使用谷歌地图，所以我保持编程尽可能与我上次的实现相似（以防万一我需要跳回去）。我对geojson也不是很精通，所以我不确定如何使用它。