Используйте статическое изображение в качестве карты мира в java-скрипте

Question

Я пытаюсь сделать изображение, как показано ниже, и хочу, чтобы оно действовало как карта мира.

Я хочу создать функцию javascript, которая динамически отображает местоположение на изображении, когда я передаю пару (широта, долгота).

Я пробовал API Google Map, описанный в "developers.google.com/maps/documentation/javascript/examples/…". Но проблема в том, что изображение не в том типе проекции. Таким образом, результаты сильно отличаются от ожидаемых.

Answer 1

Похоже, что ваше изображение использует плоскую проекцию, которая обычно используется для наборов растровых данных мира. Эта проекция легко позволяет перепроецировать - и, как предлагает rioV8, просто отображает долготу и широту, как если бы они были координатами x, y на декартовой плоскости, а не на сфероиде.

Изображение, которым вы поделились, в два раза шире его высоты, что также помогает подтвердить плоскость: если проекция отображает долготу и широту в виде декартовых координат, изображение должно быть в два раза шире высоты (360 градусов вокруг, 180 градусов полюса к полюсу).

Теперь нам нужно сделать проекцию для этого (не особенно сложно), или мы могли бы использовать проекцию d3: d3.geoEquirectangular() (Plate 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>

Конечно, когда мы знаем проекцию, мы можем перепроецировать исходное растровое изображение ( например. ) и проецировать на него точки.