基于Supermap for leaflet 的投影转换

1.前言

leaflet 自定义了EPSG4326 、EPSG3395、EPSG3857几个坐标系统，不足以满足我们平时工作的需要，所以一般要自定义坐标系统，并进行坐标转换。我们可以借助Proj4.js库来实现投影转换。

Proj4.js官网地址

2.查看坐标系信息

• https://spatialreference.org/
• https://epsg.io/：这个比较全面，支持坐标转换，并且提供各种形式的坐标系描述。

3.定义坐标系统

    // Proj4js.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs');
    // 定义坐标系
    const defs = Proj4js.defs("EPSG:4522", "+proj=tmerc +towgs84=0.0000,0.0000,0.0000 +lat_0=0 +lon_0=102 +k=1 +x_0=34500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs")
    const crs = L.Proj.CRS(
        'EPSG:4490',
        {
            def: defs,
            // 这几个参数可以不按照显示顺序书写，scales参数官网说明为比例尺数组，但是根据官网书写会报错
            /**
             * 起点和比例尺表参数必须填写，设置origin参数才能正确计算切片的位置，设置比例尺表才能在地图初始化时设置
             * 缩放级别，而zoom参数是生成地图必填参数
             */
            origin: [34558537.09, 2864655.41],
            // scales: 0.00000100000,
            // scales: [0.00000100000],
            // 比例尺因子
            scaleDenominators: [1000000, 500000, 250000, 125000, 62500, 31250, 15625, 7812, 3906, 1953],
            // 分辨率数组
            resolutions: [
                1000000.0,
                500000.0,
                250000.0,
                125000.0,
                62500.0,
                31250.0,
                15625.0,
                7812.5,
                3906.25,
                1953.12
            ],
        }
    )

    /**
     * map中center参数为leaflet经纬度格式
     */
    // 初始化地图信息
    var map = L.map('map', {
        crs: crs,
        center: [24.904889, 102.801067],
        // maxZoom: 10,
        zoom: 8
    });
    // 添加图层
    const layer = L.supermap.tiledMapLayer(url, { noWrap: true });
    layer.addTo(map)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

4.坐标转换

leaflet CRS中有两个投影方法，project用于将地理坐标转换为投影坐标，而unproject用于将投影坐标转换为地理坐标。

4.1 project

project(<LatLng> latlng) 传入（纬度，经度）格式的坐标，返回类型为 Point
1

4.2 unproject

unproject(<Point> point) 传入point类型，返回类型为 LatLng
1