使用ImageMapType,Tile边界框替换Google Maps v3中的GTileLayer？

Question

我需要更新此代码:

radar_layer.getTileUrl=function(tile,zoom) {

    var llp = new GPoint(tile.x*256,(tile.y+1)*256);
    var urp = new GPoint((tile.x+1)*256,tile.y*256);
    var ll = G_NORMAL_MAP.getProjection().fromPixelToLatLng(llp,zoom);
    var ur = G_NORMAL_MAP.getProjection().fromPixelToLatLng(urp,zoom);
    var dt = new Date();
    var nowtime = dt.getTime();

    var tileurl = "http://demo.remoteservice.com/cgi-bin/serve.cgi?";
        tileurl+="bbox="+ll.lng()+","+ll.lat()+","+ur.lng()+","+ur.lat();
        tileurl+="&width=256&height=256&reaspect=false&cachetime="+nowtime;

    return tileurl;
};

我得到了:

var DemoLayer = new google.maps.ImageMapType({

     getTileUrl: function(coord, zoom) {

     var llp = new google.maps.Point(coord.x*256,(coord.y+1)*256);
     var urp = new google.maps.Point((coord.x+1)*256,coord.y*256);
     var ll = googleMap.getProjection().fromPointToLatLng(llp);
     var ur = googleMap.getProjection().fromPointToLatLng(urp);
     var dt = new Date();
     var nowtime = dt.getTime();

     var tileurl = "http://demo.remoteservice.com/cgi-bin/serve.cgi?";
         tileurl+="bbox="+ll.lng()+","+ll.lat()+","+ur.lng()+","+ur.lat();
  tileurl+="&width=256&height=256&reaspect=false&cachetime="+nowtime;

     return tileurl;

     },
             tileSize: new google.maps.Size(256, 256),
             opacity:1.0,
             isPng: true
         });

具体来说,我需要这部分的帮助:

var llp = new google.maps.Point(coord.x*256,(coord.y+1)*256);
 var urp = new google.maps.Point((coord.x+1)*256,coord.y*256);
 var ll = googleMap.getProjection().fromPointToLatLng(llp);
 var ur = googleMap.getProjection().fromPointToLatLng(urp);

该服务需要我理解的拼接框.但是,ll和ur似乎根本不正确.

我让它工作并在每个瓷砖中显示整个地图边界框,但当然这不是我需要的.

如果我可以解决这个问题,那么任何见解都会非常感激,不会让V3中的GTileLayers很好,直到那时我才感到沮丧.

Answer 1

在我的情况下修复是使用来自同一发布者的更新的tile服务.它接受更简单的参数:

   globalfoovar = new google.maps.ImageMapType({
    getTileUrl: function(tile, zoom) {
        return "http://bar.com/" + zoom + "/" + tile.x + "/" + tile.y +".png"; 
    },
    tileSize: new google.maps.Size(256, 256),
    opacity:0.60,
    isPng: true
});

googleMap.overlayMapTypes.push(null); // create empty overlay entry
googleMap.overlayMapTypes.setAt("0",globalfoovar); // set the overlay, 0 index

// if you want to hide the layer later (toggle):
// googleMap.overlayMapTypes.setAt("0",null);

如您所见,这比我在问题描述中发布的代码要容易得多.

但是,如果你还在阅读,你可能仍然想要原始问题的答案,即将latlng转换为像素.别担心,我也有解决方案.

要访问4个有用的latlng,point和pixel转换,您需要添加一个虚拟OverlayView.

步骤1)定义存根,使其全局可用,以及您的地图和其他变量:

var googleMap = {}; // global map var
var mapCanvasStub = {}; // map OverlayView var

步骤2)渲染地图后,设置这个虚拟/存根OverlayView,如下所示:

googleMap = new google.maps.Map($('#mapCanvas')[0]); // google map init

mapCanvasStub = function (map) { this.setMap(map); }  // start building overlay stub
mapCanvasStub.prototype = new google.maps.OverlayView(); 
mapCanvasStub.prototype.draw = function() {}; 
mapCanvasStub = new mapCanvasStub(googleMap); // bin dthe overlay to the map

现在你已经将一个功能性的OverlayView绑定到地图上,每当你需要使用这些转换时,你可以这样做:

var projection = mapCanvasStub.getProjection();
var position = projection.fromLatLngToContainerPixel( latLng );
                   // or fromContainerPixelToLatLng()
                   // or fromDivPixelToLatLng()
                   // or fromLatLngToDivPixel()
                   // or fromLatLngToDivPixel()

在我的情况下,我使用它来创建自定义信息气泡,这是我的点击事件的片段:

function customAlertClick(a,b,c) {

    var projection = mapCanvasStub.getProjection();
    var position = projection.fromLatLngToContainerPixel(b);
    var top = (position.y + parseInt($('#mapCanvas').position().top));
    var lft = (position.x + parseInt($('#mapCanvas').position().left));

    // obviously this is an overly simple example
    $('#foo').css('top',top + 'px');
    $('#foo').css('lft',left + 'px');
}

希望这有助于其他人跳转到V3.

如果你想知道为什么我们必须跳过这些额外的箍来做一些在V2中如此简单的事情,当你想到它时,答案是非常明显的.V3设置为在带宽和CPU功率有限的移动设备上运行良好.他们已尽可能多地删除代码以获得简单的地图渲染,并且如果您绝对需要,他们希望您手动连接这些额外内容.

如果我有更多的时间,我会写一个sample.html,但这应该让你去.

Answer 2

谢谢您提供详细信息。事实上，就我而言，我无法更改 API 以使用我需要传递 LatLng 的图块编号。我找到了这个解决方案......到目前为止它对我有用：

var myMapOptions = {
          getTileUrl: function(coord,zoom) { 
            var proj = map.getProjection();
            var zfactor=Math.pow(2,zoom);
            var top=proj.fromPointToLatLng(new google.maps.Point(coord.x*256/zfactor,coord.y*256/zfactor));
            var bot=proj.fromPointToLatLng(new google.maps.Point((coord.x+1)*256/zfactor,(coord.y+1)*256/zfactor));
            url = "/layer/layer_"+zoom+"_"+top.lng().toFixed(6)+"_"+bot.lat().toFixed(6)+"_"+bot.lng().toFixed(6)+"_"+top.lat().toFixed(6)+".png";
        return url; 
       },
      tileSize: new google.maps.Size(256, 256),
      isPng: true,
      opacity: 0.4
     }