首页 文章

不完整的 Map 从平铺服务器返回,缩放级别可用的文件比文档指示的更多

提问于
浏览
0

我在以下示例中使用AngularJS,Leaflet和Angular-leaflet-directive,这是我从Angular-leaflet-directive项目中获得的 . 此示例在使用公共磁贴服务器时有效,包括示例当前指向的公共ArcGIS服务器 .

根据几个在线文档来源,包括来自open street mapsmapbox的这两个文档,在特定缩放级别可用的切片数量应为2 ^ z X 2 ^ z,其中z是缩放级别 . 因此,在缩放级别0,我们应该得到1个图块,在1处我们应该得到4个图块,依此类推 .

我指向私有托管(企业内部网)ESRI ArcGIS磁贴服务器时出现的问题 . 当我尝试按原样查看下面的页面时,但是使用私有磁贴服务器的url而不是http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/ / / ,我只能看到缩放级别0和1的部分 Map .

稍微戳了一下后,我意识到磁贴服务器想要在缩放级别0发送两个磁贴而不是1个,而在缩放级别1发送6个磁贴而不是4个 . 并且问题在更深的缩放级别继续 . 当查看各个图块的网址时(例如缩放级别为0的../0/0/0和../0/0/1),我看到如果我们放在一起,我们会得到我们期望的复合 Map 剩余的瓷砖,在该缩放级别可用 . 这意味着如果传单想要构建整个 Map ,则可以获得信息 .

我对Leaflet和 Map 一般都很新,但我觉得通过告诉传单在给定的缩放级别期望更多的图块,它应该能够得到完整的图片,但在搜索传单文档后,我无法找到这样的一个配置 .

我的问题:有这样的设置吗?如果是这样的话是什么?也许这个问题遗漏了一些问题,或者我不知道问题是否正确 . 我在看正确的文件吗?任何指导将不胜感激 .

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

2 回答

  • 0

    以下是基于@IvanSanchez评论的解决方案 . 请注意,我指向一个提供EPSG的公共服务器:4326并将crs:L.CRS.EPSG4326添加到默认值 . 需要注意的一点是,当前稳定版的传单(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>
    
  • 1

    也许问题遗漏了一些问题,或者我不知道问题是否正确 .

    我想你错过了 Map 投影的概念 . 如果 Map 使用EPSG:3857,那么缩放0可能被1个图块覆盖 . 如果它在EPSG:4326,那么它是2个瓷砖 .

    比较美国宇航局蓝色大理石的传单 Map 中的这些(静态)图像:

    两者都是正确的,但它们使用不同的投影(EPSG:顶部3857,EPSG:底部4326) .

    我建议你研究你的瓷砖使用的投影 . 您可能需要对 Map 投影进行一些额外的研究,甚至Proj4Leaflet才能让它正常工作,但至少你知道要看它 .

相关问题