cntchen / tile-lnglat-transform Goto Github PK

View Code? Open in Web Editor NEW

632.0 632.0 163.0 1.22 MB

高德/百度/谷歌/腾讯/必应的地图经纬度坐标和瓦片坐标相互转换

JavaScript 98.97% HTML 1.03%

tile-lnglat-transform's Introduction

tile-lnglat-transform

提供了高德、百度、谷歌、腾讯和必应地图的经纬度坐标与瓦片坐标的相互转换

特点

实现了国内常用地图的经纬度坐标与瓦片坐标的相互转换
使用 UMD 模块打包，可以在 node 和 browser 中直接使用

转换原理

各地图的瓦片坐标系定义、转换原理和转换公式可以参见博文：国内主要地图瓦片坐标系定义及计算原理

使用方法

以 node 中使用为例。

安装

$ npm install tile-lnglat-transform
// 或
$ npm install git://github.com/CntChen/tile-lnglat-transform.git

使用

// 引入模块
var TileLnglatTransform = require('tile-lnglat-transform');
// 根据地图平台使用转换类
var TileLnglatTransformGaode = TileLnglatTransform.TileLnglatTransformGaode;
var TileLnglatTransformGoogle = TileLnglatTransform.TileLnglatTransformGoogle;
var TileLnglatTransformBaidu = TileLnglatTransform.TileLnglatTransformBaidu;

文档

模块

每个地图平台提供一个转换对象。如：

TileLnglatTransform.TileLnglatTransformGaode;
TileLnglatTransform.TileLnglatTransformBaidu;

通用转换函数

经纬度坐标转瓦片坐标 lnglatToTile

@input: (longitude, latitude, level)

@output:{tileX, tileY}
经纬度坐标转像素坐标 lnglatToPixel

@input: (longitude, latitude, level)

@output:{pixelX, pixelY}
瓦片的某一像素点坐标转经纬度坐标 pixelToLnglat

@input: (pixelX, pixelY, tileX, tileY, level)

@output:{lng, lat}

某平台独有函数

高德地图/谷歌地图/腾讯地图

百度地图

经纬度坐标转平面坐标lnglatToPoint

@input: {lng, lat}

@output:(pointX, pointY)
平面坐标转经纬度坐标pointToLnglat

@input: (pointX, pointY)

@output:{lng, lat}

Bing 地图

Bing 地图使用 Slippy 方式，经纬度坐标和瓦片坐标转换与 Google 地图相同。不同的是 Bing 地图使用 quadkey(四叉树编码)来标识瓦片。

瓦片坐标转四叉树编码lnglatToQuadkey

@input: tileX, tileY, level

@output: quadkey

四叉树编码转瓦片坐标quadkeyToLnglat

@input: quadkey

@output: {tileX, tileY, level}

注意点

瓦片中像素坐标的取值

瓦片的大小为 256 * 256，计算得到的瓦片中像素坐标取值为：0 - 255。

测试代码

代码位于/test/中，提供了node和broswer的测试代码

node中测试

$ node test/test_node.js

broswer中测试浏览器打开/test/test_broswer.html或/test/test_require.html

正确性验证

已经验证高德、百度、谷歌和腾讯地图各转换方法的正确性。

验证方法

为验证转换代码的正确性，在各地图中将同一经纬度坐标标注出来（使用地图平台提供的 SDK）。
计算瓦片坐标和像素坐标，在瓦片中根据像素坐标标注点，与通过经纬度标注的结果做对比。

测试数据

使用的瓦片等级为15级，测试经纬度为：

var lnglat = {lng: 113.3964152,  lat: 23.0581857};

经纬度标注结果

在/test/test_result/中，以113.3964152_23.0581857_XX位置.png命名的图片。如：

113.3964152_23.0581857_高德位置.png

这个坐标是广州大学城女朋友的宿舍楼, 我们学校相邻, 我经常在这个坐标等她, 我们走过很久的一段时光, 已经成家养娃.

转换后结果

在/test/test_result/文件夹中,以XX地图_labeled命名。如：

高德地图_labeled.png

并在各个瓦片的像素坐标处作红点标记。该红色标记与经纬度标记做比较，可以验证经纬度到瓦片坐标和像素坐标转换的正确性。

验证图例

类型	地图上经纬度标注截图	转换后瓦片截图(图中红点标记)
高德
百度
google
腾讯

各地图查询接口示例

高德地图

http://wprd03.is.autonavi.com/appmaptile?style=7&x=26705&y=14226&z=15

百度地图

http://online1.map.bdimg.com/onlinelabel/qt=tile&x=6163&y=1280&z=15

谷歌地图

http://mt2.google.cn/vt/lyrs=m@167000000&hl=zh-CN&gl=cn&x=26705&y=14226&z=15&s=Galil

腾讯地图

http://rt1.map.gtimg.com/tile?z=15&x=26705&y=18541&styleid=1&version=117

必应地图

http://dynamic.t2.tiles.ditu.live.com/comp/ch/132122221030021?it=G,OS,L&mkt=en-us&cstl=w4c&ur=cn

Todo

~~Bing Map 的转换~~ done

https://msdn.microsoft.com/en-us/library/bb259689.aspx

其他地图的转换

为该项目贡献代码

该项目代码使用 ES6 编写，使用 webpack 打包为 UMD 模块。

欢迎改进该项目代码或针对新的瓦片坐标定义方式提供转换代码。

修改代码或添加模块流程

Fork 并 clone项目
安装依赖
```
$ npm install
```
修改代码或添加模块参考 /src/中的代码
打包为UMD模块，打包结果路径为/builds/index.js
```
$ npm run build
```
Pull request

参考资料

国内主要地图瓦片坐标系定义及计算原理

http://cntchen.github.io/2016/05/09/国内主要地图瓦片坐标系定义及计算原理/

log

修复瓦片上像素坐标计算的 bug: issue#5, 感谢 @lizecn 2017.08.12
添加 OSM 转换对象 2016.05.10
添加 TMS 转换对象，适用于腾讯地图 2017.03.07
添加 Bing quadkey 转换 2017.03.14

完

tile-lnglat-transform's People

Contributors

Stargazers

Watchers

Forkers

coolbole flyskyosg zhengjb shiweihappy 5-say 872409 yangsufan freemanofchina simplegis zeguanshu coyotey inuyashaye comewanglei coolwxb giserh velchen mtsee layshua msi1979 huangxubo23 ferlycreator jingouwangzi tornadoxutao liangtanjack brandycoffee tomerry ryfan-rs soulhez novaind vehery liguyu yushisdg wayhe-huangluojun yuyf-fsd lyntel zhangwj999 dfy167 hahaking119 zrmei renshenguo666 eastgeneral2007 ezhangle houxieyu neoayi feixuekk szliugx tonny2v yejunzhou liuwenhong007 shaofeizi fateblessme pxyn renxz spaderboy defineconst yuyifang wclwksn wangqiangqiang lanxianhui realray gery1990 csyangbinbin pyliuhaichao szuzqx xamarinhub xiangxiong sulumaenjun hesitanting wangller newbluedance betavolare luoyuzhao edward1322 yzq007 joylau zxfgds ouyzk lxt98 chronofei kunkkaliu wayaya 334249477 r4m80mrx inventionzhang yaolv7 sungf mybraveheart dinghe mhcxp zwq8299174 silly-lio nicolas-bch taurusfy best-love beyondlh githubxiaowangzi chisw-forked liulianfan martinadamsdev yr1044

tile-lnglat-transform's Issues

关于地图转换

我想问一下，如果输送的坐标点在国外，其实是不要转换的，这个程序附带地理位置判断吗？还是要应用自己判断是否坐标在天朝，是否需要调用这个坐标转换？

var TileLnglatTransform = require('tile-lnglat-transform');
var TileLnglatTransformBaidu = TileLnglatTransform.TileLnglatTransformBaidu;
// x: '11587519.22', y: '3558281.28'
var o = TileLnglatTransformBaidu.pointToLnglat(11587519.22,3558281.28);

拼写错误

const TileLnglatTransformTencent = new TransformClassTMS(MapLevelRange[MapTypes.Tencent].max, MapLevelRange[MapTypes.Tencent].mi);

mi -> min

ArcGIS 地图服务

您好，ArcGIS发布的地图服务通过经纬度能否获取当前地图图片？谢谢！

腾通地图坐标原点

腾讯地图的坐标原点现在是左上角了，
参考文档

谷歌瓦片转换bug

const TileLnglatTransform = require('tile-lnglat-transform');
const TileLnglatTransformObj = TileLnglatTransform.TileLnglatTransformGoogle;

let tile = TileLnglatTransformObj.lnglatToTile(-180, 90, 0);

console.log(tile);

输出结果：
{ tileX: 0, tileY: -6 }

已知google的瓦片图是从0,0开始的，这个转换有问题。

关于百度瓦片的疑问

http://cntchen.github.io/2016/05/09/%E5%9B%BD%E5%86%85%E4%B8%BB%E8%A6%81%E5%9C%B0%E5%9B%BE%E7%93%A6%E7%89%87%E5%9D%90%E6%A0%87%E7%B3%BB%E5%AE%9A%E4%B9%89%E5%8F%8A%E8%AE%A1%E7%AE%97%E5%8E%9F%E7%90%86/
很幸运看到您写的这篇博客，解决了我很多疑问
但关于百度瓦片的计算，我还有一些不明白的地方。
博客中有一张百度地图level2的截图，很明显可以看到截图中地图部分不是正方形。那么百度平面坐标采用的是什么方式？如果是web墨卡托，那么应该是正方形才对

请问如何获取在线地图某一个视野范围内的256*256的瓦片图呢

看到博文十分好奇，谢谢。

1.4.3版本安装后没有实际内容

./builds目录下的文件没有被发布

博客文章链接没有贴上

博客地址 http://cntchen.github.io/2016/05/09/国内主要地图瓦片坐标系定义及计算原理

请问腾通地图使用高德函数就可以么？

如题，谢谢。

pixelToLnglat 精确度问题

Hi,
发现pixelToLnglat计算出来的坐标跟原始坐标有些差异：

// 测试代码
var lnglat = {
  lng: 111.653157,
  lat: 40.754325
};
var level = 16;
var tile_baidu = TileLnglatTransformBaidu.lnglatToTile(lnglat.lng, lnglat.lat, level);
var pixel_baidu = TileLnglatTransformBaidu.lnglatToPixel(lnglat.lng, lnglat.lat, level);
var lnglat_baidu = TileLnglatTransformBaidu.pixelToLnglat(pixel_baidu.pixelX, pixel_baidu.pixelY, tile_baidu.tileX, tile_baidu.tileY, level);
console.log('to lnglat result:', lnglat_baidu);

输出：
to lnglat result: { lng: 111.653123, lat: 40.754301 }

总结：原始坐标是(111.653157, 40.754325)，先转换成瓦片坐标+像素坐标，再转换回经纬度坐标，结果是(111.653123, 40.754301)，跟原始坐标相比存在误差，请问这个是什么原因造成的？

能实现一下高德矢量图的行列号转换吗？

示例地址https://vdata.amap.com/tiles?mapType=normal&v=3&style=5&key=608d75903d29ad471362f8c58c550daf&rd=1&flds=building&t=17,106538,57144;17,106538,57143;17,106537,57144;17,106537,57143&lv=17
矢量图的行列号似乎是在瓦片坐标的基础上加密而来的。

百度地图坐标转换成pixel 出现x = 256 或者 y=256，溢出？

zoom level 10
百度坐标 {lng: 120.097447, lat: 31.780346}
返回pixel {pixelX: 256, pixelY: 163}
tile 大小 256 x 256 x或者y 0-255，转换后256是不是溢出了？

Feature request

能否加入yandex地图的转换

请问，有瓦片下载工具推荐一下么？

如题，谢谢~

经纬度转切片的公式与谷歌实测不符合

测试数据：阙左门的经纬度地址

double lng = 116.3977300859833;
double lat = 39.91371035156561;

使用博客中的公式，在　zoom=18 时，算出的结果为　{'tileX': 107915,'tileY': 115198}，但是正常的值应该是x=107915&y=49662也就是说对于维度的计算是错误的。
以下是我实现的方法，使用博客中的公式：(python)

    n = math.pow(2, int(zoom))
    xtile = ((lng_deg + 180) / 360) * n
    lat_rad = lat_deg * math.pi/180
    fenzi = math.log(math.tan(lat_rad) + 1 / math.cos(lat_rad))
    ytile = (1.0 - ( fenzi/(math.pi*2) ) ) * n

以下是可得出与谷歌一致的公式：（java，lon算出的是正确的所以不再贴上）

double sinLat = Math.sin(lat * Math.PI / 180.0);
double drow = (2.0 - Math.log((1 + sinLat) / (1 - sinLat)) / Math.PI) * maxTileNumber / 4;

而且，使用下面这个转换出的切片，在使用博客提供的切片转经纬度的公式，得到的经纬度是正确的测试经纬度。
etc:
我实现的Python代码链接：https://github.com/everywan/Everywan.Study/blob/76a889f7f8a53371a1e25d88bb2f4d5d8bd0ab64/Lib/tile2lonlat.py

请教下谷歌地图上的短坐标如何转成长坐标呢？

请教下，比如截图上那个坐标，如何转成 -1.5094702805732376,52.40981128619181 这样的呢？

请问瓦片地图该如何制作呢？

比如说我们有一张故宫的图片，想要根据这张图片来制作不同缩放等级下的瓦片地图，该怎样制作呢？