从经纬度缩放到 x y

Question

我正在尝试在 dart(flutter) 中实现一个代码，该代码将 lon lat 坐标转换为图像的 xy 坐标但没有成功。

图像是从openstreetmap下载的，尺寸：宽度，高度，我知道中心坐标（纬度，经度）和缩放。

这是因为我想在地图上的特定经纬度坐标处放置一个图标。

我尝试这样实现，但图像中的 x y 坐标不对应于除中心以外的经纬度坐标。 第一次尝试基于此https://learn.microsoft.com/en-us/azure/azure-maps/zoom-levels-and-tile-grid?tabs=csharp

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 = width * scaleFactor ;
  double pixelsPerLon = height * 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);
}

这是基于此的第二次尝试https://wiki.openstreetmap.org/wiki/Slippy_map_tilenames但仍然不成功

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 = width * scaleFactor;
  double pixelsPerLon = height * 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),
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
        ),