Question

我的想法很简单：

我有一张地图作为图片，可以是扫描打印的地图，也可以是维基百科的SVG地图，也可以是谷歌地图的截图。
我为该地图设置了两个纬度/经度坐标，用户点击它们在地图上的位置，因此我知道它们在图像上的相应X / Y位置。

现在有趣的部分：我需要在这张地图上放置一个新标记，只知道它的纬度/经度坐标。

我无法使用任何Google Maps API或其他JS api，因为地图可以是任意比例的，并且通常没有相应的缩放系数。

我相信我需要找到图像边界来在地图上定位标记，为此我需要知道地图的比例。我想我已经得到了这个代码，但是我没有得到NE经度的准确结果。

    // Get NE and SW boundaries for the two known markers
    var ne = {lat: Math.max(map.a.lat, map.b.lat), lon: Math.max(map.a.lon, map.b.lon),
        x: Math.min(pos.a.x, pos.b.x), y: Math.min(pos.a.y, pos.b.y)};
    var sw = {lat: Math.min(map.a.lat, map.b.lat), lon: Math.min(map.a.lon, map.b.lon),
        x: Math.max(pos.a.x, pos.b.x), y: Math.max(pos.a.y, pos.b.y)};

    // Get boundaries box width and height
    var box = {width: sw.x - ne.x, height: sw.y - ne.y};

    box.lat_delta = ne.lat - sw.lat;
    box.lon_delta = ne.lon - sw.lon;

    // Map scale
    box.lat_ratio = box.lat_delta / box.height;
    box.lon_ratio = box.lon_delta / box.width;

    // Get Top-Left and Bottom-Right coordinates of the map
    var tl = {
        lat: ne.lat + (box.lat_ratio * ne.y),
        lon: ne.lon - (box.lon_ratio * ne.x)};
    var br = {
        lat: sw.lat + (box.lat_ratio * (box.height - sw.y)),
        lon: sw.lon - (box.lon_ratio * (box.width - sw.x))};

然后，我如何获得第三个标记的X / Y坐标？我想过做那样的事情：

var x =（map.c.lon - tl.lon）* box.lon_ratio; var y =（map.c.lat - tl.lat）* box.lat_ratio;

但结果没有任何意义。所以我在那里有点迷失。

Answer 1

答案是：

karto.prototype.getStaticMapBoundingBoxFromTwoPoints = function (point1, point2, width, height)
{
    // Coordinates of the inner bounding box containing the two points
    var box = {};
    var map = {};

    // Top left, with lat/longitude as pixel coordinates on full-size Mercator projection
    box.tl = {
        lat: this.latToY(Math.max(point1.lat, point2.lat)), 
        lon: this.lonToX(Math.min(point1.lon, point2.lon)),
        x: Math.min(point1.x, point2.x), 
        y: Math.min(point1.y, point2.y)
    };

    // Bottom right, with lat/longitude as pixel coordinates on full-size Mercator projection
    box.br = {
        lat: this.latToY(Math.min(point1.lat, point2.lat)),
        lon: this.lonToX(Math.max(point1.lon, point2.lon)),
        x: Math.max(point1.x, point2.x),
        y: Math.max(point1.y, point2.y)
    };

    // Box width and height
    box.width = box.br.x - box.tl.x;
    box.height = box.br.y - box.tl.y;

    // Horizontal and vertical distance in pixels on full-size projection
    var v_delta = box.br.lat - box.tl.lat;
    var h_delta = box.br.lon - box.tl.lon;

    // Get scale from the distance applied to map size
    map.v_scale = v_delta / box.height;
    map.h_scale = h_delta / box.width;

    // Get map top left
    map.topLeft = {
        x: box.tl.lon - (box.tl.x * map.h_scale),
        y: box.tl.lat - (box.tl.y * map.v_scale)
    };

    map.topLeft.lat = this.YToLat(map.topLeft.y);
    map.topLeft.lon = this.XToLon(map.topLeft.x);

    map.bottomRight = {
        x: box.br.lon + ((box.width - box.br.x) * map.h_scale),
        y: box.br.lat + ((box.height - box.br.y) * map.v_scale)
    };
    map.bottomRight.lat = this.YToLat(map.bottomRight.y);
    map.bottomRight.lon = this.XToLon(map.bottomRight.x);

    return map;
};


karto.prototype.getPointXYOnStaticMap = function (lat, lon, map)
{
    return {
        x: (this.lonToX(lon) - map.topLeft.x) / map.h_scale,
        y: (this.latToY(lat) - map.topLeft.y) / map.v_scale
    };
};

karto.prototype.getPointLatLongOnStaticMap = function (x, y, map)
{
    return {
        lat: this.YToLat(map.topLeft.y + (y * map.v_scale)),
        lon: this.XToLon(map.topLeft.x + (x * map.h_scale))
    };
};

从两个标记中查找静态地图图像坐标

1 个答案: