如何将 GeoMet WMS 与传单一起使用答案

【问题标题】：How to use GeoMet WMS with leaflet如何将 GeoMet WMS 与传单一起使用
【发布时间】：2019-08-28 05:17:49
【问题描述】：

我一直在尝试使 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>

感谢您的帮助

【问题讨论】：

标签： leaflet coordinate-systems wms

【解决方案1】：

当 QGis 配置为显示 EPSG:3857 时，来自该 WMS 服务器的 HRDPS.NORTH.PRES_WSPD.275 层在 Leaflet 中与在 QGis 中看起来完全相同：

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

【讨论】：

天啊！你说的完全正确。我什至没有将苹果与苹果进行比较。非常感谢您指出这个愚蠢的错误。你为我节省了更多时间拉头发。