1
- ## tile-lnglat-transform
1
+ ## tile-lnglat-transform-es6
2
2
> 提供了高德、百度、谷歌、腾讯和必应地图的经纬度坐标与瓦片坐标的相互转换
3
3
4
4
## 特点
5
5
* 实现了国内常用地图的经纬度坐标与瓦片坐标的相互转换
6
- * 使用 UMD,ESM,CJS 模块打包,可以在 node 和 browser 中直接使用
6
+ * 使用 UMD,ESM 模块打包,可以在 node 和 browser 中直接使用
7
+ * 支持TypeScript
7
8
8
9
9
10
## 注意
10
11
* 请使用支持ES6及以上的浏览器版本
11
12
12
13
## 转换原理
13
- 各地图的瓦片坐标系定义、转换原理和转换公式可以参见博文:[ 国内主要地图瓦片坐标系定义及计算原理] [ 国内主要地图瓦片坐标系定义及计算原理 ]
14
+ 各地图的瓦片坐标系定义、转换原理和转换公式可以参见博文:[ 国内主要地图瓦片坐标系定义及计算原理] ( 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/ )
14
15
15
16
## 使用方法
16
17
* 以 node 中使用为例。*
@@ -23,22 +24,21 @@ $ npm i tile-lnglat-transform-es6
23
24
* 使用
24
25
``` ts
25
26
// 引入模块
26
- // var TileLnglatTransform = require('tile-lnglat-transform-es6');
27
27
import TileLnglatTransform from ' tile-lnglat-transform-es6'
28
28
// 根据地图平台使用转换类
29
- var TileLnglatTransformGaode = TileLnglatTransform .TileLnglatTransformGaode ;
30
- var TileLnglatTransformGoogle = TileLnglatTransform .TileLnglatTransformGoogle ;
31
- var TileLnglatTransformBaidu = TileLnglatTransform .TileLnglatTransformBaidu ;
29
+ const TileLnglatTransformGaode = TileLnglatTransform .TileLnglatTransformGaode ;
30
+ const TileLnglatTransformGoogle = TileLnglatTransform .TileLnglatTransformGoogle ;
31
+ const TileLnglatTransformBaidu = TileLnglatTransform .TileLnglatTransformBaidu ;
32
32
```
33
33
34
34
## 文档
35
35
36
36
### 模块
37
37
每个地图平台提供一个转换对象。如:
38
38
``` ts
39
- var TileLnglatTransformGaode = TileLnglatTransform .TileLnglatTransformGaode ;
40
- var TileLnglatTransformGoogle = TileLnglatTransform .TileLnglatTransformGoogle ;
41
- var TileLnglatTransformBaidu = TileLnglatTransform .TileLnglatTransformBaidu ;
39
+ const TileLnglatTransformGaode = TileLnglatTransform .TileLnglatTransformGaode ;
40
+ const TileLnglatTransformGoogle = TileLnglatTransform .TileLnglatTransformGoogle ;
41
+ const TileLnglatTransformBaidu = TileLnglatTransform .TileLnglatTransformBaidu ;
42
42
```
43
43
44
44
### 通用转换函数
@@ -82,7 +82,7 @@ var TileLnglatTransformBaidu = TileLnglatTransform.TileLnglatTransformBaidu;
82
82
@output :` {lng, lat} `
83
83
84
84
#### Bing 地图
85
- Bing 地图使用 [ Slippy] [ Slippy ] 方式,经纬度坐标和瓦片坐标转换与 Google 地图相同。
85
+ Bing 地图使用 [ Slippy] ( http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames ) 方式,经纬度坐标和瓦片坐标转换与 Google 地图相同。
86
86
不同的是 Bing 地图使用 quadkey(四叉树编码)来标识瓦片。
87
87
88
88
* 瓦片坐标转四叉树编码` lnglatToQuadkey `
@@ -122,7 +122,7 @@ $ node test/test_node.js
122
122
### 测试数据
123
123
使用的瓦片等级为15级,测试经纬度为:
124
124
```
125
- var lnglat = {lng: 113.3964152, lat: 23.0581857};
125
+ const lnglat = {lng: 113.3964152, lat: 23.0581857};
126
126
```
127
127
128
128
### 经纬度标注结果
@@ -141,10 +141,10 @@ var lnglat = {lng: 113.3964152, lat: 23.0581857};
141
141
### 验证图例
142
142
| 类型 | 地图上经纬度标注截图 | 转换后瓦片截图(图中红点标记) |
143
143
| :-: | :-: | :-: |
144
- | 高德 | <img src =" https://github.com/CntChen /tile-lnglat-transform/blob/master /test/test_result/113.3964152_23.0581857_%E9%AB%98%E5%BE%B7%E4%BD%8D%E7%BD%AE.png?raw=true " height =" 256 " /> | <img src =" https://github.com/CntChen /tile-lnglat-transform/blob/master /test/test_result/gaode_map_labeled.png?raw=true " height =" 256 " /> |
145
- | 百度 | <img src =" https://github.com/CntChen /tile-lnglat-transform/blob/master /test/test_result/113.3964152_23.0581857_%E7%99%BE%E5%BA%A6%E4%BD%8D%E7%BD%AE.png?raw=true " height =" 256 " /> | <img src =" https://github.com/CntChen /tile-lnglat-transform/blob/master /test/test_result/baidu_map_labeled.png?raw=true " height =" 256 " /> |
146
- | google | <img src =" https://github.com/CntChen /tile-lnglat-transform/blob/master /test/test_result/113.3964152_23.0581857_Google%E4%BD%8D%E7%BD%AE.png?raw=true " height =" 256 " /> | <img src =" https://github.com/CntChen /tile-lnglat-transform/blob/master /test/test_result/google_map_labeled.png?raw=true " height =" 256 " /> |
147
- | 腾讯 | <img src =" https://github.com/CntChen /tile-lnglat-transform/blob/master /test/test_result/113.3964152_23.0581857_%E8%85%BE%E8%AE%AF%E4%BD%8D%E7%BD%AE.png?raw=true " height =" 256 " /> | <img src =" https://github.com/CntChen /tile-lnglat-transform/blob/master /test/test_result/tencent_map_labeled.png?raw=true " height =" 256 " /> |
144
+ | 高德 | <img src =" https://github.com/aliothor /tile-lnglat-transform-es6 /blob/main /test/test_result/113.3964152_23.0581857_%E9%AB%98%E5%BE%B7%E4%BD%8D%E7%BD%AE.png?raw=true " height =" 256 " /> | <img src =" https://github.com/aliothor /tile-lnglat-transform-es6 /blob/main /test/test_result/gaode_map_labeled.png?raw=true " height =" 256 " /> |
145
+ | 百度 | <img src =" https://github.com/aliothor /tile-lnglat-transform-es6 /blob/main /test/test_result/113.3964152_23.0581857_%E7%99%BE%E5%BA%A6%E4%BD%8D%E7%BD%AE.png?raw=true " height =" 256 " /> | <img src =" https://github.com/aliothor /tile-lnglat-transform-es6 /blob/main /test/test_result/baidu_map_labeled.png?raw=true " height =" 256 " /> |
146
+ | google | <img src =" https://github.com/aliothor /tile-lnglat-transform-es6 /blob/main /test/test_result/113.3964152_23.0581857_Google%E4%BD%8D%E7%BD%AE.png?raw=true " height =" 256 " /> | <img src =" https://github.com/aliothor /tile-lnglat-transform-es6 /blob/main /test/test_result/google_map_labeled.png?raw=true " height =" 256 " /> |
147
+ | 腾讯 | <img src =" https://github.com/aliothor /tile-lnglat-transform-es6 /blob/main /test/test_result/113.3964152_23.0581857_%E8%85%BE%E8%AE%AF%E4%BD%8D%E7%BD%AE.png?raw=true " height =" 256 " /> | <img src =" https://github.com/aliothor /tile-lnglat-transform-es6 /blob/main /test/test_result/tencent_map_labeled.png?raw=true " height =" 256 " /> |
148
148
149
149
### 各地图查询接口示例
150
150
* 高德地图
@@ -189,20 +189,12 @@ var lnglat = {lng: 113.3964152, lat: 23.0581857};
189
189
5. Pull request
190
190
191
191
## 参考资料
192
- 国内主要地图瓦片坐标系定义及计算原理
193
- >http://cntchen.github.io/2016/05/09/国内主要地图瓦片坐标系定义及计算原理/
194
192
195
- [国内主要地图瓦片坐标系定义及计算原理]: http://cntchen.github.io/2016/05/09/国内主要地图瓦片坐标系定义及计算原理/
193
+ > [国内主要地图瓦片坐标系定义及计算原理]( 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/)
196
194
197
- [test-result]:https://github.com/CntChen/tile-lnglat-transform/tree/master/test/test_result
195
+ > [Slippy](http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames)
198
196
199
- [slient-links]:slient-links
200
- [Slippy]:http://wiki.openstreetmap.org/wiki/Slippy_map_tilenames
197
+ ## 💖 致谢
201
198
202
- ## log
203
- * 修复瓦片上像素坐标计算的 bug 2017.08.12
204
- * 添加 OSM 转换对象 2016.05.10
205
- * 添加 TMS 转换对象,适用于腾讯地图 2017.03.07
206
- * 添加 Bing quadkey 转换 2017.03.14
199
+ > [tile-lnglat-transform](https://github.com/CntChen/tile-lnglat-transform)
207
200
208
- ## 完
0 commit comments