一、CRS源码解析
CRS的定义就几个函数:
没错。你看出来了，其实这玩意就是提供了wgs84坐标系与目标坐标系之间转换的一种算法。因为leaflet内部都是用经纬度坐标系表达的坐标，所以leaflet内部表达所用的坐标系都是wgs84，也就是EPSG:4326。所以啊。不管是计算瓦片行列号，计算瓦片最终在地图上的位置，都需要对应的坐标系的定义进行转换。L.CRS就是定义了这样的一种转换算法。我们来看一下L.CRS.latLngToPoint内部实现：
没错。调用了this.projection.project()这个函数。那this.projection的定义呢？没错。单独使用L.CRS这个是无法实现坐标转换的。这只是一个模板，是一个壳，真正做转换的其实是this.projection做的事情。于是我们往下看，Leaflet到底在这个L.CRS里做了什么文章：
弄了一个Earth对象，继承了CRS的所有属性，新增了distance方法，用来计算两个经纬度之间的距离。这个我们过。
EPSG3857的定义不就出来了？果然在继承的对象中添加了projection对象。并将SphericalMercator赋值给了它。自然而然，我们就找到了EPSG:3857坐标系的投影算法：
到这里想必大家看明白了。为了验证我们的想法，马上去看了一下L.CRS提供的4326的算法。果然:结果如我们想象的一样：
自己转自己，当然就是随意赋值给自己拉。
二、拓展坐标系
proj4.js是一个开源的，专门用来进行坐标定义和坐标转换的工具。官档只有一个api:
proj4(fromProj, toProj, coord)
demo也很简单:
//2437自定义-->4326var proj1 = '+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=502000 +y_0=2000 +ellps=krass +towgs84=15.8,-154.4,-82.3,0,0,0,0 +units=m +no_defs'; var proj2 = '+proj=longlat +datum=WGS84 +no_defs';var projPoint = proj4(proj1, proj2, [x, y]);上面的 proj1 和proj2均可以在 epsg.io网站上获取到
如：获取 4326 的 proj数据
http://epsg.io/4326 在下面部门就可以有
基于proj4的leaflet扩展可以参考 https://gitee.com/seelingzheng/Proj4Leaflet
部分代码结构如下：
使用方式(案例来自Proj4Leaflet 的github仓库)
// RT90 with map's pixel origin at RT90 coordinate (0, 0)var crs = new L.Proj.CRS('EPSG:2400', '+lon_0=15.808277777799999 +lat_0=0.0 +k=1.0 +x_0=1500000.0 ' + '+y_0=0.0 +proj=tmerc +ellps=bessel +units=m ' + '+towgs84=414.1,41.3,603.1,-0.855,2.141,-7.023,0 +no_defs', { resolutions: [8192, 4096, 2048] // 3 example zoom level resolutions });var map = L.map('map', { crs: crs, continuousWorld: true, worldCopyJump: false});L.tileLayer('http://tile.example.com/example/{z}/{x}/{y}.png').addTo(map);Leaflet入门系列
leaflet 入门系列 hello world
Leaflet入门系列 图层管理控件
Leaflet入门系列 比例尺控件Scale
Leaflet入门系列 Zoom控件
Leaflet入门系列 属性控件
Leaflet入门系列 图标(marker) 样式和事件处理
LeafLet入门系列 图标(marker)属性配置
Leaflet入门系列 popup
LeafLet入门系列 常用插件
LeafLet入门系统 加载wkt文件
LeafLet入门系列 GeoJSON图层
LeafLet入门系列 加载矢量切片
LeafLet入门系列 借助 turfjs 绘制点线面缓冲区
LeafLet入门系列 leaflet 常用插件
LeafLet入门系列 调用百度瓦片地图服务
【Leaflet开发】
【Leaflet开发】L.Control 自定义一个Control
【Leaflet开发】Leaflet 类扩展
【Leaflet开发】L.GridLayer 扩展
【Leaflet开发】热力图
END
请：右下点在看
，右上点【···】分享
关注我
发现更多精彩