DataV动态GPS数据源在高德地图上坐标转换方案

本文涉及的产品
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 随着物联网IoT的蓬勃发展,大量数据上云需要展示。DataV是一款数据可视化利器,轻轻松松不用搭建服务器,即可搭建一个精美的数据大屏。 对于地图坐标展示,DataV目前的卫星图使用高德的坐标系,即国测局坐标(GCJ-02)。

随着物联网IoT的蓬勃发展,大量数据上云需要展示。DataV是一款数据可视化利器,轻轻松松不用搭建服务器,即可搭建一个精美的数据大屏。

对于地图坐标展示,DataV目前的卫星图使用高德的坐标系,即国测局坐标(GCJ-02)。对于GPS,即WSG84坐标系经纬度需要转GCJ-02坐标才能在地图上正确展示。

这里分享一个DataV动态GPS数据源在高德地图上坐标转换方案。

举一个例子,有一个定位卡,通过Link WAN低功耗广域网平台,将数据上报流转存到了TableStore, DataV从TableStore中获取数据,并解析出GPS经纬度信息,在地图上展示。

该定位卡的GPS坐标是30.13439,120.0755

定位卡所在位置如图所示:
Screen Shot 2018-09-04 at 8.49.57 PM.png

如果将该坐标直接对接到DataV的地图上,将会有较大的偏差,如下图:
Screen Shot 2018-09-05 at 3.24.52 PM.png

因此需要做一个坐标转换,将WSG84坐标系经纬度需要转GCJ-02坐标。在高德开放平台上,可以找到在线的API提供调用:

但是在DataV里的脚本里做API调用还是比较麻烦,咨询了DataV的同学@云驿,提供了一份开源的转换方法,直接本地就可以根据算法完成转换。

脚本放在数据源的过滤器中,如下是包括了简化的转换方法和过滤脚本的代码,如有DataV动态GPS数据源在高德地图上坐标转换需求,可以复制以下简化的转换方法:

// 以下是简化的转换方法wgs84togcj02
var PI = 3.1415926535897932384626;
var a = 6378245.0;
var ee = 0.00669342162296594323;

function transform_latitude(lng, lat) {
  var lat = +lat;
  var lng = +lng;
  var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
  ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
  ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
  ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
  return ret
};

function transform_longitude(lng, lat) {
  var lat = +lat;
  var lng = +lng;
  var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
  ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
  ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
  ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
  return ret
};

/**
* WGS84转GCj02
* @param lng
* @param lat
* @returns {*[]}
*/
function wgs84togcj02(lng, lat) {
  var lat = +lat;
  var lng = +lng;
  var dlat = transform_latitude(lng - 105.0, lat - 35.0);
  var dlng = transform_longitude(lng - 105.0, lat - 35.0);
  var radlat = lat / 180.0 * PI;
  var magic = Math.sin(radlat);
  magic = 1 - ee * magic * magic;
  var sqrtmagic = Math.sqrt(magic);
  dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
  dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
  var mglat = lat + dlat;
  var mglng = lng + dlng;
  return [mglng, mglat]
};

// 以下是过滤脚本,调用wgs84togcj02转换方法
var output = [];

for (var item in data) {
  var d = { "time": "", "longitude": "", "latitude": "", "data": "1", "type": "1" };
  var LocatorPayLoadData = data[item].LocatorPayLoadData;

  var longitude_degree = parseInt(LocatorPayLoadData.substring(6, 10), 16);
  var longitude_minute = parseInt(LocatorPayLoadData.substring(10, 12), 16);
  var longitude_second = parseInt(LocatorPayLoadData.substring(12, 16), 16);
  var latitude_degree = parseInt(LocatorPayLoadData.substring(16, 18), 16);
  var latitude_minute = parseInt(LocatorPayLoadData.substring(18, 20), 16);
  var latitude_second = parseInt(LocatorPayLoadData.substring(20, 24), 16);
  var date = new Date(parseInt(data[item].time));
  var year = date.getFullYear(),
    month = date.getMonth() + 1,//月份是从0开始的
    day = date.getDate(),
    hour = date.getHours(),
    min = date.getMinutes(),
    sec = date.getSeconds();
  var newTime = year + '-' +
    (month < 10 ? '0' + month : month) + '-' +
    (day < 10 ? '0' + day : day) + ' ' +
    (hour < 10 ? '0' + hour : hour) + ':' +
    (min < 10 ? '0' + min : min) + ':' +
    (sec < 10 ? '0' + sec : sec);
  d.time = newTime;
  d.longitude = longitude_degree + longitude_minute / 60 + longitude_second / (3600 * 100);
  d.latitude = latitude_degree + latitude_minute / 60 + latitude_second / (3600 * 100);
  var longitude_wgs84 = d.longitude.toFixed(6);
  var latitude_wgs84 = d.latitude.toFixed(6);
  var result = wgs84togcj02(longitude_wgs84, latitude_wgs84);
  d.longitude = result[0].toFixed(6)
  d.latitude = result[1].toFixed(6)

  output.push(d);
}

return output;

术语

WSG84

世界大地测量系统(英语:World Geodetic System, WGS)是一种用于地图学、大地测量学和导航(包括全球定位系统)的大地测量系统标准。WGS包含一套地球的标准经纬坐标系、一个用于计算原始海拔数据的参考椭球体,和一套用以定义海平面高度的引力等势面数据。

WGS的最新版本为WGS 84(也称作WGS 1984、EPSG:4326),1984年定义、最后修订于2004年。[1]之前的版本有WGS 72、WGS 66、WGS 60。全球定位系统使用的就是WGS 84参考系。

GCJ-02

国测局02年发布的坐标体系。又称“火星坐标”。在中国,必须至少使用GCJ-02的坐标体系。比如谷歌,腾讯,高德都在用这个坐标体系。

参考

鸣谢

感谢DataV的同学@云驿 的耐心指导和提供的转换库:zhttps://github.com/wandergis/coordtransform-cli

感谢前端同学@伊禾 的代码简化指导。

相关实践学习
DataV Board用户界面概览
本实验带领用户熟悉DataV Board这款可视化产品的用户界面
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
目录
相关文章
|
7月前
|
数据可视化
宜搭dataV的ECHART图形控件加载数据源,怎样设置才能够实现两个曲线对比分析
宜搭dataV的ECHART图形控件加载数据源,怎样设置才能够实现两个曲线对比分析
|
自然语言处理 数据可视化 IDE
【通用行业开发部】DataV和 UE4(虚拟引擎)的大屏交互升级方案
越来越多的大屏项目 不在满足简简单单的数据展示效果,要求越来越高的客户需求也促进大屏的定位和解决方案升级。 在阿里云的DataV数据可视化大屏的基础上,与UE4(虚拟引擎)完成跨行业的结合,带来不一样的视觉效果和交互体验,使大屏的应用效果急速扩展,对应的系统方案架构也带来不一样的挑战! 这篇文章带领大家了解DataV和UE4之间的一些奇妙设计。
【通用行业开发部】DataV和 UE4(虚拟引擎)的大屏交互升级方案
|
数据可视化
DataV 配置 OTS 数据源
DataV 配置 OTS 数据源
3664 0
|
数据可视化 数据库 关系型数据库
DataV 配置 VPC 数据源
DataV 配置 VPC 数据源
7939 0
|
JavaScript 数据可视化
DataV实战#2 - 无交互事件组件数据源查询时间变量传递技巧
对于类似翻牌器这样的带交互事件组件数据源查询时间变量传递,可以通过时间轴配置交互事件进行传递配置。但对于类似仪表盘、水位图、轮播饼图这样的无交互事件组件,该配置方式无法传入时间变量。 查询DataV官方文档无果,请教DataV专家@子墨, 找到了一个解决方式,记录如下,以供需要的同学参考。 该方案的使用数字翻牌器组件作为传递时间变量。 ## 配置数字翻牌器 第一步,配置数字翻牌
2199 0
|
监控 数据可视化 数据库
DataV 使用时间轴实现实时动态查询数据库、sls 等数据源
DataV 使用时间轴实现实时动态查询数据库、sls 等数据源
3759 0
|
数据可视化
DataV 配置 VPC 数据源教程
DataV 现在支持使用 VPC的数据库配置数据源啦。
2097 0
|
5月前
|
数据可视化 前端开发 数据挖掘
身怀绝技的开发者们,快来DataV玩转可视化组件,开启数据新视界!
理论学习之后,实践是检验知识的最好方式。建议你动手创建一个DataV项目,将所学的知识和技能应用到实际开发中。通过实践,你可以更好地理解和掌握DataV的使用技巧,并发现其中的乐趣和挑战。
|
6月前
|
数据可视化 搜索推荐 atlas
DataV Atlas深度解析与实战应用:打造个性化地理信息可视化
阿里云DataV的Atlas功能专注于地理信息可视化,提供范围选择、边界生成和层级展示等工具,助用户轻松创建专业地图应用。通过代码示例展示了如何用Geo组件展示中国省份销售数据,强调了数据安全和性能优化的重要性。DataV Atlas简化了复杂地理信息的展示,提升了数据洞察的直观性和美感。【6月更文挑战第19天】
578 3
|
7月前
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
529 2
react+datav+echarts实现可视化数据大屏