VUE3中使用proj4，实现坐标投影转换

jack19982101

已于 2022-07-25 17:14:44 修改

阅读量3k

点赞数 3

分类专栏： proj4 文章标签： javascript vue.js 前端

于 2022-07-25 16:58:09 首次发布

本文链接：https://blog.csdn.net/jack19982101/article/details/125976968

版权

proj4 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.proj4 基本作用

官网地址：http://proj4js.org/，是这么说的，哈哈，英语不好，直接谷歌翻译

用于将坐标从一个坐标系转换到另一个坐标系的 JavaScript 库，包括基准面转换

2.基本方法

// npm安装
npm install proj4 --save

在这里插入图片描述
到此本以为可以正常使用了，但是意外还是出现了T_T

由于之前写项目的同事使用了vue3+ts+element-plus，直接npm install proj4 --save后，
在次运行项目，发现报出了element-plus的问题，当时简直一头雾水，使用了各种方式，都没能解决
在其他同事的提醒下，尝试新建一个项目，npm install proj4 --save了一下，找出安装的node_modules包，有如下三个
在这里插入图片描述
加到项目的node_modules下，并在package.json中，dependencies里加入proj4

"dependencies": {
    "proj4": "^2.8.0",
    ......
  },

下一步，在需要使用proj4的vue页面引入，这里proj4编译器可能提示找不到，先不用管

// 在需要的vue文件页面引用
import proj4 from 'proj4'

// 测试下~
console.log('proj4-->>>', proj4)

在这里插入图片描述
控制台中，proj4对象终于出现了！！！哈哈哈~

3.简单使用

刚刚使用，还比较小白，如有不对请指出~

先设置两个示例的基础投影坐标

// 北京54
const bj54 = proj4.defs("EPSG:4214", "+proj=longlat +ellps=krass +towgs84=44.745645865798,-100.37348291277885,-79.37086255592294,0.05323744846828353,1.6001266383655595,3.12522766589074,4.1736175275126327 +no_defs");
// 2000地理坐标系
const cgsc2000 = proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs");