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

news2024/11/20 0:28:13

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

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

安装coordtransform

npm install coordtransform

引入

import coordtransform from 'coordtransform';

使用

安装完成后可以看到

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

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

// 将其坐标逐个转换为火星坐标系
    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,
    });

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1112270.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

KubeSphere安装mysql8

需要持久化储存数据的,建立有状态服务。 无状态服务是不会持久化的,重启就归零 KubeSphere 创建自建应用后,创建有状态服务,但是自己应用的有状态服务不能外放端口,需要在服务哪里删除pod,在创建负载指定相…

微信小程序会议OA系统其他页面

前言: 及上一文章:https://blog.csdn.net/djssubddbj/article/details/133895170?spm1001.2014.3001.5501我们所写的会议OA的首页,在这个上面我们继续完成我们的会议OA系统,这是我们的本期所要完成的页面 自定义组件 微信小程序…

基于MATLAB的GPS卫星绕地运行轨迹动态模拟仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 Prn NavData(PRNS_SEL,1);%识别导航数据中的PRNiode NavData(PRNS_SEL,11);%企…

客户端post请求,服务器收到{}数据解决方法

当我们发起登录请求时,后台接收到的为{}数据 原因:传送过去的对象格式不对 解决方案: 引入qs npm install qs 在data中格式化数据 const res await axios({url:http://127.0.0.1:3000/post,method:post,data:Qs.stringify({username:te…

【试题024】C语言强制转型小例题

1.题目&#xff1a;设int a7; float x2.5,y4.7;,则表达式x3%(int)(xy)/4的值是 &#xff1f; 2.代码分析&#xff1a; #include <stdio.h> int main() { //设int a7; float x2.5,y4.7;,则表达式x3%(int)(xy)/4的值是 &#xff1f;int a 7;float x 2.5, y 4.7;printf…

持续集成工具jenkins操作

安装Jenkins 下载jenkins安装包 linux上下载jenkins失败 开始在windows上安装jenkins 1、先安装JDK https://jingyan.baidu.com/article/fdbd4277dd90f0b89e3f489f.html 免安装版本JDK只需要解压配置环境变量即可 2、安装Jenkins 参考文档&#xff1a; https://www.cnb…

Spring framework Day24:定时任务

前言 在我们的日常生活和工作中&#xff0c;时间管理是一项至关重要的技能。随着各种复杂任务的增加和时间压力的不断增加&#xff0c;如何更好地分配和利用时间成为了一项迫切需要解决的问题。在这样的背景下&#xff0c;定时任务成为了一种非常有效的解决方案。 定时任务&a…

在中国,技术到底有多有用?

&#x1f64c;秋名山码民的主页 &#x1f602;oi退役选手&#xff0c;Java、大数据、单片机、IoT均有所涉猎&#xff0c;热爱技术&#xff0c;技术无罪 &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; 获取源码&#xff0c;添加WX 目录 前言1.…

SpringBoot结合Druid实现SQL监控

1、前言 SpringBoot不用我多介绍了吧&#xff0c;目前后端最流行的框架。后端开发人员最基本的要求。 Druid数据库连接池&#xff0c;出自国内 ”java圣地" 阿里巴巴。 Druid是一个用于大数据实时查询和分析的高容错、高性能开源分布式系统&#xff0c;旨在快速处理大规模…

迅为RK3568开发板RTMP推流之视频监控

1 搭建 RTMP 媒流体服务器 nginx-rtmp 是一个基于 nginx 的 RTMP 服务模块&#xff0c;是一个功能强大的流媒体服务器模块&#xff0c; 它提供了丰富的功能和灵活的配置选项&#xff0c;适用于构建各种规模的流媒体平台和应用。无论是搭建实时视频直播平台、点播系统或多屏互…

【Qt】常见控件

文章目录 按钮组QListWidget列表容器TreeWidget树控件TableWidget 表格控件其它控件介绍下拉框QLabel显示图片和动图 自定义控件封装 按钮组 QPushButton 常用按钮 QToolButton 工具按钮&#xff1a; 用于显示图片 如果想显示文字&#xff1a;修改风格&#xff1a;toolButto…

分类预测 | MATLAB实现基于BiGRU-AdaBoost双向门控循环单元结合AdaBoost多输入分类预测

分类预测 | MATLAB实现基于BiGRU-AdaBoost双向门控循环单元结合AdaBoost多输入分类预测 目录 分类预测 | MATLAB实现基于BiGRU-AdaBoost双向门控循环单元结合AdaBoost多输入分类预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于BiGRU-AdaBoos…

Hadoop3教程(二十五):Yarn的多队列调度器使用案例

文章目录 &#xff08;136&#xff09;生产环境多队列创建&好处&#xff08;137&#xff09;容量调度器多队列提交案例如何创建多个队列如何向指定队列提交任务 &#xff08;138&#xff09;容量调度器任务优先级&#xff08;139&#xff09;公平调度器案例参考文献 &#…

【Java 进阶篇】JavaScript 表格全选案例详解

在网页开发中&#xff0c;表格&#xff08;Table&#xff09;是一种常用的HTML元素&#xff0c;用于以表格形式展示数据。对于包含大量数据的表格&#xff0c;提供一个全选复选框可以极大地提高用户体验&#xff0c;方便用户一次性选择或取消选择所有项目。本篇博客将详细介绍如…

Mac电脑版交互式原型设计软件 Axure RP 8汉化 for mac

Axure RP 8是一款专业快速原型设计软件&#xff0c;它主要用于定义需求、设计功能和界面等&#xff0c;适用于商业分析师、信息架构师、产品经理、IT咨询师、用户体验设计师、交互设计师和UI设计师等用户。 该软件可以快速、高效地创建原型&#xff0c;并支持多人协作设计和版…

彩虹云商城自助发卡商城-卡卡云主题

彩虹云商城自助发卡商城-卡卡云主题 全新SUP模板/知识付费模板/卡卡云模板&#xff0c;首页美化&#xff0c;登陆页美化修复了pc端显示不正常的问题。 将这俩个数据库文件导入数据库。 其他的直接导入网站根目录覆盖就好。 PS&#xff1a;若首页显示不正常&#xff1a;请去…

MYSQL学习笔记2-mysql数据文件

1.mysql数据文件类型&#xff1f;5.7和8的一些区别 创建一个anadb的数据库&#xff1a;在mysql安装目录下data目录下会产生一个同名的文件夹 建表&#xff1a;图为mysql57的数据文件图&#xff0c;不同的引擎建表会产生不同后缀名的文件 &#xff0c;mysql5.5以上默认使用 inno…

新手指南|如何快速参与Moonbeam Ignite

Moonbeam Ignite是社区熟悉的有奖链上交互活动&#xff0c;将有300万枚GLMR作为生态激励注入Moonbeam生态系统&#xff0c;体验MoonbeamMoonbeam生态的应用即可获取相应Token奖励。Beamex/Beamswap、Moonwell和Gamma作为首批参与Moonbeam Ignite的三家项目方&#xff0c;将在活…

机器学习(23)---Boosting tree(课堂笔记)

文章目录 一、知识记录二、题目2.1 题目12.2 题目22.3 答案书写 一、知识记录 二、题目 2.1 题目1 2.2 题目2 2.3 答案书写

一百九十一、Flume——Flume配置文件各参数含义(持续完善中)

一、目的 在实际项目的开发过程中&#xff0c;不同Kafka主题的数据规模、数据频率&#xff0c;需要配置不同的Flume参数&#xff0c;而这一切的调试、配置工作&#xff0c;都要建立在对Flume配置文件各参数含义的基础上 二、Flume各参数及其含义 &#xff08;一&#xff09;…