La carte incomplète revient du serveur de mosaïque, plus de mosaïques disponibles au niveau du zoom que les docs indiquent

J'utilise AngularJS, Leaflet, et Angular-leaflet-directive dans l'exemple suivant que j'ai obtenu du projet Angular-leaflet-directive. Cet exemple fonctionne lorsque vous utilisez des serveurs de tuiles publiques, y compris le serveur ArcGIS public auquel l'exemple pointe actuellement. Selon plusieurs sources de documentation en ligne, y compris celles de open street maps et mapbox, le nombre de mosaïques disponibles à un niveau de zoom particulier doit être 2^z X 2^z, où z est le niveau de zoom. Ainsi, au niveau de zoom 0, nous devrions obtenir 1 tuile, à 1 nous devrions obtenir 4 tuiles, et ainsi de suite.La carte incomplète revient du serveur de mosaïque, plus de mosaïques disponibles au niveau du zoom que les docs indiquent

Le problème Je n'ai eu lieu que lorsque j'ai pointé vers un serveur de tuiles ESRI ArcGIS hébergé en privé (intranet d'entreprise). Lorsque j'essaie d'afficher la page ci-dessous, mais avec l'URL du serveur de tuiles privées au lieu du http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/ {z}/{y}/{x}, je ne vois que les cartes partielles au niveau 0 et 1.

Après avoir piqué un peu, j'ai réalisé que le serveur de tuiles voulait envoyer deux tuiles au lieu de 1 au niveau de zoom 0, 6 tuiles au lieu de 4 au niveau de zoom 1. Et le problème continue à des niveaux de zoom plus profonds. Lorsque l'on regarde les URLs des différents pavés (par exemple ../0/0/0 et ../0/0/1 au niveau de zoom 0), je vois que nous obtenons la carte composite que nous attendons si nous assemblons tuiles restantes qui sont disponibles à ce niveau de zoom. Signification si leaflet voulait construire la carte entière l'information est disponible. Je suis très nouveau dans Leaflet et Maps en général, mais je pense qu'en disant à leaflet d'attendre plus de tuiles à un niveau de zoom donné, il devrait être capable d'obtenir une image complète, mais après avoir cherché la documentation de la brochure, j'étais incapable de trouver une telle configuration.

Mes questions: existe-t-il un tel paramètre? Si oui, qu'est-ce que c'est? Peut-être que la question manque quelque chose ou je ne sais pas assez pour poser la bonne question. Est-ce que je regarde la bonne documentation? Toute orientation serait appréciée.

<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>

Source

2016-04-01 Sanjeev

Peut-être que la question manque quelque chose ou je ne sais pas assez pour poser la bonne question.

Je pense qu'il vous manque le concept des projections cartographiques. Si une carte utilise EPSG: 3857, il y a de fortes chances que le zoom 0 soit couvert par 1 pavé. Si c'est dans EPSG: 4326, alors il y a 2 tuiles.

Comparer ces images (statiques) à partir de cartes de brochure de Blue Marble de la NASA:

sont deux réponses sont correctes, mais ils utilisent différentes projections (EPSG: 3857 sur le dessus et EPSG: 4326 sur le fond).

I fortement vous suggérons de rechercher quelle projection vos carreaux utilisent. Vous pourriez avoir besoin d'un peu de recherche supplémentaire sur les projections cartographiques et même Proj4Leaflet pour le faire fonctionner, mais au moins vous savez ehre à regarder.

Source

2016-04-02 19:54:24 IvanSanchez

Merci pour votre aide. – Sanjeev

Voici ma solution basée sur les commentaires de @IvanSanchez. Notez que je pointe vers un serveur public qui utilise EPSG: 4326 et qui ajoute crs: L.CRS.EPSG4326 aux valeurs par défaut. Un point important à noter est que ceci n'est pas entièrement supporté par la version stable actuelle de la brochure (0.7.7). Afin de le faire fonctionner, j'ai mis à jour à 1.0.0 Beta2. Pour plus d'informations sur ce problème, y compris une alternative à l'utilisation de la version bêta, voir 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>

Source

2016-04-04 21:02:36 Sanjeev

La carte incomplète revient du serveur de mosaïque, plus de mosaïques disponibles au niveau du zoom que les docs indiquent

Répondre

Questions connexes