javascript - 在js中将城市点放在svg map 上

Question

我只是尝试在 javascript 中将城市的一个点放在 svg map 上。

说明:

我有:

svg 格式的法国 map (128x128px):

WGS84 中的坐标如下:

我想提出巴黎这个城市的一个观点。我在这个网站上搜索，找到了这段代码，但没有任何解释，所以我不知道什么是 mapLonLeft、mapLatBottom 和 mapLatBottomDegree。

function convertGeoToPixel(latitude, longitude ,
                       mapWidth , // in pixels
                       mapHeight , // in pixels
                       mapLonLeft , // in degrees
                       mapLonDelta , // in degrees (mapLonRight - mapLonLeft);
                       mapLatBottom , // in degrees
                       mapLatBottomDegree) // in Radians
{
    var x = (longitude - mapLonLeft) * (mapWidth / mapLonDelta);

    latitude = latitude * Math.PI / 180;
    var worldMapWidth = ((mapWidth / mapLonDelta) * 360) / (2 * Math.PI);
    var mapOffsetY = (worldMapWidth / 2 * Math.log((1 + Math.sin(mapLatBottomDegree)) / (1 - Math.sin(mapLatBottomDegree))));
    var y = mapHeight - ((worldMapWidth / 2 * Math.log((1 + Math.sin(latitude)) / (1 - Math.sin(latitude)))) - mapOffsetY);

    return { "x": x , "y": y};
}

Answer 1

以下是每个 convertGeoToPixel 参数的含义:

• 纬度 - 要在 map 上绘制的点的纬度。
• 经度 - 您要在 map 上绘制的点的经度。
• mapWidth - map 的宽度(以像素为单位)
• mapHeight - map 的高度(以像素为单位)
• mapLonLeft - map 最左侧的真实经度
• mapLonDelta - map 的“宽度”(以经度为单位)
• mapLatBottom - map 底部的纬度(真实世界)
• mapLatBottomDegree - mapLatBottom 转换为弧度

所以，看看你的 map :

您必须检查其左侧的经度、右侧的经度以及底部的纬度。

看起来您可以相当准确地设置这些值:

latitude = 48.8667
longitude = 2.33333
mapWidth = mapHeight = 128
mapLonLeft = -5
mapLonDelta = 14
mapLatBottom = 42
mapLatBottomDegree = mapLatBottom * pi/180

但是，这些值是极其的粗略估计，如果可以的话，请尝试找到 map 边缘的纬度/经度的准确值。

该功能是否按照 promise 执行是另一回事......