0

我正在使用 esri-leaflet@3.0.0 和传单 1.7.1 和 esri-leaflet-vector 插件。

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

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

在此处输入图像描述

塔卡看看挪威。

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

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/leaflet@1.7.1/dist/leaflet.css"
    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
    crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
    crossorigin=""></script>

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

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

</body>

</html>

任何人都可以帮忙吗？问候米克

4

1 回答 1

1

我注意到您正在使用的这一层的一件事是，每个缩放级别的比例属性似乎都关闭了。来自esri-leaflet 文档

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

如果你去 arcgis 的矢量切片图层示例教程，他们有一个带有示例矢量切片图层的示例示例：Santa Monica Mountain Parcels。如果您打开该磁贴服务器 url，您将看到带有属性的 JSON lods：

"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 接受的默认比例，考虑到这些是在他们的样本矢量切片层中使用的比例。它们也在此处列出：Google 地图缩放级别对应的比例比例是多少？

如果您打开您尝试用于挪威的图层的切片服务器 url ，您会看到相同的内容，但比例数字似乎偏离了一个缩放级别：

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

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

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

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

于 2021-05-26T15:36:02.613 回答