传单地图与自定义瓷砖缩放偏移x y

本文关键字:缩放 自定义 单地图 地图 | 更新日期: 2023-09-27 18:14:43

我试图使用传单渲染大图像使用x,y坐标如下:

var map = L.map('map', {
   crs: L.CRS.Simple,
   attributionControl: false,
   reuseTiles:true, 
}).setView([0, 0], 1);

问题是,当我缩放时,我似乎得到一个偏移。因此,当我不断放大时,地图似乎会发生变化。

我正在使用c#和GDI+在后端绘制图像,所以很有可能我得到的代码是错误的:

 private void DrawLine(int x, int y, int z, int squareSize, Graphics g, Shape shape, Pen drawPen)
    {
        Line line = (Line)shape;
        var scalingFactor = 0.1;
        var zoom = (z * (scalingFactor));
        double startScaledX = (line.StartPoint.X * zoom) + ((squareSize * -1) * x);
        double startScaledY = (line.StartPoint.Y * -1 * zoom) + ((squareSize * -1) * y);
        double endScaledX = (line.EndPoint.X * zoom) + ((squareSize * -1) * x);
        double endScaledY = (line.EndPoint.Y * -1 * zoom) + ((squareSize * -1) * y);
        var width = Math.Abs(endScaledX - startScaledX);
        var height = Math.Abs(endScaledY - startScaledY);
        var startPoint = new System.Drawing.PointF((float)startScaledX, (float)startScaledY);
        var endPoint = new System.Drawing.PointF((float)endScaledX, (float)endScaledY);
        var rectDrawBounds = (new RectangleF((float)startScaledX, (float)startScaledY, (float)width, (float)height));
        var rectTileBounds = new RectangleF(0, 0, 256, 256);
        g.DrawLine(drawPen, startPoint, endPoint);
    }

我注意到,如果我在[0,0]处放大和缩小,那么变焦效果很好。其他一切似乎都改变了形势。

如果您能提供任何帮助,我将不胜感激。

传单地图与自定义瓷砖缩放偏移x y

在传单的L.CRS.Simple中,每缩放一级,地图比例尺增长2倍。换句话说:

scale = 2**z;

scale = Math.pow(2,z);

scale = 1<<z;

在缩放级别0时,256像素的贴图覆盖256个地图单元。一个地图单元的面积为1个像素。

在缩放级别1下,256像素的贴图覆盖128个地图单元。一个地图单元超过2个像素。

在缩放级别2下,256像素的贴图覆盖64个地图单元。一个地图单元超过4个像素。

缩放级别n时,256像素的贴图覆盖256/2n地图单位。一个地图单元跨越2个n像素。

参考参见https://github.com/Leaflet/Leaflet/blob/master/src/geo/crs/CRS.Simple.js

修正你的z, scalingFactorzoom计算和相应的关系