Leaflet配置EPSG:3857坐标系报错TypeError问题求助

The error you're seeing comes from a critical mismatch between the coordinate format you're passing and what Leaflet expects by default—even when you specify a custom CRS. Let's break this down and fix it:

What's the Root Issue? #

You’re passing EPSG:3857 meter coordinates ([8378860.13, 1481133.311008498]) directly to the center option, but Leaflet’s center parameter always expects WGS84 latitude/longitude values (EPSG:4326, ranging roughly from -90 to 90 for latitude, -180 to 180 for longitude) by default.

When you pass a value like 8378860.13 as a latitude, Leaflet tries to process it as a valid geographic coordinate—which it isn’t—and throws the "coordinates must be finite numbers" error.

How to Fix It #

Option 1: Use Leaflet's Built-in EPSG:3857 CRS (Simplest) #

Leaflet already includes L.CRS.EPSG3857 (the default CRS for most web maps), so you don’t need to define a custom one with proj4leaflet here. Instead, convert your EPSG:3857 meter coordinates to WGS84 lat/lng using Leaflet’s built-in projection methods:

// EPSG:3857 uses [x, y] (east, north) order
var epsg3857Point = L.point(1481133.311, 8378860.13);
// Convert to WGS84 lat/lng
var latLng = L.CRS.EPSG3857.unproject(epsg3857Point);

// Initialize map with the converted lat/lng
var map = L.map('map', { 
  center: latLng, 
  zoom: 7 
});

Option 2: Use Your Custom CRS (If You Need It) #

If you still want to use your custom L.Proj.CRS definition, explicitly convert your meter coordinates to a Leaflet-compatible LatLng object using your CRS’s unproject method:

var customCRS = new L.Proj.CRS(
  'EPSG:3857',
  '+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs',
  { resolutions: [8192, 4096, 2048, 1024, 512, 256, 128], origin: [0, 0] }
);

// Convert EPSG:3857 meter coordinates to LatLng
var epsg3857Point = L.point(1481133.311, 8378860.13);
var latLng = customCRS.unproject(epsg3857Point);

// Initialize map with the converted lat/lng and custom CRS
var map = L.map('map', { 
  center: latLng, 
  zoom: 7, 
  crs: customCRS 
});

Key Note on Coordinate Order #

Remember that EPSG:3857 uses [x, y] (east/west, north/south) order, while Leaflet’s LatLng uses [latitude, longitude] order. Always double-check you’re passing values in the correct order to L.point.

内容的提问来源于stack exchange，提问作者mufasa