投影

Leaflet 有 3 个较为关键的对象，CRS，Earth，EPSG3857

API

CRS

定义了一些基础方法，例如 project，unproject 等等

export const CRS = {
  latLngToPoint(latlng, zoom) {
    const projectedPoint = this.projection.project(latlng),
      scale = this.scale(zoom);

    return this.transformation._transform(projectedPoint, scale);
  },

  // ......

  project(latlng) {
    return this.projection.project(latlng);
  },

  // ......

  unproject(point) {
    return this.projection.unproject(point);
  },
};

Earth

Earth 继承自 CRS，定义了该投影的经纬度起始结束位置，半径等等

const Earth = Util.extend({}, CRS, {
  // 投影的经纬度起始和结束
  wrapLng: [-180, 180],

  // 地球半径
  R: 6371000,

  distance(latlng1, latlng2) {
    const rad = Math.PI / 180,
      lat1 = latlng1.lat * rad,
      lat2 = latlng2.lat * rad,
      sinDLat = Math.sin(((latlng2.lat - latlng1.lat) * rad) / 2),
      sinDLon = Math.sin(((latlng2.lng - latlng1.lng) * rad) / 2),
      a =
        sinDLat * sinDLat + Math.cos(lat1) * Math.cos(lat2) * sinDLon * sinDLon,
      c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    return this.R * c;
  },
});

EPSG3857

EPSG3857 继承自 Earth 定义了具体的投影方法，此 projection 是 SphericalMercator，即 Web 墨卡托投影

export const EPSG3857 = Util.extend({}, Earth, {
  code: "EPSG:3857",
  projection: SphericalMercator,

  transformation: (function () {
    const scale = 0.5 / (Math.PI * SphericalMercator.R);
    return toTransformation(scale, 0.5, -scale, 0.5);
  })(),
});

具体的 Web 墨卡托投影的计算公式可以参考 web-墨卡托投影