如何使用proj4js为Leaflet创建CRS实现EPSG:3857转EPSG:3826

要在Leaflet中实现EPSG:3826与EPSG:3857的坐标转换并创建可用的自定义CRS，你需要借助proj4leaflet（Leaflet与Proj4js的桥接库）补充Leaflet所需的地图投影配置。以下是完整可运行的示例：

依赖准备 #

确保按顺序加载以下库：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/proj4@2.9.0/dist/proj4.js"></script>
<script src="https://unpkg.com/proj4leaflet@1.0.2/src/proj4leaflet.js"></script>

完整代码示例 #

// 1. 定义EPSG:3826的投影参数
proj4.defs('EPSG:3826', '+proj=tmerc +lat_0=0 +lon_0=121 +k=0.9999 +x_0=250000 +y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs');

// 2. 创建Leaflet可识别的自定义CRS
const crs3826 = new L.Proj.CRS(
    'EPSG:3826',
    proj4.defs('EPSG:3826'),
    {
        // 定义各缩放级别的分辨率（米/像素），可根据瓦片服务调整
        resolutions: [
            10000, 5000, 2500, 1250, 625, 312.5, 156.25,
            78.125, 39.0625, 19.53125, 9.765625, 4.8828125,
            2.44140625, 1.220703125, 0.6103515625, 0.30517578125
        ],
        // EPSG:3826坐标系下的瓦片原点
        origin: [0, 0],
        // 缩放级别范围，需与resolutions数组长度匹配
        maxZoom: 15,
        minZoom: 0
    }
);

// 3. 初始化地图，使用自定义CRS
const map = L.map('map', {
    crs: crs3826,
    center: [25.0330, 121.5654], // 台北市WGS84坐标，会自动转为EPSG:3826
    zoom: 10
});

// 4. 添加匹配EPSG:3826的瓦片图层（替换为你的瓦片服务地址）
L.tileLayer('https://your-tile-server/{z}/{x}/{y}.png', {
    attribution: '© 瓦片提供商'
}).addTo(map);

// 5. 坐标转换示例：EPSG:3826转EPSG:3857
const coord3826 = [250000, 2770000]; // EPSG:3826坐标
const coord3857 = proj4('EPSG:3826', 'EPSG:3857', coord3826);
console.log('转换后的EPSG:3857坐标:', coord3857);

关键说明 #

• L.Proj.CRS是proj4leaflet提供的适配类，负责将Proj4js的投影规则转为Leaflet可识别的CRS格式
• resolutions数组决定了每个缩放级别的地图精度，数值越小精度越高，必须与你的瓦片服务参数匹配
• 地图初始化时传入的经纬度坐标会被自定义CRS自动转换为EPSG:3826坐标系
• 第三方瓦片服务必须与EPSG:3826投影完全匹配，否则会出现地图偏移问题

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