1

感谢一些帮助找出为什么 ESRI Tile 层没有在 Leaflet 中加载？它在 OpenLayers 中加载，当然在使用 ESRI JS API 时加载，但我想使用 Leaflet ......

这是带有 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>
4

1 回答 1

0

我看到这里发生了几个不同的问题：

  1. /tile/{z}/{y}/{x}实例化 tiledMapLayer 时不应附加到 url。我们不会在我们的样本中这样做。

  2. Leaflet（以及因此 Esri Leaflet）只知道 Google、Bing 等使用的显式切片方案。您的服务可能引用相同的基本投影，但它使用非标准切片方案（即：分辨率和比例不同）。在 Esri Leaflet 中，我们尝试重新映射 LOD，但前提是我们识别出比例和分辨率。

标准：

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

你的：

{
    "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 中轻松完成。

于 2017-04-24T19:56:47.440 回答