Question

我正在尝试将OpenLayers 2调用更改为Leaflet，但是当我执行时，地图在缩放级别0时显示正常，但每次放大时，地图都会从之前的数字加倍。有什么建议吗？这是它的作用的图片。

Duplicate Map View

OpenLayers 2地图选项

    var options = {
        projection: new OpenLayers.Projection("EPSG:3857"),
        displayProjection: new OpenLayers.Projection("EPSG:4326"),
        units: "m",
        maxResolution: 156543.0339,
        maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
                                          20037508.34, 20037508.34),
        controls: [
            new OpenLayers.Control.Navigation(
                {dragPanOptions: {enableKinetic: true}}
            )
        ]
    };

OpenLayers 2代码

var bathyEsri = new OpenLayers.Layer.XYZ(
        ' ESRI Ocean'
        ,'http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/${z}/${y}/${x}.jpg'
        ,{
           sphericalMercator : true 
          ,isBaseLayer       : true 
          ,wrapDateLine      : true
          ,opacity           : 1
          ,visibility        : true
         }
    );

宣传单选项

  var options  = {
      worldCopyJump: true,
      maxBounds: L.LatLngBounds([20037508.34,20037508.34],[-20037508.34,-20037508.34]),
      crs: L.CRS.EPSG4326,
      center: [39.73, -104.99],
      zoom: 0
    };

宣传单

    var bathyEsri = L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/${z}/${y}/${x}.jpg');

Answer 1

你的问题基本上是一个错字。

您的分析也具有误导性：不是地图是“重复”的，而是所请求的每个图块都是0/0/0图块。如果您使用浏览器的网络检查工具，则会看到图块网址类似于https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer/tile/$3/$4/$5.jpg，但图块图片对应于/0/0/0.jpg图块。

如果您更仔细地查看这些网址，您会发现一些“额外”$标志。那些为什么？好吧，请考虑您将tilelayer URL方案编写为

var bathyEsri = L.tileLayer('http://...../tile/${z}/${y}/${x}.jpg');

但请记住Leaflet documentation clearly states：

var bathyEsri = L.tileLayer('http://...../tile/{z}/{y}/{x}.jpg');

改变这一点，一切都会神奇地开始工作。

从OpenLayers切换到Leaflet

1 个答案: