Dessiner sur toile dans les points de boucle sont éteints

Question

J'essaie de dessiner sur une toile, mais les points que je dessine finissent par être au mauvais endroit. Je sais que c'est quelque chose lié à la boucle (et plus probablement à la portée variable et à la séquence des événements) parce que quand je dessine chacun des points de données un à la fois, ils apparaissent au bon endroit. Dès que je boucle sur un tableau de plus d'un élément, les points ne finissent pas au bon endroit (je les dessine sur une carte google maps - oui, j'ai utilisé leur api javascript mais je vais faire quelque chose de plus personnalisé que leur api ne le permet, mais en utilisant leur API pour cartographier des points, j'ai vérifié que mes points se dessinent correctement quand ils sont faits un par un, mais se retrouvent au mauvais endroit quand je boucle sur le tableau) .

map.setCenter(new google.maps.LatLng(data[0].location.lat, data[0].location.long)); 
map.setZoom(15); 
var bounds = map.getBounds(); 
var topLeft = bounds.getNorthEast(); 
var bottomRight = bounds.getSouthWest(); 
var left = topLeft.lat(); 
var top = topLeft.lng(); 
var right = bottomRight.lat(); 
var bottom = bottomRight.lng(); 
var height = Math.abs(top - bottom); 
var width = Math.abs(left - right); 


canvas = $('#mapCanvas').get(0); 
var canvasHeight = canvas.height; 
var canvasWidth = canvas.width; 

context = canvas.getContext('2d'); 

var radius = 10; 

var fromTop; 
var fromLeft; 
var ratioTop; 
var ratioLeft; 
var centerX; 
var centerY; 

_.each(data, function(point) { 
    var latLng = new google.maps.LatLng(point.location.lat, point.location.long); 
    if (bounds.contains(latLng)) { // this point lies in the map, plot it on the canvas! 
    // calculate distance from top left 
    fromTop = Math.abs(top - point.location.long); 
    fromLeft = Math.abs(left - point.location.lat); 
    ratioTop = fromTop/height; 
    ratioLeft = fromLeft/width; 

    centerX = Math.floor(ratioLeft * canvasWidth); 
    centerY = Math.floor(ratioTop * canvasHeight); 

    context.beginPath(); 
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); 
    context.fillStyle = 'green'; 
    context.fill(); 
    context.closePath(); 
    } 
}); 

Note - le tableau de données contient des objets comme celui-ci:

{ _id: 5362a54a038a09d66ac9b36d, 
location: { lat: 46.368619, long: -109.027793 } } 

Voici une illustration du problème: Les points verts sont dessinés sur la toile, les jaunes et violets sont dessinés à l'aide de Google api. Notez que le premier point dessiné chevauche l'emplacement correct. Aussi, comme mentionné précédemment, si je dessine le 3ème point individuellement, ou l'un d'eux individuellement, alors ils apparaissent au bon endroit.

J'ai aussi mis en place un jsFiddle

Answer 1

Avant de lire cette réponse asseyez-vous et PromISSe de ne pas cogner la tête sur un mur! :-)

Votre code est parfaitement bien, vous venez de considérer que la latitude devait être assortie de coordonnées «x», et la longitude avec les coordonnées «y».
Mais en fait l'inverse est juste: revoir les définitions en cas de doute.

Si vous regardez votre «mauvais» résultat, c'est juste le bon résultat pivoté et mis à l'échelle.

donc juste en 1) échangeant ici et là longitude avec la latitude, et 2) en prenant le symétrique de la longitude, vous avez un match parfait avec le résultat de google:

http://jsfiddle.net/gamealchemist/68Gy4/2/

// during the init : 
var bounds = map.getBounds(); 
var topLeft = bounds.getNorthEast(); 
var bottomRight = bounds.getSouthWest(); 
var left = topLeft.lng(); 
var top = topLeft.lat(); 
var right = bottomRight.lng(); 
var bottom = bottomRight.lat(); 
var height = Math.abs(top - bottom); 
var width = Math.abs(left - right); 

// and in your each loop : 
var fromTop = Math.abs(top - point.location.lat); 
var fromLeft = Math.abs(left - point.location.long); 
var ratioTop = fromTop/height; 
var ratioLeft = fromLeft/width; 

var centerX = canvasWidth - Math.floor(ratioLeft * canvasWidth); 
var centerY = Math.floor(ratioTop * canvasHeight); 

parfaitement ok résultat: