2017-04-16 5 views
1

リーフレットにESRIタイルレイヤーがロードされない理由を理解するのに役立ちますか? OpenLayersに読み込まれ、もちろんESRI JS APIを使用していますが、リーフレットを使用したいと考えています。ESRI TileLayerが標準ではない0ズームがリーフレットにロードされない

これは、タイルレイヤ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/[email protected]/dist/leaflet.css" /> 
    <script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script> 

    <!-- Load Esri Leaflet from CDN --> 
    <script src="https://unpkg.com/[email protected]"></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> 
+0

これが問題の手掛かりになるかどうかは不明ですか?私がロードしようとしているリリーフマップは、ズームレベル0で1タイルの全世界で "ズームレベル0"で始まらないようです...ズームレベル(0)で "開始"し、6x6問題の範囲をカバーするグリッド... – Cloudstako

答えて

0

私はいくつかの異なる問題がここで起こって参照してください。

  1. tiledMapLayerをインスタンス化するときに、URLへの/tile/{z}/{y}/{x}を追加するべきではありません。私たちはサンプルでそれをしません。

  2. リーフレット(と結果的にEsri Leaflet)は、Google、Bingなどが使用する明示的なタイルスキームについてのみ知っています。あなたのサービスは同じベースプロジェクションを参照することができますが、非標準のタイルスキーム(すなわち、異なる)。 Esriリーフレットでを試してください。スケールと解像度を認識したときに限り、LODを再マッピングします。

standard

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

yours

{ 
    "level": 0, 
    "resolution": 135.46693760054188, 
    "scale": 512000 
}, 
{ 
    "level": 1, 
    "resolution": 67.73346880027094, 
    "scale": 256000 
}, 
{ 
    "level": 2, 
    "resolution": 33.86673440013547, 
    "scale": 128000 
} 

あなたの最良のオプションは、関心領域を制限したい場合でも、Googleの標準のタイルスキーマに固執することです。これは、ArcGIS Desktop、ArcGIS Server、またはカスタムタイルパッケージの作成にタイルを公開しても、ArcGIS Desktopで簡単に実行できます。

関連する問題