在google map墨卡托投影上将纬度值转换为y

Question

关于这个话题有很多问题，也有很多答案，但似乎没有一个对我的代码起作用，不确定是不是转换公式或其他东西在整个代码上有问题。经度值似乎如预期的那样起作用，但我未能将纬度转换为地图上的y值。我将添加一个jsfiddle和代码，以及我尝试过的公式的一些链接。我所读到的谷歌地图是一种墨卡托投影，它使用了投影的双重版本（椭球和球面），通用公式在这种情况下不会那么精确，但我没有20km的差异，而是点在地图中的任何位置。我将感谢任何帮助与这个特定的情况，请尝试提供一些代码，不要指出我的链接，除非您测试它与我做的工作，因为我可能已经测试，但没有工作，或我不确定如何实现它，谢谢提前。

http://jsfidle.net/ve94p/

var mapReach = {
    init: function(mapId, canvasId) {
        // Some Google map configurations here....

        this.map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

        this.nodes = [];
        this.$mapCanvas = $('#'+ mapId);
        this.canvas = document.getElementById(canvasId);

    },

    /**
     * Gets the current boundaries of the google map view-port in latitude and longitude
     * @return {} top-rigth & bottom-left lat,lon values.
     */

    getCurrentBounds: function(){
        var lng0 = this.map.getBounds().getNorthEast().lng(); // top-right x
        var lat0 = this.map.getBounds().getNorthEast().lat(); // top-right y
        var lng1 = this.map.getBounds().getSouthWest().lng(); // bottom-left x
        var lat1 = this.map.getBounds().getSouthWest().lat(); // bottom-left y

        return {topRight: {lat: lat0, lon: lng0}, bottomLeft: {lat: lat1, lon: lng1}};
    },

    /**
     * Adds nodes to be drawn on the canvas that overlays the map
     * @param {number} lat the latitude (y) geoposition of the node
     * @param {number} lon the longitude (x) geoposition of the node
     * @return {} top-rigth & bottom-left lat,lon values.
     */

    add: function(lat, lon){ // lat y , lon x
        this.nodes.push({lat:lat, lon:lon});
    },

    canvasSetUp: function(){
        if(!this.isCanvasSetted){
            this.width = this.canvas.width =  this.$mapCanvas.width();
            this.height = this.canvas.height = this.$mapCanvas.height();
            this.isCanvasSetted = true;
                    if(LOGGING){
                console.log('width:' + this.width );
                console.log('height:' + this.height );
                    }
        }
    },

    /**
     * Draws the nodes in place
     * @return void
     */

    draw: function() {
        var ctx  = this.canvas.getContext('2d');
        var currentBounds = this.getCurrentBounds();
        var yMin = currentBounds.bottomLeft.lat;
        var yMax = currentBounds.topRight.lat;
        var tempMinY = (yMin < 0) ?  Math.abs(yMin) : -yMin;
        yMax = (yMax > 0) ?  Math.abs(yMax) : yMax;
        var yRange = yMax + tempMinY;

        var xMin = currentBounds.bottomLeft.lon;
        var xMax = currentBounds.topRight.lon;
        var tempMinX = (xMin < 0) ?  Math.abs(xMin) : xMin;
        xMax = (xMax > 0) ?  Math.abs(xMax) : xMax;
        var xRange  = xMax + tempMinX;

        var mapLatBottomDegree = yMin * Math.PI / 180;

        if(LOGGING){
            console.log(currentBounds);
            console.log('x-range:' + xRange + ', y-range:' + yRange);
        }

        ctx.clearRect(0, 0, this.width, this.height);

        for (var i in this.nodes) {
            ctx.save();

            ctx.fillStyle = '#ffff00';

            // Translates lon to x value
            var x = (this.nodes[i].lon - xMin) * (this.width / xRange);

            var latRad = this.nodes[i].lat * Math.PI / 180;
            var mercN = Math.log( Math.tan( (Math.PI/4) + (latRad / 2) ) );
            var y = (this.height/2) - ( this.width * mercN / (2*Math.PI) );

            if(LOGGING){
                //console.log('x-delta:' + xDelta );
                console.log('lat:' + this.nodes[i].lat + ', lon:' + this.nodes[i].lon);
                console.log('y:' + y + ', x:' + x);
            }

            ctx.beginPath();
            ctx.arc(x, y, 4, 0, Math.PI*2, true);
            ctx.fill();
            ctx.closePath();

            ctx.restore();

        }


    },

    placeNodes: function() {
        // Lat, Lon Values for the following cities
        this.add(5, -74.226523);          // Bogota/Colombia
        this.add(48.944151, 2.263183);    // Paris/France
        this.add(-33.907758, 18.391732);  // Cape Town/South Africa
        this.add(49.254814, -123.087512); // Vancouver/Canada
        this.add(25.792680, -80.232110);  // Miami/Florida
        this.add(35.693089, 139.704742);  // Tokyo/Japan
        this.add(30.034134, 31.218933);   // Cairo/Egypt
        this.draw();
    }

};

var LOGGING = false;

$(document).ready(function(){
    mapReach.init('map-canvas', 'activity-reach');
    google.maps.event.addListener(mapReach.map, 'bounds_changed',
            function() {
                mapReach.canvasSetUp();
                mapReach.placeNodes();
            });
});

这是我研究过的一些公式，但没有成功，可能是我用错误的方法实现了这些公式，或者它们实际上不能用这个公式。

暗纬度/经度指向墨卡托投影上的像素(x，y)

http://alastaira.wordpress.com/2011/01/23/the-google-maps-bing-maps-spherical-mercator-projection/

墨卡托经度和纬度计算在（英国的）裁剪地图上的x和y

谢谢你花时间看书，帮我解决问题。

Answer 1

你还需要从地图的顶部和底部的墨卡托投影，还需要一个因子。然后可以做一个线性变换：将lat/lon转换为像素坐标？。