矢量切片在 esri-leaflet-vector 插件中显示在错误的位置和错误的比例

编程问答 2022-04-30

问题描述

我正在使用 [email protected] 和传单 1.7.1 以及 esri-leaflet-vector 插件。

当我添加 VectorTileServer 层时，渲染的图块显示在错误的位置和错误的比例。我哪里做错了？

VectorTileServer 在 Web Mercator "spatialReference":{"wkid":102100,"latestWkid":3857} 中发布。

enter image description here

看看挪威。

它显示在错误的位置和错误的比例？

const map = L.map('map').setView([50,18],3);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.esri.Vector.vectorTileLayer("https://services.geodataonline.no/arcgis/rest/services/GeocacheVector/GeocacheGraatone_WM/VectorTileServer",{
        style: (style) => {
            style.layers.forEach(function (layer) {
                if (layer.layout['text-rotate']) {
                    layer.layout['text-rotate'].stops = [[0,0]]
                }
            });
            return style
        }
    }
).addTo(map);
    body { margin:0; padding:0; }
    #map {
        position: absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
        font-family: Arial,Helvetica,sans-serif;
        font-size: 14px;
        color: #323232;
      }
<html>

<head>
  <Meta charset="utf-8">
  <Meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Esri Leaflet</title>

  <!-- Load Leaflet from CDN -->
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/[email protected]/dist/esri-leaflet.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/esri-leaflet-vector.js"></script>
</head>

<body>
  <div id="map"></div>

</body>

</html>

有人可以帮忙吗？ 问候 米克

解决方法

我注意到您使用的这个图层的一件事是每个缩放级别的缩放属性似乎都关闭了。从esri-leaflet docs

您的地图服务必须使用以及 Google 地图、Bing 地图和 ArcGIS Online 使用的默认比例选项发布。 Esri Leaflet 将不支持切片图层的任何其他空间参考。

如果您访问 arcgis 的 sample tutorial for vector tile layers，他们会提供一个带有示例矢量切片图层的示例示例：Santa Monica Mountain Parcels。如果您打开该磁贴服务器 url，您将看到带有属性 lods:

的 JSON 
"lods": [
  {
    "level": 0,"resolution": 78271.51696399994,"scale": 295828763.795777
  },{
    "level": 1,"resolution": 39135.7584820001,"scale": 147914381.897889
  },{
    "level": 2,"resolution": 19567.87924099992,"scale": 73957190.948944
  },...
}

我将假设这些是 esri-leaflet 接受的默认比例，考虑到这些是在其样本矢量切片层中使用的比例。它们也列在此处：What ratio scales do Google Maps zoom levels correspond to?

如果您打开要用于挪威的图层的 tile server url，您会看到相同的内容，但比例数字似乎偏离了一个缩放级别：

"lods": [
  {
    "level": 0,"resolution": 156543.03392800014,"scale": 591396864
  },"resolution": 78271.51696399994
    "scale": 295698432,},"resolution": 39135.75848200009,"scale": 147849216
  },...

这就是为什么您的挪威图层是错误的，但至少在所有缩放图层中始终是错误的（这意味着它总是出现在相同的错误位置，大小是应有的一半）。

如果您对提供该图层的人员有任何控制权/联系，我会让他们知道他们的缩放级别是错误的。

与此同时，可能有一种方法可以覆盖 esri-leaflet 在加载该层时使用的 JSON，但是挖掘其源代码需要做很多工作，并且非常hacky。