Jinuss's blog Jinuss's blog
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 《Vue》
    • 《React》
    • 《Git》
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

东流

前端可视化
首页
  • 前端文章

    • JavaScript
  • 学习笔记

    • 《JavaScript高级程序设计》
    • 《Vue》
    • 《React》
    • 《Git》
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • 学习
  • 实用技巧
关于
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 框架

  • core模块

  • dom模块

  • control

  • geometry

  • geo

    • crs

    • projection

      • Projection.LonLat
      • Projection.Mercator
      • Projection.SphericalMercator
        • 概述
        • 源码分析
          • 源码实现
          • 关键特性 ​​
          • ​ 注意事项 ​​
        • 总结
    • LatLng
    • LatLngBounds
  • layer

  • Map

  • 《Leaflet源码》笔记
  • geo
  • projection
东流
2025-04-10
目录

Projection.SphericalMercator

# 概述

Projection.SphericalMercator 实现了 ​ 球体墨卡托投影(Spherical Mercator Projection)​​,将地理坐标(经纬度)映射为平面坐标,对应EPSG:3857坐标系。

# 源码分析

# 源码实现

Projection.SphericalMercator的源码实现如下:

var earthRadius = 6378137;
export var SphericalMercator = {
  R: earthRadius, // 地球半径 单位:米, WGS84标准,简化为球体模型
  MAX_LATITUDE: 85.0511287798, // 有效最大纬度,超过此值的纬度会被截断
  // 正向投影:将地理坐标(经度、纬度)转换为平面坐标
  project: function (latlng) {
    var d = Math.PI / 180, // 度转弧度
      max = this.MAX_LATITUDE,
      lat = Math.max(Math.min(max, latlng.lat), -max), // 限制纬度范围
      sin = Math.sin(lat * d);
    return new Point(
      this.R * latlng.lng * d, // x轴计算
      (this.R * Math.log((1 + sin) / (1 - sin))) / 2 // y轴计算
    );
  },
  // 反向投影:将平面坐标(米)转换为地理坐标(经度、纬度)
  unproject: function (point) {
    var d = 180 / Math.PI; // 弧度转度
    return new LatLng(
      (2 * Math.atan(Math.exp(point.y / this.R)) - Math.PI / 2) * d, // 纬度
      (point.x * d) / this.R //经度
    );
  },
  // 返回投影后的平面坐标范围
  bounds: function () {
    var d = earthRadius * Math.PI;
    return new Bounds([-d, -d], [d, d]);
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# 关键特性 ​​

  1. 球形假设​​:
  • 忽略地球扁率(椭球体模型),简化计算,适合快速渲染。 ​​
  1. 纬度截断​​:
  • 限制纬度在 ±85.0511287798°,避免两极区域投影后坐标无穷大。 ​
  1. ​ 应用场景​​:
  • 网络地图服务(谷歌地图、OpenStreetMap)。
  • 瓦片地图坐标系(EPSG:3857)。

# ​ 注意事项 ​​

  • ​​精度误差​​:高纬度地区因球形模型与实际椭球差异,位置偏差增大。
  • 坐标轴方向 ​​:
    • X 轴正方向为东,Y 轴正方向为北(与屏幕坐标系 Y 轴向下相反)。

# 总结

这段代码实现了标准的Web Mercator投影(EPSG:3857),用于将经纬度转换为平面坐标,并限制了纬度范围以保证有效性,适用于大多数网络地图服务。

编辑 (opens new window)
上次更新: 2025/04/18, 09:09:53
Projection.Mercator
LatLng

← Projection.Mercator LatLng→

最近更新
01
GeoJSON
05-08
02
Circle
04-15
03
CircleMarker
04-15
更多文章>
Theme by Vdoing | Copyright © 2024-2025 东流 | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式