0

Ich verwende AngularJS, Leaflet und Angular-leaflet-directive im folgenden Beispiel, das ich aus dem Angular-leaflet-directive-Projekt erhalten habe. Dieses Beispiel funktioniert, wenn Sie öffentliche Kachelserver verwenden, einschließlich des öffentlichen ArcGIS-Servers, auf den das Beispiel derzeit verweist.Unvollständige Karte kommt vom Kachelserver zurück, mehr Kacheln sind auf Zoomstufe verfügbar als in der Dokumentation angegeben

Nach mehreren Online-Dokumentationsquellen, einschließlich dieser beiden aus open street maps und mapbox, sollte die Anzahl der verfügbaren Kacheln bei einer bestimmten Zoomstufe 2^z X 2^z sein, wobei z die Zoomstufe ist. Also sollten wir bei Zoomlevel 0 1 Kachel bekommen, bei 1 sollten wir 4 Kacheln bekommen, und so weiter.

Das Problem, das ich nur bei dem Zeigen auf einen privat gehosteten (Firmenintranet) ESRI ArcGIS-Kachelserver auftritt. Wenn ich versuche, die Seite so wie sie ist zu sehen, aber mit der URL des privaten Kachelservers anstelle der http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/ {z}/{y}/{x}, sehe ich nur Teilkarten auf Zoomstufe 0 und 1.

Nachdem ich ein bisschen herum gestöbert hatte, erkannte ich, dass der Kachelserver zwei Kacheln anstelle von 1 bei Zoomstufe 0 und sechs Kacheln anstelle von 4 bei Zoomstufe 1 senden wollte. Und das Problem setzt sich bei tieferen Zoomstufen fort. Wenn ich mir die URLs für die einzelnen Kacheln anschaue (zum Beispiel ../0/0/0 und ../0/0/1 in der Zoomstufe 0), sehe ich, dass wir die zusammengesetzte Karte erhalten, die wir erwarten, wenn wir sie zusammensetzen verbleibende Kacheln, die auf dieser Zoomstufe verfügbar sind. Das bedeutet, wenn das Flugblatt die gesamte Karte erstellen wollte, sind die Informationen verfügbar.

Ich bin mit Leaflet und Maps im Allgemeinen sehr neu, aber ich denke, dass ich, wenn ich Flugblätter erfahre, mehr Kacheln bei einer bestimmten Zoomstufe erwarten würde, das komplette Bild bekommen könnte nicht in der Lage, eine solche Konfiguration zu finden.

Meine Fragen: Gibt es so eine Einstellung? Wenn ja, was ist es? Vielleicht fehlt der Frage etwas oder ich weiß nicht genug, um die richtige Frage zu stellen. Schaue ich mir die richtige Dokumentation an? Jede Anleitung würde geschätzt werden.

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

Antwort

1

Vielleicht ist die Frage etwas fehlt oder ich weiß nicht genug, um die richtige Frage zu stellen.

Ich denke, dass Sie das Konzept der Kartenprojektionen vermissen. Wenn eine Karte EPSG: 3857 verwendet, besteht die Möglichkeit, dass der Zoom 0 von 1 Kachel abgedeckt wird. Wenn es in EPSG: 4326 ist, dann sind es 2 Fliesen.

Vergleichen Sie diese (statisch) Bilder von Faltblatt Karten von Blue Marble NASA:

Map in EPSG:3857 Map in EPSG:4326

Beide sind richtig, aber sie verwenden verschiedene Projektionen (EPSG: 3857 auf der Oberseite und EPSG: 4326 auf der Unterseite).

I stark vorschlagen, dass Sie erforschen, welche Projektion Ihre Fliesen verwenden. Du brauchst vielleicht ein wenig zusätzliche Forschung zu Kartenprojektionen und sogar Proj4Leaflet, um es zum Laufen zu bringen, aber wenigstens weißt du, dass du es sehen musst.

+0

Danke für Ihre Hilfe. – Sanjeev

0

Hier ist meine Lösung basierend auf den Kommentaren von @IvanSanchez. Beachten Sie, dass ich auf einen öffentlichen Server zeige, der EPSG: 4326 bereitstellt und crs: L.CRS.EPSG4326 zu den Standardwerten hinzufügt. Ein wichtiger Punkt ist, dass dies von der aktuellen stabilen Version des Merkblattes (0.7.7) nicht vollständig unterstützt wird. Um es zum Laufen zu bringen, habe ich auf 1.0.0 Beta2 aufgerüstet. Weitere Informationen zu diesem Problem, einschließlich einer Alternative zur Verwendung der Betaversion, finden Sie unter 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>