在Java脚本中将静态图像用作世界地图

Question

我正在尝试渲染如下图所示的图像，并希望其像世界地图一样工作。

我想创建一个JavaScript函数，当我通过（纬度，经度）对时，动态地在图像中显示位置。

我尝试了“developers.google.com/maps/documentation/javascript/examples/…”中记录的google map API。但是问题在于图像不是那种投影类型。因此结果与预期如此不同。

Answer 1

您的图像似乎使用了carreé投影，这通常用于世界的栅格数据集。这种投影很容易实现重新投影-正如rioV8建议的那样，只需将经度和纬度映射为笛卡尔坐标系而不是球体的x，y坐标即可。

您共享的图像的高度是宽度的两倍，这也有助于确定板块的Carreé：如果投影映射的笛卡尔坐标系的经度和纬度，则图像的宽度应该是高度的两倍（大约360度，极点180度）杆）。

现在我们需要为此做一个投影（不是特别困难），或者我们可以使用d3投影：d3.geoEquirectangular()（板形carreé有几个名字）。

在这里，我仅介绍d3方法，如果使用d3投影，我们需要了解投影的比例。默认值取2π弧度并将其映射到960像素，这使我们的缩放比例为：960 /2π。如果要将2π弧度换成任意图像宽度，则使用width /2π的比例。

因此我们可以使用以下方式投影相对于该图像的点：

d3.geoEquirectangular()
  .scale(width/Math.PI/2)
  .translate([width/2,height/2]) // image width/height so [0,0] is centered

var width =400;
var height = 200;


var projection = d3.geoEquirectangular()
 .scale(width/Math.PI/2) 
 .translate([width/2,height/2]);
      
var svg = d3.select("svg");

svg.append("circle")
  .attr("r", 4)
  .attr("fill","yellow")
  .attr("transform", "translate("+projection([79.842778,6.934444])+")")
      
      

img, svg {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<div>
  <img src="https://i.stack.imgur.com/4p3MK.jpg" width="400" height="200"/>
  <svg width="1958" height="929"></svg>
</div>

当然，一旦我们知道了投影，就可以重新投影原始光栅图像（eg.），并在其上投影点。