我如何在 MapBox GL JS 中使用 Lantmäteriet 的瑞典卫星图像？

Question

我花了好几个月的时间（断断续续地）想弄清楚如何让它工作。它永远行不通，但我高度怀疑解决方案非常简单。

我将 MapBox GL JS 与 MapBox.com 卫星图像一起使用。这些都很差，至少对瑞典来说是这样。因此，由于 Lantmäteriet（官方政府机构）有更好的卫星照片，我想将它们整合到我的地图系统中（瑞典）。 URL看他们的地图是：https://minkarta.lantmateriet.se/?e=633856&n=6596096&z=3&profile=flygbild&background=2&boundaries=false

我在更多的页面中非常仔细地研究了这些：

https://docs.mapbox.com/mapbox-gl-js/example/wms/

https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/

Lantmäteriet 的网络应用程序生成的图像切片采用以下格式：

https://minkarta.lantmateriet.se/map/ortofoto/?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=false&LAYERS=Ortofoto_0.5%2COrtofoto_0.4%2COrtofoto_0.25%2COrtofoto_0.16&TILED=true&STYLES=&WIDTH=256&HEIGHT=256&SRS=EPSG%3A3006&BBOX=675968%2C6640416%2C684160%2C6648608

我已经尝试了很多与修改 URL 相关的事情，以便像这样使用它（对磁贴 URL 进行了许多更改）：

// https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addsource
map.addSource('wms-test-source',
{
    'type': 'raster',
    'tiles': [
        'https://minkarta.lantmateriet.se/map/ortofoto/?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=false&LAYERS=Ortofoto_0.5%2COrtofoto_0.4%2COrtofoto_0.25%2COrtofoto_0.16&TILED=true&STYLES=&WIDTH=256&HEIGHT=256&SRS=EPSG%3A3006&bbox={bbox-epsg-3006}'
    ],
    'tileSize': 256
});

// https://docs.mapbox.com/mapbox-gl-js/api/map/#map#addlayer
map.addLayer(
{
    'id': 'wms-test-layer',
    'type': 'raster',
    'source': 'wms-test-source',
    'paint': {}
}
//, 'aeroway-line'
);

我当然删除了“&BBOX=”的东西，添加了&bbox=%7Bbbox-epsg-3006%7D（和&bbox={bbox-epsg-3006}）等。没有任何东西让它起作用。卫星图像不显示，都显示相同的图像，或者服务器 returns 各种 HTTP 错误，显然是因为它不理解 MapBox GL JS 是如何尝试获取它们的。

需要添加一些内容才能理解格式，但我不明白是什么。

如果这与所用坐标系之间的差异有关，我已经通过以下代码获得了帮助（针对我的应用程序中的另一个问题）：

proj4.defs("EPSG:3006","+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs"); // SWEREF 99 TM
var epsg3006 = proj4("EPSG:3006");
var projCoords = proj4(epsg3006, [ longitud, latitud ]);

projCoords[0] 和 projCoords[1] 现在包含经过验证的 Lantmäteriet 地图所需的正确坐标。但这在这种情况下对我没有帮助......或者是吗？我不知道怎么办，因为我实际上并没有为此 URL.

以任何方式指定任何坐标

这仅供我个人使用，因此我不会为了自己的商业利益或任何目的而滥用他们的网络服务器。如果可能，我想避免联系他们，因为我认为发送给他们的任何东西都是 public，而且我正在努力保护一定程度的隐私。此外，我真的不认为他们能比你们更多地帮助我。我会说他们根本不可能想到有人会使用他们的数据。

事实上，我已经排除了其他几个非政府的营利性服务，它们似乎有一个完全专有的、非标准的机制来获取似乎不遵循任何类型的卫星图像known/public 标准。这就是为什么我选择了这个，它既是“public 服务”，又似乎使用了我的地图系统可以使用的东西，而无需跳过一堆箍。

如果有人能告诉我我需要做什么来指导它如何使用这些图像，我将不胜感激。

更新

看完答案（信息量大而且很好）后，我感到很难过，但仍然尝试 &bbox={bbox-epsg-3857} 获得 URL，如下所示： https://minkarta.lantmateriet.se/map/ortofoto/?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=false&LAYERS=Ortofoto_0.5%2COrtofoto_0.4%2COrtofoto_0.25%2COrtofoto_0.16&TILED=true&STYLES=&WIDTH=256&HEIGHT=256&SRS=EPSG%3A3006&bbox={bbox-epsg-3857}

当我开始我的应用程序时，整个地图很快就变成了 100% white/blank。我想“哦，好吧……”，但还是缩小了……一直缩小……惊讶地看到瑞典整个国家都在空白处世界地图，内部一致并且可以放大到完美的细节，但是向左和向下偏移，所以它似乎位于德国附近！

很奇怪。

发生这种情况有什么明显的原因吗？奇怪的是它看起来不错；这不仅仅是一大堆拼不在一起的瓷砖。也许我可以简单地以某种方式“更正”图层以将其替换在正确的位置？

Answer 1

我认为您的问题很可能与投影有关。

您正在获取投影中的数据 EPSG:3006 (SWEREF99)。 Mapbox only supports 在 EPSG:3857 (Web Mercator) 中获取图块：

By providing a URL to a WMS server that supports EPSG:3857 (or EPSG:900913) as a source of tiled data. The server URL should contain a "{bbox-epsg-3857}" replacement token to supply the bbox parameter.

（EPSG:900913 是 EPSG:3857 的一个非常古老的名称）

您已经尝试将 {bbox-epsg-3006} 放入您的 URL，但这实际上是 Mapbox GL JS 无法识别的替换标记，因此不会替换任何内容，因此服务器不会'不知道要发回什么瓦片。

所以，要么：

该服务器支持 EPSG:3857，在这种情况下，请求该投影中的图块，一切都应该有效
它不支持 EPSG:3857，在这种情况下您无能为力。（也许有一些第三方瓦片重投影服务，我不知道）。

您可以使用 GetCapabilities WMS request:

查看服务器支持的投影

https://minkarta.lantmateriet.se/map/ortofoto/?service=wms&version=1.1.1&request=GetCapabilities

好像支持EPSG:3857:

<Title>Visningstjänst ortofoton</Title>
    <SRS>epsg:3006</SRS>
    <SRS>epsg:3007</SRS>
    <SRS>epsg:3008</SRS>
    <SRS>epsg:3009</SRS>
    <SRS>epsg:3010</SRS>
    <SRS>epsg:3011</SRS>
    <SRS>epsg:3012</SRS>
    <SRS>epsg:3013</SRS>
    <SRS>epsg:3014</SRS>
    <SRS>epsg:3015</SRS>
    <SRS>epsg:3016</SRS>
    <SRS>epsg:3017</SRS>
    <SRS>epsg:3018</SRS>
    <SRS>epsg:3021</SRS>
    <SRS>epsg:3034</SRS>
    <SRS>epsg:3035</SRS>
    <SRS>epsg:3044</SRS>
    <SRS>epsg:3045</SRS>
    <SRS>epsg:3046</SRS>
    <SRS>epsg:3047</SRS>
    <SRS>epsg:3857</SRS>
    <SRS>epsg:4258</SRS>
    <SRS>epsg:4326</SRS>
    <SRS>epsg:4619</SRS>
    <SRS>epsg:25832</SRS>
    <SRS>epsg:25833</SRS>
    <SRS>epsg:25834</SRS>
    <SRS>epsg:25835</SRS>
    <SRS>epsg:32632</SRS>
    <SRS>epsg:32633</SRS>
    <SRS>epsg:32634</SRS>
    <SRS>epsg:32635</SRS>

我如何在 MapBox GL JS 中使用 Lantmäteriet 的瑞典卫星图像？

How do I use Lantmäteriet's satellite images over Sweden in MapBox GL JS?

javascript

gis

mapbox-gl-js

wms

satellite-image