Angular项目中使用Leaflet与Proj4Leaflet配置EPSG投影失败求助

我来帮你一步步揪出这个投影配置无效的问题，看了你的代码，有几个关键细节没处理到位，咱们逐个修正：

• 导入方式错误
  你直接从Proj4Leaflet导入L是不对的，Proj4Leaflet是Leaflet的扩展插件，不是替代Leaflet的核心库。正确的导入顺序应该是先加载Leaflet核心，再引入Proj4Leaflet来扩展它的功能：

  import * as L from 'leaflet';
  import 'proj4leaflet'; // 这一步会把Proj的CRS扩展挂载到L.Proj对象上
  

• 地图初始化时未指定CRS
  你先创建地图再修改myMap.options.crs的方式不会生效——地图在初始化阶段就会基于CRS做坐标计算，事后修改配置不会触发重新初始化。应该在创建L.map时直接把CRS作为配置参数传入：

  const crs = new L.Proj.CRS('EPSG:3006', 
    '+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs', 
    { resolutions: [8192, 4096, 2048, 1024, 512, 256, 128], origin: [0, 0] }
  );
  
  // 初始化地图时直接传入crs配置
  const myMap = L.map('map', { crs: crs }).setView([46.2, 2], 6);
  

• 瓦片图层不兼容自定义CRS
  你用的是普通的L.tileLayer加载OSM瓦片，但OSM瓦片是基于EPSG:3857（Web墨卡托）投影的，和你配置的EPSG:3006不匹配，会导致瓦片偏移或加载错位。需要改用Proj4Leaflet提供的L.Proj.tileLayer，它能自动处理不同投影之间的坐标转换：

  L.Proj.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors',
    maxZoom: 18
  }).addTo(myMap);
  

• 坐标转换的小提醒
  你用setView传入的是WGS84经纬度[46.2, 2]，Proj4Leaflet理论上会自动帮你转换到EPSG:3006坐标，但如果还是有定位偏差，可以手动转换后再设置视图：

  const targetLatLng = L.latLng(46.2, 2);
  const projectedCoords = crs.projection.project(targetLatLng);
  myMap.setView(projectedCoords, 6);
  

按照上面的步骤修正后，你的EPSG:3006投影配置应该就能正常工作了。

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