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 数据源
3666 0
|
数据可视化 数据库 关系型数据库
DataV 配置 VPC 数据源
DataV 配置 VPC 数据源
7949 0
|
JavaScript 数据可视化
DataV实战#2 - 无交互事件组件数据源查询时间变量传递技巧
对于类似翻牌器这样的带交互事件组件数据源查询时间变量传递,可以通过时间轴配置交互事件进行传递配置。但对于类似仪表盘、水位图、轮播饼图这样的无交互事件组件,该配置方式无法传入时间变量。 查询DataV官方文档无果,请教DataV专家@子墨, 找到了一个解决方式,记录如下,以供需要的同学参考。 该方案的使用数字翻牌器组件作为传递时间变量。 ## 配置数字翻牌器 第一步,配置数字翻牌
2205 0
|
监控 数据可视化 数据库
DataV 使用时间轴实现实时动态查询数据库、sls 等数据源
DataV 使用时间轴实现实时动态查询数据库、sls 等数据源
3766 0
|
数据可视化
DataV 配置 VPC 数据源教程
DataV 现在支持使用 VPC的数据库配置数据源啦。
2106 0
|
1月前
|
SQL 数据可视化 关系型数据库
阿里云DataV“山海计划” x Epic Fab:“中国风AIGC”助力智慧城市建设
DataV“山海计划”根据中国城市规划特色,建立城市地块、建筑、道路等“城市要素知识库”,基于AI大模型技术生成更贴近“中国特色”的城市场景。基于DataV“山海计划”的UE引擎插件已经登陆Epic Fab,广大UE引擎开发者可以通过该插件免费体验城市历史悠久的广州场景三维资产。除了三维城市场景生成,DataV为智慧城市提供完整的数据看板解决方案,提供200+基础图表、支持API、MySQL、SQL Server、人大金仓、达梦等30+数据源,通过DataV与UE引擎,广大开发者可以低成本获得“智慧城市”开发方案,将更多精力放在满足用户业务需求上,从而提升智慧城市项目的交付质量。
155 2
|
3月前
|
人工智能 数据可视化 数据挖掘
|
数据可视化 安全 数据挖掘
阿里云datav介绍以及如何购买
阿里云Datav是阿里巴巴集团推出的数据可视化产品,旨在为用户提供全面、高效、便捷的数据分析和可视化解决方案。它具有丰富的功能和特点,能够满足用户对于数据处理、分析和展示的各种需求。