Vue+Leaflet修改坐标系

原创已于 2025-10-17 09:13:01 修改 · 164 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #leaflet #proj4.js

于 2025-10-17 09:08:04 首次发布

1.安装proj4与proj4Leaflet

npm install proj4 --save

npm install proj4leaflet

2.代码引入

import "proj4";
import "proj4leaflet"

3.获取投影参数

访问https://epsg.io/,输入自己想要的坐标系，进入页面。本次演示的是中国大地2000(EPSG:4490)

选择proj4.js导出，复制参数

4. leaflet配置坐标系投影并加载

let CRS_4490 = new L.Proj.CRS("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs", {
    resolutions:[
        1.40625,
        0.703125,
        0.3515625,
        0.17578125,
        0.087890625,
        0.0439453125,
        0.02197265625,
        0.010986328125,
        0.0054931640625,
        0.00274658203125,
        0.001373291015625,
        6.866455078125E-4,
        3.4332275390625E-4,
        1.71661376953125E-4,
        8.58306884765625E-5,
        4.291534423828125E-5,
        2.1457672119140625E-5,
        1.0728836059570312E-5,
        5.364418029785156E-6,
        2.682209064925356E-6,
        1.3411045324626732E-6
    ],
    origin: [115.66, 27.07],
    //bounds: L.bounds([117.75370429660006, 26.99449191557761,], [123.63262097540007, 32.2668788575695]),
    //这里可以有origin、transformation、scales、resulutions、bounds几个参数提供
    //选择，其中scales与resolutions不能同时配置
});

地图初始化时载入新的坐标系

 // 地图初始化
    const map = L.map("SceneLeafLet", {
        center: config.center,  //[纬度，经度]
        zoom: config.zoom,  //默认缩放层级和layer的最小缩放层级一致
        crs: CRS_4490,  //坐标系的代码
        zoomControl: false,  //去掉左上角缩放图标
        attributionControl: false,  //去掉右下角的logo
        logoControl: false,//超图logo
    });

5.补充