leaflet坐标系的设置和切换
leaflet坐标系的设置
提示：
文章目录
- leaflet坐标系的设置
- 前言
- 一、如何设置leaflet坐标系？
- 扩充：图片的数据叠加坐标系问题
- 二、如何切换leaflet坐标系
- 总结
前言
本篇文章主要是leaflet的应用讲解，最好先对leaflet和坐标系有一定的了解。
坐标系相关可以参考我之前写的文章 https://blog.csdn.net/weixin_42066016/article/details/120371884?spm=1001.2014.3001.5501
一、如何设置leaflet坐标系？
这次项目接到的任务是要加载和展示墨卡托和兰伯特坐标系的数据。首先要做的就是能正常加载这两个坐标系数据。首先翻翻http://epsg.io，最后确定墨卡托用最常见的3857，兰伯特用3415（一个中国南海的坐标系）。
ps：最好找一个懂GIS的人来确定坐标系，或者让甲方客户甚至的领导决定，要不然自己挖的坑只能自己填。
坐标系确定后，和所有涉及GIS，RS，地图相关的人员确认和统一，不然各个坐标系的数据汇总收集管理应用将是个大问题。
这里我们不做leaflet的基础培训，如果对leaflet还不了解话，建议先去学习一下基础概念和操作后再看本篇文章。
Leaflet在创建地图对象时可以设置坐标系参数crs，我们看下文档中是怎么描述这个参数的。
作者也是在这里进行了吐槽，“不知道啥意思，你就别动它”
可以看到leaflet给的默认值是EPSG3857，很常用不在赘述。网络上的很多地图服务都是3857坐标系的，例如天地图，谷歌地图，高德地图等。这样其实我的第一个目标就已经完成了，剩下的就是设置3415坐标系。那么我们直接设置crs为L.CRS.EPSG3415是不是就可以呢？当然不行，因为leaflet里面内置了3857和4326，而其他的坐标系都需要我们自定义。
这里我们需要引入leaflet插件Proj4Leaflet，来实现功能，具体步骤如下。
第一步，下载插件引入。
第二步，在http://epsg.io中搜索要加载的坐标系。
第三步，把对应的参数复制粘贴出来，填入对应属性。如下图（Export选择PROJ.4，截图没有截全）。
有同学要问resolutions是什么？是比例尺参数，不懂的话可以直接复制粘贴就好。
L.CRS.EPSG3415 = new L.Proj.CRS('EPSG:3415',
'+proj=lcc +lat_1=18 +lat_2=24 +lat_0=21 +lon_0=114 +x_0=500000 +y_0=500000 +ellps=WGS72 +towgs84=0,0,1.9,0,0,0.814,-0.38 +units=m +no_defs',
{
resolutions: (function () {
var level = 17
var res = []
res[0] = Math.pow(2, level)
for (var i = 1; i < level - 5; i++) {
res[i] = Math.pow(2, (level - i))
}
return res
}()),
origin: [2752609.29, -11909708.50],
bounds: L.bounds([14068705.421709407, -29736152.4826897], [-16397006.661909804, 30735400.422382265])
})
第四步，创建map时引用创建的坐标系。
this.map = L.map(divID, {
crs: L.CRS.EPSG3415,
center: options.center, // 地图中心
zoom: options.zoom, //缩放比列
zoomControl: false, //禁用 + - 按钮
doubleClickZoom: false, // 禁用双击放大
attributionControl: false, // 移除右下角leaflet标识
})
到此地图初始化工作完毕。Leaflet方便的一点是，向地图添加矢量数据（例如marker，Polyline等），坐标如果是4326的经纬度，会自动转换坐标系。
Leaflet中添加天地图和矢量线边界（3857）
Leaflet中添加矢量线边界（3415）
到此leaflet坐标系设置完成，其实代码工作量很少，主要是涉及坐标系调研和选取是十分重要的，由于互联网上没有相关的3451的底图数据，那么只能自己处理一些数据然后使用geoserver发布出来使用了。
扩充：图片的数据叠加坐标系问题
坐标系转换会出现各种奇奇怪怪的问题，这个只是我遇到的其中之一，拿出来和大家分享一下。
我们的项目需要叠加卫星产品到地图上，如图。
这个图片数据是遥感小妹用算法处理好，然后提供给我图片和图片的bounds，然后我这边使用ImageOverlay就可以贴到地图上。
/*
添加图片图层
imageUrl:需要加载的图片url
imageBounds：图片的外边界 例如：[[40.712216, -74.22655], [40.773941, -74.12544]];
other:其他属性例如 透明度等
*/
layer = L.imageOverlay(
imageUrl,
imageBounds,
{ other, pane: 'imageOverlayPane' }
).addTo(this.map);
例如一些软件的天气云图就是通过这种方法实现的，这些数据都是遥感算法人员提供的。
这种数据如果要用3415加载，光给两个bounds坐标和3857坐标系数据可是不行的，因为图片数据没有地理信息，无法进行坐标系转换的工作。带地理信息的图片数据叫tif栅格数据，这种数据很大，就我们的项目而言，同样的图片数据png为2mb，而tif为10mb，这对浏览器加载是十分不友好的。
于是在数据生产时，生成了两份，一份3857（上图），一份3415。遥感工程师说bounds没变，我开开心心去加的时候发生了问题。下图。
怎么会歪了呢，我还再三和遥感小妹确认，甚至要来了原始tif数据，自己到GIS软件处理。后来发现是形变导致的bounds也发生了改变。
Leaflet添加图片图层需要添加[X1,Y1]和[[X2,Y2]，根据上面两张图对比我们发现投影转换后[X1,Y1]和[[X2,Y2]已经变成了[X3,Y3]和[[X4,Y4]，所以贴上去会产生偏移和形变。我想到的解决办法是通过打点采样四条边，找到最大最小的X和Y，然后组合成[X1,Y1]和[[X2,Y2]，虽然还是会有误差（可以加采样点减少误差），但是在大范围内几乎看不出来明显偏移和形变。
/*
添加图片图层
id:图层id，用于清除。
imageUrl:需要加载的图片url
imageBounds：图片的外边界 例如：[[40.712216, -74.22655], [40.773941, -74.12544]];
other:其他属性例如 透明度等
*/
LMap.prototype.addImageLayer = function (id, imageUrl, imageBounds, other) {
var layer = null;
if (this.epsg == L.CRS.EPSG3857 || !this.epsg) {
this.imageLayers.forEach((e) => {
if (e.id == id)
return false;
})
layer = L.imageOverlay(
imageUrl,
imageBounds,
{ other, pane: 'imageOverlayPane' }
).addTo(this.map);
} else {
let bounds = [...imageBounds[0], ...imageBounds[1]]
let coordinatesX = [];
let coordinatesY = [];
let valueX = bounds[1] - bounds[3]
let valueY = bounds[0] - bounds[2]
//插值计算bounds
for (var i = 0; i < 4; i++) {
for (var j = 0; j <= 10; j++) {
let point = []
if (i == 0) point = proj4("EPSG:4326", this.epsg.code, [bounds[1] - valueX * j * 0.1, bounds[0]]);
else if (i == 1) point = proj4("EPSG:4326", this.epsg.code, [bounds[1], bounds[0] - valueY * j * 0.1]);
else if (i == 2) point = proj4("EPSG:4326", this.epsg.code, [bounds[3] + valueX * j * 0.1, bounds[2]]);
else if (i == 3) point = proj4("EPSG:4326", this.epsg.code, [bounds[3], bounds[2] + valueY * j * 0.1]);
coordinatesX.push(point[0]);
coordinatesY.push(point[1]);
}
}
//排序
coordinatesX.sort(function (a, b) {
return b - a;
})
coordinatesY.sort(function (a, b) {
return b - a;
})
layer = L.Proj.imageOverlay(
imageUrl,
L.bounds(
//-4655709.0378614282,5687384.6802430525
[coordinatesX[coordinatesX.length - 1], coordinatesY[0]],
// 3571797.5203373069,-1871514.4962498695
[coordinatesX[0], coordinatesY[coordinatesY.length - 1]]
)
, { ...other, pane: 'imageOverlayPane' }
).addTo(this.map);
}
this.imageLayers.push({ id: id, layer: layer })
}
二、如何切换leaflet坐标系
Leaflet中并没有切换坐标系的方法，我想到的方法是销毁现在的地图，记录销毁前的地图层级（zoom），地图中心点，然后重新添加销毁前的数据（marker，Polyline等）和设置zoom，center等参数达到“切换的效果”。
/*
初始化地图
divID:地图所在div的id。
*/
LMap.prototype.initMap = function (divID, options = {}, mouseEvent) {
options.zoom = options.zoom ? options.zoom : 6;
options.epsg = options.epsg ? options.epsg : L.CRS.EPSG3857;
options.center = options.center ? options.center : [39.905033413167, 116.40191241];
this.crs = options.epsg;
this.map = L.map(divID, {
crs: options.epsg,
center: options.center, // 地图中心
zoom: options.zoom, //缩放比列
zoomControl: false, //禁用 + - 按钮
doubleClickZoom: false, // 禁用双击放大
attributionControl: false, // 移除右下角leaflet标识
})
}
/*
切换地图坐标系，切换后，底图数据，image数据清除需要重新添加
crs:坐标系参数，具体参考crs变量
isSaveData:是否保留添加的矢量数据，ture保留，默认false
*/
LMap.prototype.changeCrs = function (crs, isSaveData) {
let options = {
center: this.map.getCenter(),
zoom: this.map.getZoom(),
epsg: L.CRS[crs]
}
this.map.remove();
this.initMap(this.divID, options, this.mouseEvent)
if (isSaveData) {
this.vectorLayers.forEach(i => {
i.addTo(this.map);
})
} else {
this.vectorLayers = []
}
this.imageLayers = []
this.baseLayer = []
this.wmsLayers = []
}
LMap是我自己面向对象封装的类。imageLayers ，baseLayer ，wmsLayers 用于存储各种图层数据。方便查找和删除。vectorLayers 存储矢量数据。
总结
参考了很多其他大神的文章，写完忘记地址了，如果大神看到了，私信我一下，我会把文章链接挂在下面。相关主要代码都已经展示。后面会把代码整成一个小demo放出来，啥时候嘛，最近有点懒。。