磁貼服務器返回的地圖不完整，縮放級別可用的磁貼數量超過文檔指示的數量

Question

在以下示例中，我使用了AngularJS，Leaflet和Angular-leaflet指令，這些示例是從Angular-leaflet指令項目獲得的。 使用公共切片服務器（包括該示例當前指向的公共ArcGIS Server）時，此示例適用。

根據一些在線文檔資源，包括這兩個來自開放式街道地圖和mapbox的文檔，在特定縮放級別下可用的圖塊數量應為2 ^ z X 2 ^ z，其中z為縮放級別。 因此，在縮放級別0下，我們應該得到1個圖塊，在縮放級別1時，我們應該得到4個圖塊，依此類推。

我所遇到的問題僅在指向私有托管（公司Intranet）ESRI ArcGIS切片服務器時發生。 當我嘗試按原樣查看下面的頁面時，但是使用私有磁貼服務器的URL而不是http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/ {z} / {y} / {x}，我只能看到縮放級別0和1的局部地圖。

經過一番摸索后，我意識到瓦片服務器希望在縮放級別0時發送兩個瓦片而不是1，在縮放級別1時發送6個瓦片而不是4個。並且在更深的縮放級別上問題仍然存在。在查看各個圖塊的網址（例如縮放級別為0的../0/0/0和../0/0/1）時，我看到我們確實得到了合成圖，如果我們將它們放在一起在該縮放級別可用的剩余圖塊。 這意味着如果傳單要構建整個地圖，則可以使用該信息。

一般而言，我對Leaflet和Maps還是很陌生，但是我感覺通過告訴Leaflet在給定的縮放級別上期望更多的圖塊，它應該能夠獲得完整的圖片，但是在搜索Leaflet文檔之后，我找不到了配置。

我的問題：有這樣的設置嗎？ 如果是這樣，那是什么？ 也許這個問題遺漏了一些東西，或者我不知道該問什么。 我在尋找正確的文檔嗎？ 任何指導將不勝感激。

<html>
<head>
  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <style>
    #map{ width: 900px; height: 500px; }
  </style>
</head>
<body>

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

  <script>

  // initialize the map
  var map = L.map('map').setView([42.35, -71.08], 13);

  // load a tile layer
   L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
    {
      maxZoom: 17,
      minZoom: 9
    }).addTo(map);

  </script>
</body>
</html>

Answer 1

也許這個問題遺漏了一些東西，或者我不知道該問什么。

我認為您缺少地圖投影的概念。 如果地圖使用的是EPSG：3857，則縮放0可能會被1個圖塊覆蓋。 如果在EPSG：4326中，則為2個圖塊。

比較這些來自NASA藍色大理石傳單地圖的（靜態）圖像：

兩者都是正確的，但是它們使用不同的預測（頂部為EPSG：3857，底部為EPSG：4326）。

我強烈建議您研究瓷磚使用的投影方式。 為了使它起作用，您可能需要對地圖投影甚至Proj4Leaflet進行一些額外的研究，但是至少您知道要外觀。

Answer 2

這是基於@IvanSanchez的評論的我的解決方案。 請注意，我指向的是提供EPSG：4326的公共服務器，並將crs：L.CRS.EPSG4326添加到默認服務器。 需要注意的重要一點是，當前穩定版本的傳單（0.7.7）並未完全支持此功能。 為了使其正常工作，我升級到了1.0.0 Beta2。 有關此問題的更多信息，包括使用beta版本的替代方法，請參閱https://github.com/Leaflet/Leaflet/issues/1207 。

<!DOCTYPE html>
<html ng-app="demoapp">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="lib/angular-1.4.2/angular.min.js"></script>
    <script src="lib/leaflet/dist/leaflet.js"></script>
    <script src="lib/angular-leaflet-directive-master/dist/angular-leaflet-directive.min.js"></script>
    <link rel="stylesheet" href="lib/leaflet/leaflet.css" />
    <script>
        var app = angular.module("demoapp", ["leaflet-directive"]);
        app.controller('BasicCustomParametersController', [ '$scope', function($scope) {
            angular.extend($scope, {
                london: {
                    lat: 51.505,
                    lng: -0.09,
                    zoom: 1,
                    noWrap: false,
                    minZoom: 1,
                    maxZoom: 10
                },
                defaults: {
                   //EPSG:3857
                   // tileLayer: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}",

                   //EPSG:4326
                    tileLayer: "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer/tile/{z}/{y}/{x}",

                    zoomControlPosition: 'topright',
                    tileLayerOptions: {
                        opacity: 0.9,
                        detectRetina: true,
                        reuseTiles: true,
                    },
                    scrollWheelZoom: false,

                   //use EPSG4326.  Not fully supported in leaflet 0.7.7.  Works with 1.0.0 Beta2
                    crs:L.CRS.EPSG4326
                }
            });
        }]);
    </script>
  </head>
  <body ng-controller="BasicCustomParametersController">
    <leaflet lf-center="london" defaults="defaults" width="100%" height="480px"></leaflet>
    <h1>Using custom default parameters</h1>
  </body>
</html>

磁貼服務器返回的地圖不完整，縮放級別可用的磁貼數量超過文檔指示的數量

問題描述

2 個解決方案

解決方案1
1 已采納 2016-04-02 19:54:24

解決方案2
0 2016-04-04 21:02:36

磁貼服務器返回的地圖不完整，縮放級別可用的磁貼數量超過文檔指示的數量

問題描述

2 個解決方案

解決方案1 1 已采納 2016-04-02 19:54:24

解決方案2 0 2016-04-04 21:02:36

解決方案1
1 已采納 2016-04-02 19:54:24

解決方案2
0 2016-04-04 21:02:36