Flutter中OpenStreetMap经纬度转图片坐标失败求助

问题背景 #

我尝试在Flutter（Dart）中将经纬度（lon/lat）转换为从OpenStreetMap下载的图片的像素坐标（x/y），但除中心点外，其他经纬度对应的图片坐标均不匹配。已知图片的宽高、中心经纬度及缩放级别，目标是在指定经纬度位置放置图标。

我基于瓦片网格规则和OpenStreetMap瓦片命名规则分别实现了两段转换代码，但都未成功。

原错误代码 #

第一段尝试代码 #

Point latLonToPixel(double lat, double lon, double latCenter,
    double lonCenter, double width, double height, double zoom) {
  // Calculate the scale factor based on the zoom level
  num scaleFactor = pow(2, zoom);

  // Calculate the number of pixels per degree of latitude and longitude based on the scale factor
  double pixelsPerLat = height * scaleFactor ;
  double pixelsPerLon = width * scaleFactor ;

  // Calculate the pixel coordinates of the central point
  double xCenter = width / 2;
  double yCenter = height / 2;

  
  double sinLatitude = sin(lat * pi/180);
  double latPoint = (0.5 - log((1 + sinLatitude) / (1 - sinLatitude)) / (4 * pi));
  double lonPoint = ((lon + 180) / 360);

  double sinLatitudeCenter = sin(latCenter * pi/180);
  double latPointCenter = (0.5 - log((1 + sinLatitude) / (1 - sinLatitude)) / (4 * pi));
  double lonPointCenter = ((lonCenter + 180) / 360);


  // Calculate the pixel coordinates of the given point relative to the central point
  double xPoint = xCenter + (lonPoint - lonPointCenter) * pixelsPerLon;
  double yPoint = yCenter + (latPoint - latPointCenter) * pixelsPerLat;

  print(" xPoint: ${xPoint}, yPoint: ${yPoint}");

  return Point(xPoint, yPoint);
}

第二段尝试代码 #

Point latLonToPixel18(double lat, double lon, double latCenter,
    double lonCenter, double width, double height, double zoom) {
  // Calculate the scale factor based on the zoom level
  num scaleFactor = pow(2, zoom);

  // Calculate the number of pixels per degree of latitude and longitude based on the scale factor
  double pixelsPerLat = height * scaleFactor;
  double pixelsPerLon = width * scaleFactor;

  // Calculate the pixel coordinates of the central point
  double xCenter = width / 2;
  double yCenter = height / 2;


  double latPointRad = radians(lat);
  double latPoint = (1.0 - asinh(tan(latPointRad)) / pi) / 2.0;
  double lonPoint = ((lon + 180) / 360);

  double latCenterRad = radians(latCenter);
  double latPointCenter = (1.0 - asinh(tan(latCenterRad)) / pi) / 2.0;
  double lonPointCenter = ((lonCenter + 180) / 360);

  // Calculate the pixel coordinates of the given point relative to the central point
  double xPoint = xCenter + (lonPoint - lonPointCenter) * pixelsPerLon;
  double yPoint = yCenter + (latPoint - latPointCenter) * pixelsPerLat;

  print(" xPoint: ${xPoint}, yPoint: ${yPoint}");

  return Point(xPoint, yPoint);
}

布局代码 #

Scaffold(
          body: Center(
            child: Container(
              child: InteractiveViewer(
                panEnabled: true, // Set it to false
                //boundaryMargin: EdgeInsets.all(100),
                minScale: 1,
                maxScale: 10,

                child: Stack(
                  children: <Widget>[
                    Image.asset(
                      'assets/images/map.png',
                      width: width,
                      height: height,
                      fit: BoxFit.cover,
                    ),
                    Positioned(
                      left: xPoint,
                      top: yPoint,
                      child: Icon(
                        Icons.gps_fixed,
                        size: 10,
                        color: Color.fromRGBO(0, 0, 0, 1),
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),

问题分析与修复方案 #

原代码核心错误 #

1. 变量复用错误：第一段代码计算latPointCenter时，错误使用了当前点的sinLatitude，而非中心点的sinLatitudeCenter，导致中心点投影计算错误。
2. 缩放逻辑偏差：原代码直接用图片宽高乘以缩放系数计算像素密度，忽略了OSM瓦片的256x256像素基准，导致全局像素偏移计算错误。
3. 图标定位偏移：Positioned的left/top是图标左上角坐标，若要让图标中心对准目标点，未做偏移修正。

修复后的转换代码 #

import 'dart:math';
import 'package:flutter/painting.dart';

Point<double> latLonToPixel(double lat, double lon, double latCenter,
    double lonCenter, double width, double height, double zoom) {
  // OSM标准瓦片尺寸为256x256像素
  const double tileSize = 256.0;
  final num scale = pow(2, zoom);

  // 将经纬度转换为全局像素坐标（以世界地图左上角为原点）
  Point<double> _latLonToGlobalPixel(double lat, double lon) {
    final double latRad = lat * pi / 180.0;
    final double x = (lon + 180.0) / 360.0 * scale * tileSize;
    // 墨卡托投影转换y坐标
    final double y = (1.0 - log(tan(latRad) + 1.0 / cos(latRad)) / pi) / 2.0 * scale * tileSize;
    return Point(x, y);
  }

  // 计算中心点和目标点的全局像素坐标
  final Point<double> centerGlobalPixel = _latLonToGlobalPixel(latCenter, lonCenter);
  final Point<double> targetGlobalPixel = _latLonToGlobalPixel(lat, lon);

  // 转换为图片内的相对坐标：图片中心对应中心点全局像素
  final double x = width / 2.0 + (targetGlobalPixel.x - centerGlobalPixel.x);
  final double y = height / 2.0 + (targetGlobalPixel.y - centerGlobalPixel.y);

  return Point(x, y);
}

额外优化建议 #

• 图标中心对齐：修改Positioned参数，让图标中心对准目标点：

  Positioned(
    left: xPoint - 5, // 图标尺寸为10，减去一半
    top: yPoint - 5,
    child: Icon(
      Icons.gps_fixed,
      size: 10,
      color: Color.fromRGBO(0, 0, 0, 1),
    ),
  )
  

• 禁用交互测试：先设置InteractiveViewer的panEnabled: false, scaleEnabled: false，确认基础转换正确后再启用交互。
• 验证地图参数：确保下载的地图图片确实对应指定的缩放级别和中心经纬度，否则转换必然出现偏移。

内容的提问来源于stack exchange，提问作者Cata