Question

摘要
我正在尝试读取.SCT文件，该文件是由名为VRC的程序创建的自定义文件类型。我使用此文件在源区域内绘制经度坐标。我遇到的问题是大多数经纬度坐标未正确映射。似乎大多数坐标都映射到某个任意点。

背景
这是我当前用于转换并将其绘制到SVG.js画布中的代码示例。

代码[index.js（至少是活动部分）] ：

var coor = [];
let fixed = [];

var dms2dd = function(object) {
  var deg = parseFloat(object.degrees),
      min = parseFloat(object.minutes),
      sec = parseFloat(object.seconds),
      dir = object.dir == "N" || object.dir == "E" ? 1 : -1;

  return dir*(deg+(min/60.0)+(sec/3600.0));
};

function llToXY(arr) {
    mapWidth    = 1000;
    mapHeight   = 1000;

    // get x value
    x = (arr[1]+180)*(mapWidth/360)

    // convert from degrees to radians
    latRad = arr[0]*Math.PI/180;

    // get y value
    mercN = Math.log(Math.tan((Math.PI/4)+(latRad/2)));
    y     = (mapHeight/2)-(mapWidth*mercN/(2*Math.PI));

    return [x, y];
}

lineReader.eachLine('test.txt', function(line, last) {
    let data = line.split(" ");
    let coor_length = coor.length;

    if (line[0] != " ") {
        coor.push({
            type: data[0],
            coordinates: []
        });

        // Convert to DD
        /*let direction = data[1].substr(0, 1);
        let dms = data[1].split(".")
        dms2dd({

        })*/


        data.splice(0, 1);

        coor[coor.length - 1]["coordinates"].push(data.join(" "));
    } else {
        coor[coor_length - 1]["coordinates"].push(line.trim())
    }

    if (last) {
        coor.forEach((data, index) => {
            for (coordinate_pair in data["coordinates"]) {
                let pair = data["coordinates"][coordinate_pair];

                pair = pair.split(" ");

                let x_data = pair[0].split("."),
                    y_data = pair[1].split(".");

                let x = dms2dd({
                    degrees: x_data[0].substring(1),
                    minutes: parseFloat(x_data[1]),
                    seconds: parseFloat(`${x_data[2]}.${x_data[3]}`),
                    dir: x_data[0].substr(0,1)
                });

                let y = dms2dd({
                    degrees: y_data[0].substring(1),
                    minutes: parseFloat(y_data[1]),
                    seconds: parseFloat(`${y_data[2]}.${y_data[3]}`),
                    dir: y_data[0].substr(0,1)
                });

                console.log([x, y]);
                coor[index]["coordinates"][coordinate_pair] = llToXY([x, y]);
            }
        })

        return false;
    }
});

绘图代码

let draw = SVG("drawing").size(1000, 1000).panZoom();
            let cp = <%- JSON.stringify(cp) %>;
            //var line = draw.plot([32.737396,117.204284], [32.736862,117.204468], [32.737396,117.204284], [32.736862,117.204468]).stroke({ width: 1 })
            // var line = draw.polyline().fill("none").stroke({width: 0.00005});
            // line.transform({
            //     scale: 50000
            // }).transform({rotation: 104.5});

            cp.forEach((data)=> {
                //draw.polyline(data.coordinates.join(" "))
                //llToXY(data.coordinates);
                draw.polyline(data.coordinates.join(" ")).fill("none").stroke({width: 0.00005}).transform({scale: 50000}).transform({rotation: -15.80})
            });

该代码基本上是逐行从文本文件读取并将数据插入名为coor的变量中。代码到达最后一行后，它将所有坐标（即coor值）转换为十进制度。

不幸的是，该库与JSFiddle不兼容，因此我无法进行测试。我已经附上了所有必需的文件，因此您可以在本地运行。

我主要关心的是所有坐标都映射到某个任意点。

来源
这是图像的外观

目前的样子：

VRC扇区文件文档：http://www1.metacraft.com/VRC/docs/doc.php?page=appendix_g

引用的StackOverflow问题：Convert latitude/longitude point to a pixels (x,y) on mercator projection

使用的库
svg.js：https://svgjs.com/
svg.panzoom.js：https://github.com/svgdotjs/svg.panzoom.js

Answer 1

这实际上是SVG.js库文档错误的问题。如果您将转换定义为

element.transform({ scale: 30000 })

结果不是具有值transform的{{1}}属性，这意味着在点（0，0）进行缩放的原点，而是等效于缩放< em>围绕元素边界框的中心。

在您的代码中，每个局部形状均绘制为单独的折线，并围绕其各自的中心分别缩放。在缩放之前，该元素非常小，并且所有元素都紧密地组合在一起，就像实际上在一点上一样。如果对它们进行缩放，则结果看起来所有元素都以其新大小将该点作为一个公共中心。

最明显的解决方案是不将元素缩放到单个中心，而是围绕一个常数：

scale(30000)

尚不清楚该值是什么。这将是所有折线的公共边界框中心的一个点。你怎么得到的？让图书馆为您完成工作。

如果将所有折线添加为const cx = ..., cy = ... element.transform({ scale: 30000, cx, cy })元素的子项，则可以缩放该组，并且如果省略中心的值，则会为您计算它们：

<g>

如果您要以定义的尺寸获取生成的地图，则上述解决方案很好。如果要找到一个实际使内容从一侧到另一侧填充画布的比例值，则非常简单：您可以获取组的边界框，并将其设置为{{1}上的视图框}元素。然后，浏览器将注意缩放该框以适合画布。

let draw = SVG("drawing").size(1000, 1000).panZoom();
let g = draw.group();

let cp = <%- JSON.stringify(cp) %>;
cp.forEach((data) => {
    group.polyline(data.coordinates.join(" "))
       .fill("none")
       .stroke({width: 0.00005});
});

group.transform({scale: 50000}).transform({rotation: -15.80});

在SVG中绘制经纬度坐标

1 个答案: