vue中使用coordtransform 互相转换坐标系

这篇具有很好参考价值的文章主要介绍了vue中使用coordtransform 互相转换坐标系。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

官方网站:https://www.npmjs.com/package/coordtransform

 在使用高德sdk时,其返回的坐标在地图上显示时有几百米的偏移,这是由于高德用的是 火星坐标(GCJ02),而不是wgs84坐标。为了消除偏移,将GCJ02转为wgs84即可,可通coordtransform库来转换。 

安装coordtransform

npm install coordtransform

引入

import coordtransform from 'coordtransform';

使用

安装完成后可以看到

vue中使用coordtransform 互相转换坐标系,vue.js,前端,javascript

根据自己的需要 选择方法 进行转换

例如我的JXRoad  是一个json文件 里面是取好的坐标系,只不过坐标是wgs84类型的,但项目中使用的是高德地图,这时把JXRoad 文件放入地图中就会出现偏移,这时就可以用到这个转换工具,高德地图所需要的坐标是国测局的也就是gcj02类型(又称火星坐标系)文章来源地址https://www.toymoban.com/news/detail-722046.html

// 将其坐标逐个转换为火星坐标系
    JXRoad.features.forEach(function (feature) {
      if (feature.geometry.type === "LineString") {
        feature.geometry.coordinates = feature.geometry.coordinates.map(
          function (coord) {
            var lngLat = coordtransform.wgs84togcj02(coord[0], coord[1]);
            return [lngLat[0], lngLat[1]];
          }
        );
      }
    });

// 转换调用
 coordtransform.wgs84togcj02()
// 高德的方法 geojson
    var geojson = new AMap.GeoJSON({
      geoJSON: JXRoad,
    });

到了这里,关于vue中使用coordtransform 互相转换坐标系的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 世界坐标系、相机坐标系和图像坐标系的转换

    之前只是停留在会用的阶段,一直没去读懂计算的原理,今天通读了大佬的文章,写的言简意赅,感谢感谢~~特此记录一下,仅用作个人笔记 贴链接,十分感谢~ https://blog.csdn.net/weixin_44278406/article/details/112986651 https://blog.csdn.net/guyuealian/article/details/104184551 将三维物体转换成照

    2023年04月15日
    浏览(63)
  • 相机坐标系、像素坐标系转换

    相机内参矩阵是相机的重要参数之一,它描述了相机光学系统的内部性质,例如焦距、光学中心和图像畸变等信息。在计算机视觉和图形学中,相机内参矩阵通常用于将图像坐标系中的像素坐标转换为相机坐标系中的三维坐标,或者将相机坐标系中的三维坐标投影到图像坐标

    2024年02月13日
    浏览(46)
  • 图像坐标系如何转换到相机坐标系。

    问题描述:图像坐标系如何转换到相机坐标系。 问题解答: 图像坐标系的定义: 图像坐标系是用于描述数字图像中像素位置的坐标系。图像坐标系的原点是相机光轴与成像平面的交点。X轴沿着成像平面的水平方向正向,Y轴沿着成像平面的垂直方向正向。 相机坐标系的定义

    2024年02月04日
    浏览(50)
  • 柱坐标系与直角坐标系的转换

    1.柱坐标系转化为直角坐标系:柱坐标系(r,φ,z)与直角坐标系(x,y,z)的转换关系 x=rcosφ y=rsinφ z=z 2.直角坐标系转化为柱坐标系:直角坐标系(x,y,z)与柱坐标系(r,φ,z)的转换关系: r= φ= z=z

    2024年02月11日
    浏览(40)
  • Cesium:CGCS2000坐标系的xyz坐标转换成WGS84坐标系的经纬高度,再转换到笛卡尔坐标系的xyz坐标

    作者:CSDN @ _乐多_ 本文将介绍使用 Vue 、cesium、proj4 框架,实现将CGCS2000坐标系的xyz坐标转换成WGS84坐标系的经纬高度,再将WGS84坐标系的经纬高度转换到笛卡尔坐标系的xyz坐标的代码。并将输入和输出使用 Vue 前端框架展示了出来。代码即插即用。 网页效果如下图所示, 一、

    2024年02月06日
    浏览(43)
  • ROS中RVIZ坐标系及TF坐标系转换

    RVIZ坐标系 X轴--红色 Y轴---绿色 Z轴---蓝色 YAW(偏航角)绕Z轴旋转 PITCH(俯仰角)绕Y轴旋转 ROLL(滚转角)绕X轴旋转 符合右手坐标系原则 利用TF进行坐标系转换 采用以下指令进行转换,其中frame_id child_frame_id 为两个坐标系的名称,通过以下命令可以确定两者的关系 通过在RVIZ中更改“

    2024年02月11日
    浏览(36)
  • (02)Cartographer源码无死角解析-(80) 核心要点→local坐标系、子图坐标系、切片坐标系、地图坐标系等相转换与联系

    讲解关于slam一系列文章汇总链接:史上最全slam从零开始,针对于本栏目讲解(02)Cartographer源码无死角解析-链接如下: (02)Cartographer源码无死角解析- (00)目录_最新无死角讲解:https://blog.csdn.net/weixin_43013761/article/details/127350885   文末正下方中心提供了本人 联系方式, 点击本人照片

    2024年02月16日
    浏览(44)
  • WGS84地球坐标系,GCJ02火星坐标系,BD09百度坐标系简介与转换 资料收集

    高性能、低功耗 GPS、北斗双模定位模块 STM32 GPS定位_为了维护世界和平_的博客-CSDN博客 秉火多功能调试助手上位机开源!共六款软件,学到你吐... , - 电脑上位机 - 野火电子论坛 - Powered by Discuz! https://www.firebbs.cn/forum.php?mod=viewthreadtid=11985fromuid=64 地图坐标系之间的转换(百度

    2024年02月11日
    浏览(42)
  • Unity坐标系的转换—世界坐标转为UI坐标

    直接调用WorldToAnchorPos,传入对应的参数返回UGUI坐标

    2024年04月13日
    浏览(42)
  • 三维坐标系转换

    一、首先需要判断坐标系是左手坐标系还是右手坐标系 首先将拇指作为X轴,食指作为Y轴,中指作为Z轴。观察(待判断的)坐标系对应哪只手对应的坐标系。然后根据对应的坐标系使用适配定则判断。右(左)手定则:用右(左)手的大拇指指向旋转轴的正方向,弯曲手指,

    2024年02月15日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包