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

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");

用如下方式，就可以使用Proj4做投影转换了

proj4('EPSG:4326', cgsc2000, [116, 39])

分别是，proj4(当前投影, 转换到的投影, [经度, 纬度])

VUE3中使用proj4，实现坐标投影转换相关推荐

proj4经纬度bl转换xy_在Web客户端中基于Proj4实现坐标转换
当鼠标滑过地图,我们会扫一眼鼠标的地理位置,至少要能看到经纬度,好确认当前的范围和地物是否处在正常的位置.这对于C/S应用来说,是最为常见的辅助功能,即使是在B/S中,这似乎也不是难事,比如谷歌地图等 ...
uniapp vue3中引入外部3D模型(适配App)
uniapp vue3中引入外部3D模型(适配App) 主要方式是通过renderjs来实现的, 因为使用threejs的话需要获取页面上的dom节点, 然后需要把threejs创建出来的canvan ...
vue3中，echarts使用（一）——柱状图和折线图的结合使用
vue3中,echarts使用(一)--柱状图和折线图的结合使用官网:https://echarts.apache.org/zh/index.html 官网示例:https://echarts.ap ...
对于如何删除redis中geo存入的坐标
redis中geo 就是将坐标存在reids 中可以进行判断坐标之间的距离,判断坐标及公里内的坐标. 但是由于geo大部分博客都是添加geo 进行判断,但是没有教大家怎么删除,对于坐标点比较多的话会 ...
web前端培训分享：使用Dplayer实现Vue3中的视频及弹幕播放
Dplayer是一款上手简单,功能强大的HTML5视频播放器,我们可以使用它,快速在普通HTML.Vue.React中实现视频播放的功能需求.Dplayer同时也提供了目前各大视频站都在使用的弹幕功能 ...
中input怎么接受后台传值_[vue3]如何在vue3中优雅地使用vmodel？
Vue中的数据绑定绑定数据有三种方式: 插值,也就是{{name}}的形式,以文本的形式和实例data中对应的属性进行绑定 v-bind v-model v-bind eg:v-bind:class ...
Webpack的代码分包Vue3中定义异步组件分包refs的使用
一.默认的打包过程: 默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直接依赖的,那么webpack在打包时就会将组件模块打包到一起(比如一个app.js文件中): 这个时候随着项 ...
ArcGIS中Shapefile和Geodatabase坐标容差的问题
转自原文 ArcGIS中Shapefile和Geodatabase坐标容差的问题 ArcGIS中,Shapefile文件是没有容差设置的,所以无论什么单位的坐标写入shapefile文件,都不存在容差 ...
lisp读点坐标绘多义线_AutoCAD中多义线的坐标标注
0引言在基于AutoCAD的图形中,经常需要将图形中某些点的坐标标注在图面上,常用的方法是通过选择点的形式进行坐标标注,这对于零星的标注几个点的坐标时的确是很好的方法,因为这种方法对于每一个坐标都采用 ...

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

1.proj4 基本作用

2.基本方法

3.简单使用

VUE3中使用proj4，实现坐标投影转换相关推荐

最新文章

热门文章