WmsLayer now also supports a few EPSG CRSs

BlazorLeaflet/BlazorLeaflet/Models/Crs.cs

@@ -0,0 +1,39 @@
+using System;
+namespace BlazorLeaflet.Models
+{
+    /// <summary>
+    /// The Leaflet-supported _c_oordinate _r_eference _s_ystems.
+    ///
+    /// Used in WMS tile layers.
+    /// </summary>
+    public class Crs
+    {
+        public string Code { get; }
+
+        private Crs(string code) => Code = code;
+
+        /// <summary>
+        /// Rarely used by some commercial tile providers. Uses Elliptical
+        /// Mercator projection.
+        /// </summary>
+        public static Crs Epsg3595 => new Crs("EPSG:3595");
+
+        /// <summary>
+        /// The most common CRS for online maps, used by almost all free and
+        /// commercial tile providers. Uses Spherical Mercator projection. Set
+        /// in by default in Map's crs option.
+        /// </summary>
+        public static Crs Epsg3857 => new Crs("EPSG:3857");
+
+        /// <summary>
+        /// A common CRS among GIS enthusiasts. Uses simple Equirectangular
+        /// projection. Leaflet 1.0.x complies with the TMS coordinate scheme
+        /// for EPSG:4326, which is a breaking change from 0.7.x behaviour. If
+        /// you are using a TileLayer with this CRS, ensure that there are two
+        /// 256x256 pixel tiles covering the whole earth at zoom level zero, and
+        /// that the tile coordinate origin is (-180,+90), or (-180,-90) for
+        /// TileLayers with the tms option set.
+        /// </summary>
+        public static Crs Epsg4326 => new Crs("EPSG:4326");
+    }
+}

BlazorLeaflet/BlazorLeaflet/Models/WmsLayer.cs

@@ -34,7 +34,10 @@ public class WmsLayer : TileLayer
         /// </summary>
         public string WmsVersion { get; set; }
 
-        // TODO CRS
+        /// <summary>
+        /// The _c_oordinate _r_eference _s_ystem to use.
+        /// </summary>
+        public Crs Crs { get; set; }
 
         /// <summary>
         /// Whether to pass request query parameter keys in upper case.

BlazorLeaflet/BlazorLeaflet/wwwroot/leafletBlazorInterops.js

@@ -163,6 +163,7 @@ window.leafletBlazor = {
         const layer = L.tileLayer.wms(wms.baseUrl, {
             layers: wms.layers.join(','),
             styles: wms.styles.join(','),
+            crs: createCrs(wms.crs),
             attribution: wms.attribution,
             format: wms.imageFormat,
             transparent: wms.isTransparent,
@@ -252,6 +253,22 @@ function createIcon(icon) {
     })
 }
 
+function createCrs(crs) {
+    if (!crs)
+        return L.CRS.EPSG3857;
+
+    switch (crs.code) {
+        case "EPSG:3395":
+            return L.CRS.EPSG3395;
+        case "EPSG:3857":
+            return L.CRS.EPSG3857;
+        case "EPSG:4326":
+            return L.CRS.EPSG4326;
+    }
+
+    return null;
+}
+
 function shapeToLatLngArray(shape) {
     var latlngs = [];
     shape.forEach(pts => {