Question

按照本教程操作：https://macwright.org/2015/08/31/canvas-animations-on-maps.html

我想将徒步旅行时记录的一系列经纬度坐标映射到360x180px的画布上。

本教程给出了以下公式：

published

问题在于，所有点都相互重叠，因为（我猜）拉丁美洲的十进制小数在小数点后十万处基本上是相同的。

我如何“放大”或映射到我远足记录中的程度？

5个采样点：

public static void main(String[] args) {

    Scanner scan = new Scanner(System.in);        

    System.out.println("Enter a line of text:");
    String line = scan.next();  
    System.out.println();
    System.out.println("Capitalized version:");
    printCapitalized( line );

    scan.close(); 
}

static void printCapitalized( String line ) {
    char ch;       
    char prevCh;   
    int i;         
    prevCh = '.';  

    for ( i = 0;  i < line.length();  i++ ) {
        ch = line.charAt(i);
        if ( Character.isLetter(ch)  &&  ! Character.isLetter(prevCh) )
            System.out.print( Character.toUpperCase(ch) );
        else
            System.out.print( ch );
        prevCh = ch;  

    }
    System.out.println();
}

Answer 1

您的猜测是正确的。由于您的远足都发生在世界的一小部分，因此将其绘制在世界地图上是没有帮助的。您可以像这样有效地缩放和居中远足坐标：

var x = (longitude + 157.82425) * 10000 * 360;

var y = (21.4429 - latitude) * 6000 * 180;

Answer 2

一种策略是将纬度和经度视为笛卡尔坐标，该坐标在短距离内适用于十进制度，但在纬度大于1°的较高纬度中存在缩放问题。在短距离内修复此比例误差并不难（使用纬度的正弦值）。

首先获取坐标的边界矩形，然后从其他坐标中减去左下角以获取最小边界矩形的尺寸。

要将十进制度数的坐标适合以像素为单位的框，请缩放值以适合框。

在这种情况下，矩形将是：

左下（最小纬度，最小长）：21.442751，-157.824244
右上（最大纬度，最大长）：21.442886，-157.824158

矩形可以使用多达4个不同点的坐标。

产生的纬度（高度）为0.000135，产生的纬度（宽度）为0.000086度。

获取适合360 x 180 px矩形（假定360宽x 180高）的比例因子会得出：

高度：180÷0.000135 = 1,333,333
宽度：360÷0.000086 = 4,186,046

假设您要保持结果成比例，请在两个维度上使用相同的系数，否则另一个维度将无法放入框中，因此：

scaleFactor = 1333333;

要获取左下角每个点的x，y坐标（以像素为单位），请使用：

y坐标：（lat.posA-lat.lowerLeft）*比例尺；
x坐标：（lon.posA-lon.lowerLeft）*比例尺；

最后要做的是从左上角开始计算像素坐标，垂直尺寸y向下增加，而水平尺寸x则向右增加。 x坐标已经可以了，您只需要从180减去y坐标即可。

所以点变成了（注意lat，long转换为x，y）：

（21.442751，-157.824244）=>（0，180）
（21.442773，-157.824226）=>（24，151）
（21.442787，-157.824168）=>（101，132）
（21.442817，-157.824158）=>（114，92）
（21.442886，-157.824173）=>（94，0）

其中（0,0）是框的左上角。

.box {
  border: 1px solid red;
  width: 360px;
  height: 180px;
  position: relative;
}

.A {
  position: absolute;
  left: 0px;
  top: 180px;
}
.B {
  position: absolute;
  left: 24px;
  top: 151px;
}
.C {
  position: absolute;
  left: 101px;
  top: 132px;
}
.D {
  position: absolute;
  left: 114px;
  top: 92px;
}
.E {
  position: absolute;
  left: 94px;
  top: 0px;
}

<div class="box">
  <span class="A">1</span>
  <span class="B">2</span>
  <span class="C">3</span>
  <span class="D">4</span>
  <span class="E">5</span>
</div>

其他工作是将坐标在框中居中，我将其留给您。

纬度到X Y，文字投影缩放级别

2 个答案: