JavaScript Библиотека Polymaps: получить координаты мыши

Question

Я использую библиотеку polymaps для отображения пользовательской мозаичной карты. Всякий раз, когда пользователь нажимает на него, мне нужно знать координаты этой точки. Не значения широты / долготы, которые дает map.mouse(e), но координаты в пикселях.

var po = org.polymaps;

var div = document.getElementById("map");

var map = po.map()
    .container(div.appendChild(po.svg("svg")))
    .zoomRange([0,8])
    .zoom(1)
    .add(po.image()
    .url(getTile));

map.add(po.interact())
.add(po.hash());

$(div).mousemove(function(e) {
    ???
})

Предоставляет ли эта библиотека функцию для этого?

Answer 1

Чтобы получить положение мыши на исходном изображении, из которого была создана карта тайлов, используйте следующий код:

$(div).mousemove(function(e) {

  // Get column, row and zoom level of mouse position
  var crz = map.locationCoordinate(map.pointLocation(map.mouse(e)));

  // Normalize the column and row values to the 0..1 range
  var zoomMultiplier = Math.pow(2, crz.zoom-1);

  var x01 = crz.column/zoomMultiplier;
  var y01 = crz.row/zoomMultiplier;

  // Multiply with the original image width and height
  var originalWidth = 32768;
  var originalHeight = 32768;

  var mx = x01*originalWidth;
  var my = y01*originalHeight;

  // Now we have the mouse coordinates on the original image!
  console.log(mx, my);
})