0

AngularJS、リーフレット、角度リーフレットディレクティブを使用しています。この例は、パブリックタイルサーバーを使用しているときに機能します(現在の例では、パブリックArcGISサーバーを参照しています)。タイルサーバーから不完全なマップが戻ってきました。ズームレベルでドキュメントよりも多くのタイルが表示されています

open street mapsmapboxの2つのドキュメントを含むいくつかのオンラインソースによると、特定のズームレベルで利用できるタイルの数は、2^z X 2^z(zはズームレベル)である必要があります。したがって、ズームレベル0では1タイルを取得し、1では4タイルを取得する必要があります。

この問題は私的にホストされている企業イントラネットのESRI ArcGISタイルサーバーを指している場合にのみ発生します。下のページをそのまま表示しようとすると、http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/ {z}/{y}/{x}の代わりにプライベートタイルサーバーのURLを表示すると、ズームレベル0と1の部分地図しか表示されません。

私はタイルサーバーがズームレベル0で1の代わりに2つのタイルを、ズームレベル1で4の代わりに6つのタイルを送信したいと考えていました。個々のタイルのURLを見ると(ズームレベル0での../0/0/0と../0/0/1など)、私たちがまとめた場合に期待されるコンポジットマップを取得することがわかりますそのズームレベルで利用可能な残りのタイル。つまり、リーフレットが地図全体を作成したいのであれば、その情報は利用可能です。

リーフレットとマップは一般的に新しくなっていますが、特定のズームレベルでより多くのタイルを期待してリーフレットに完全な画像を得ることができるはずですが、リーフレットのドキュメントを検索した後、そのような構成を見つけることができません。

私の質問:そのような設定はありますか?もしそうなら、それは何ですか?たぶん問題は何かが欠落しているか、正しい質問をするのに十分ではない。正しい文書を見ていますか?どんな指導も高く評価されます。

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

答えて

1

たぶん質問は何かが欠けているか、私は右の質問をするのに十分なのか分かりません。

地図投影の概念が欠落していると思います。地図でEPSG:3857を使用している場合、ズーム0は1タイルで覆われている可能性があります。それがEPSGの場合:4326、それは2タイルです。

は、NASAのブルーマーブルのリーフレットマップからこれらの(静的)画像の比較:

Map in EPSG:3857 Map in EPSG:4326

どちらも正しいですが、彼らは異なる投影(EPSG使用:一番下に4326:トップとEPSGに3857を)。

あなたのタイルが使用している投影を調べることをお勧めします。地図投影法やProj4Leafletについても少し研究をする必要があるかもしれませんが、少なくともそれを見るにはあなたは知っています。

+0

ありがとうございました。 – Sanjeev

0

@IvanSanchezのコメントに基づく私の解決策です。私は、EPSG:4326を提供し、crs:L.CRS.EPSG4326をデフォルトに追加する公開サーバを指していることに注意してください。注目すべき重要な点の1つは、これが現在の安定版のチラシ(0.7.7)によって完全にサポートされていないことです。それを動作させるために、私は1.0.0 Beta2にアップグレードしました。ベータ版を使用する代わりに、この問題の詳細については、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> 
関連する問題