Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Hooke
/
map-demo
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
hookehuyr
2025-02-25 09:33:12 +0800
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
861ea8efeeb6472d447d7769cdc8404a9f69da80
861ea8ef
1 parent
7a03a903
fix 注释
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
29 additions
and
2 deletions
src/utils/TileCutter.js
src/utils/TileCutter.js
View file @
861ea8e
/*
* @Date: 2025-01-22 11:45:30
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-02-24 1
3:21
:58
* @LastEditTime: 2025-02-24 1
7:15
:58
* @FilePath: /map-demo/src/utils/TileCutter.js
* @Description: 文件描述
*/
...
...
@@ -120,12 +120,39 @@ function sliceImageToTiles(image, bounds, zoomLevel) {
}
}
// 经纬度转换为瓦片坐标
/**
* 将经度转换为瓦片X坐标
* @param {number} lon - 经度值,范围为 -180 到 180
* @param {number} zoom - 缩放级别
* @returns {number} - 返回对应的瓦片X坐标
*
* 计算过程说明:
* 1. lon + 180:将经度范围从 [-180, 180] 转换为 [0, 360]
* 2. /360:将范围归一化到 [0, 1]
* 3. * Math.pow(2, zoom):根据缩放级别计算实际瓦片坐标
* 4. Math.floor:向下取整,确保返回整数坐标
*/
function
lonToTileX
(
lon
,
zoom
)
{
return
Math
.
floor
(((
lon
+
180
)
/
360
)
*
Math
.
pow
(
2
,
zoom
));
}
/**
* 将纬度转换为瓦片Y坐标
* @param {number} lat - 纬度值,范围为 -90 到 90
* @param {number} zoom - 缩放级别
* @returns {number} - 返回对应的瓦片Y坐标
*
* 计算过程说明:
* 1. lat * Math.PI / 180:将纬度从角度转换为弧度
* 2. Math.tan() + 1/Math.cos():计算墨卡托投影中的y值
* 3. Math.log():取自然对数
* 4. 1 - ... / Math.PI:将范围调整到 [0, 1]
* 5. / 2:将范围进一步归一化
* 6. * Math.pow(2, zoom):根据缩放级别计算实际瓦片坐标
* 7. Math.floor:向下取整,确保返回整数坐标
*/
function
latToTileY
(
lat
,
zoom
)
{
// 将纬度转换为墨卡托投影坐标,然后计算对应的瓦片Y坐标
return
Math
.
floor
(
((
1
-
Math
.
log
(
Math
.
tan
(
lat
*
Math
.
PI
/
180
)
+
1
/
Math
.
cos
(
lat
*
Math
.
PI
/
180
))
/
Math
.
PI
)
/
2
)
*
Math
.
pow
(
2
,
zoom
)
);
...
...
Please
register
or
login
to post a comment