绘制地图时后端数据是4326数据,前端leaflet默认是3857,如何做到全局数据转换
时间: 2023-08-11 22:25:28 浏览: 51
如果需要全局数据转换,可以使用leaflet的`L.CRS`(Coordinate Reference System,坐标参考系统)来实现。`L.CRS`是一个抽象类,可以通过继承它来自定义坐标参考系统。
首先,需要定义一个新的`L.CRS`子类,继承自`L.CRS.Simple`。在新的子类中,需要重写`L.CRS`的`transformation`方法,该方法用于将4326坐标系转换成3857坐标系,如下所示:
```javascript
L.CRS.MyCRS = L.extend({}, L.CRS.Simple, {
transformation: new L.Transformation(
0.000001, 0.0,
-0.000001, 0.0
),
// 定义4326投影方式
code: 'EPSG:4326',
projection: L.Projection.LonLat,
transformation: new L.Transformation(1, 0, -1, 0),
scale: function (zoom) {
return Math.pow(2, zoom);
},
zoom: function (scale) {
return Math.log(scale) / Math.LN2;
}
});
```
其中,`transformation`方法中的参数是转换矩阵,表示将4326坐标系转换成3857坐标系的转换方式。`code`和`projection`表示新定义的坐标参考系统的投影方式,`scale`和`zoom`方法返回给定缩放级别的比例尺和给定比例尺的缩放级别。
在定义完新的坐标参考系统之后,需要在创建地图对象时指定使用新的坐标参考系统:
```javascript
const map = L.map('map', {
crs: L.CRS.MyCRS
});
```
这样,在绘制地图时,无论传入的数据是4326还是3857,都会自动转换成新定义的坐标参考系统,从而实现全局数据转换。