如何在Google地图中转换自定义叠加层以进行投影?

时间:2010-07-30 17:43:08

标签: javascript google-maps css3 google-maps-api-3 proj4js

我正在开发一个使用Google Maps API v3的应用程序。我想制作每侧正方形1000公里的自定义叠加(每个叠加实际上是1000x1000透明png,每个像素代表1平方公里)。我目前的实施是:

function PngOverlay(map,loc) {
    this._png = null;
    this._location = loc; //lat,lng of the square's center
    this.setMap(map);
}

PngOverlay.prototype = new google.maps.OverlayView();

PngOverlay.prototype.onAdd = function() {
    this._png = new Element('image',{ //using mootools
    'src': pngForLoc(this._location),
    'styles': {
        'width': 1000,
        'height': 1000,         
        'position': 'absolute'
    }
});

var panes = this.getPanes();
    panes.overlayLayer.appendChild(this._png);
}

PngOverlay.prototype.onRemove = function() {
    this._png.parentNode.removeChild(this._png);
    this._png = null;
}

PngOverlay.prototype.draw = function() {
    var dp = this.getProjection().fromLatLngToDivPixel(this._location);     
    var ps = this._png.getSize();

    var t = dp.y - (ps.y / 2);
    this._png.setStyle('top',t);

    var l = dp.x - (ps.x / 2);
    this._png.setStyle('left',l);
}

我的问题是:如果有任何问题,我需要做些什么来考虑Google地图的预测?我对墨卡托的有限理解是它保留了水平距离而不是垂直距离。我怎样才能适当地转换()我的png来解释它?

1 个答案:

答案 0 :(得分:0)

没有足够的信息,但您可能会发现开源proj4js库很有用,因为它可以执行各种投影转换,例如。谷歌的球形墨卡托投影系统。