在java脚本中使用静态图像作为世界地图

Question

我试图渲染像下面的图像，并希望它像世界地图.

我想创建一个javascript函数，当我通过（纬度，经度）对时，它会动态显示位置。

我尝试过“developers.google.com/maps/documentation/javascript/examples / ...”中记录的谷歌地图API。但问题是图像不在投影类型中。因此结果与预期的不同。

Answer 1

您的图像似乎使用了板式carreé投影，它通常用于世界上的栅格数据集。这种投影很容易让人重新投影 - 正如rioV8所暗示的那样，简单地映射经度和纬度，好像它们是笛卡尔平面上的x，y坐标而不是椭球体。

您共享的图像宽度是高的两倍，这也有助于确认板块：如果投影将经度和纬度映射为笛卡尔坐标，则图像的宽度应为高度的两倍（360度左右，极点180度） 。

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

我将在这里讨论d3方法，如果使用d3投影，我们需要了解投影的比例。默认值采用2π弧度并将其映射到960像素，这给出了一个比例：960 /2π。如果我们想将2π弧度包装到任意图像宽度，我们使用宽度/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.），并将点投影到该投影图像上。