如何使用带有传单的 GeoMet WMS

Question

我一直在尝试使 WMS 服务与传单一起使用。我只想使用该服务似乎支持的标准 CRS=EPSG:3857。但是我就是无法让 WMS 层在 OpenStreetMap 基础层上对齐。

这张照片应该在加拿大上空排列。它在 QGIS 中工作得很好。

这里有码笔：https://codepen.io/keenedge/pen/dybWgbM

这是我需要使用的 WMS 的文档页面。

我试过在地图和 WMS 图层中设置 crs: L.CRS.EPS3857，但似乎没有效果。

现在有人知道如何让这支代码笔工作吗？

完整代码在这里：

<!DOCTYPE html>
<html>

<head>
  <title>Quick Start - Leaflet</title>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
    integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
    crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
    integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
    crossorigin=""></script>
</head>

<body>
  <div id="mapid" style="width: 800px; height: 800px;"></div>
  <script>


    var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib = 'Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
    var osm = new L.TileLayer(osmUrl, { minZoom: 1, maxZoom: 19, attribution: osmAttrib });

    var wmsOptions = {
      layers: 'HRDPS.NORTH.PRES_WSPD.275',
      transparency: true,
      format: 'image/png',
      version: '1.3.0'
    }

    var url = 'https://geo.weather.gc.ca/geomet'
    var wmsLayer = L.tileLayer.wms(url, wmsOptions);

    var myMap = L.map('mapid').setView([49, -123], 2);
    osm.addTo(myMap);
    wmsLayer.addTo(myMap);
  </script>



</body>

</html>

感谢您的帮助

Answer 1

当 QGis 配置为显示 EPSG:3857:

时，来自 WMS 服务器的 HRDPS.NORTH.PRES_WSPD.275 层在 Leaflet 中看起来与在 QGis 中完全一样

你没有做错任何事。请注意，同一 WMS 服务的其他图层确实覆盖了加拿大大陆、海洋或其他一些区域。

如何使用带有传单的 GeoMet WMS

How to use GeoMet WMS with leaflet

wms

coordinate-systems

leaflet