Question

了解一些帮助，找出为什么ESRI Tile图层不会在Leaflet中加载？它在OpenLayers中加载，当然在使用ESRI JS API时，但我想使用Leaflet ......

这是标准宣传单＆＃34;快速入门＆＃34;使用Tile Layer URL的示例。我已经尝试了层和地图构造函数的许多选项，并强制地图调整大小和重绘等，但我无法让它工作......

<html>
<head>
  <meta charset=utf-8 />
  <title>Esri Leaflet Quickstart</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

  <!-- Load Leaflet from CDN-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js"></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@2.0.8"></script>

  <style>
    body { margin:0; padding:0; }
    #map { position: absolute; top:0; bottom:0; right:0; left:0; }
  </style>
</head>
<body>

<div id="map"></div>

<script>
function initmap() {
    map = new L.Map('map');
    //var osmUrl = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png'; <- example from Esri-Leaflet that works fine
    var osmUrl = 'https://citymaps.capetown.gov.za/agsext1/rest/services/Background_Maps/Relief_Map/MapServer/tile/{z}/{y}/{x}';
    var osm = new L.esri.tiledMapLayer({url:osmUrl, noWrap: true});
    map.addLayer(osm);
}
var lat = Number(18.5296);
var lng = Number(-33.9597);
var startLatLng = new L.LatLng(lat, lng);
initmap();
map.setView(startLatLng, 0); 
</script>

</body>
</html>

OpenLayers完全相同的例子：

<!DOCTYPE html>
<html>
  <head>
    <title>Tiled ArcGIS MapServer</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.1.0/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.1.0/build/ol.js"></script>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var urlRelief    = 'https://citymaps.capetown.gov.za/agsext1/rest/services/Background_Maps/Relief_Map/MapServer';
      var layers = [
/*         new ol.layer.Tile({
          source: new ol.source.OSM()
        }), */
        new ol.layer.Tile({
          source: new ol.source.TileArcGISRest({
            url: urlRelief,
            projection: 'EPSG:4326',
            wrapX: false
          })
        })
      ];

      var map = new ol.Map({
        layers: layers,
        target: 'map',
        view: new ol.View({
          center: [2062612, -4026418],
          zoom: 10
        })
      });
    </script>
  </body>
</html>

Answer 1

我发现这里有几个不同的问题：

在实例化tilesMapLayer时，您不应该将/tile/{z}/{y}/{x}附加到网址。我们不会在样品中这样做。
Leaflet（以及Esri Leaflet）只知道Google，Bing等使用的显式切片方案。您的服务可能会引用相同的基本投影，但它使用非标准切片方案（即：分辨率和尺度不同）。在Esri Leaflet中，我们尝试重新映射LOD，但仅限于我们识别比例和分辨率。

standard：

  {
    "level": 10,
    "resolution": 152.87405657041106,
    "scale": 577790.554289
  },
  {
    "level": 11,
    "resolution": 76.43702828507324,
    "scale": 288895.277144
  },
  {
    "level": 12,
    "resolution": 38.21851414253662,
    "scale": 144447.638572
  },

yours：

{
    "level": 0,
    "resolution": 135.46693760054188,
    "scale": 512000
},
{
    "level": 1,
    "resolution": 67.73346880027094,
    "scale": 256000
},
{
    "level": 2,
    "resolution": 33.86673440013547,
    "scale": 128000
}

即使您想限制感兴趣的区域，最好的选择是坚持使用Google的标准切片方案。无论您最终将图块发布到ArcGIS Online，ArcGIS Server还是创建自定义图块包，都可以在ArcGIS Desktop中轻松完成。

具有非标准0缩放的ESRI TileLayer不会在Leaflet中加载

1 个答案: