Angular中Leaflet CRS Simple加载非地理无瓦片图像效果不符问题

直接照搬原生JS环境的官方示例代码在Angular中运行出现显示偏差，不需要额外引入插件，按以下三点调整CRS和图层配置即可：

• CRS 配置必须在地图初始化根参数中传入
  禁止在地图实例创建完成后再修改crs属性，该操作不会触发坐标系重算，会直接导致坐标映射错乱。必须在ngAfterViewInit生命周期（确保地图容器已经渲染完成）中初始化地图时，将L.CRS.Simple写在配置对象的根级：

  import * as L from 'leaflet';
  ngAfterViewInit(): void {
    const map = L.map('mapContainer', {
      crs: L.CRS.Simple,
      minZoom: -5,
      zoomSnap: 0.1
    });
  }
  

• 图像/瓦片层的边界参数必须严格匹配图像像素尺寸
  CRS.Simple 以像素为坐标单位，y轴方向和常规网页坐标系一致向下为正，边界参数的格式为[[图像顶部y坐标, 图像左侧x坐标], [图像底部y坐标, 图像右侧x坐标]]，顺序写反、尺寸不匹配就会出现图像拉伸、倒置、偏移的问题。
  加载单张非地理图像优先使用L.imageOverlay而非通用瓦片层，配置完成后必须调用fitBounds让地图自动适配图像范围：

  // 替换为实际图像的像素宽高
  const imgWidth = 2000;
  const imgHeight = 1500;
  const imgBounds = [[0, 0], [imgHeight, imgWidth]];
  L.imageOverlay('你的图像资源路径', imgBounds).addTo(map);
  map.fitBounds(imgBounds);
  

• 补全Leaflet必要样式修正视图封装带来的偏移
  Angular 默认的视图模拟封装策略会干扰Leaflet的内置样式，必须给地图容器设置明确的宽高，同时确保项目中已经全局引入Leaflet的样式文件，否则会出现图层错位、控件偏移的问题：

  /* 组件样式文件中添加 */
  #mapContainer {
    width: 100%;
    height: 500px; /* 按实际需求设置高度，不能留空 */
  }
  

  若使用Angular CLI构建，需要在angular.json的styles配置项中加入leaflet的样式路径：node_modules/leaflet/dist/leaflet.css。

内容的提问来源于stack exchange，提问作者Umut Atagün