javascript - 如何让单个 WMS 瓦片覆盖整个 Google map ？

Question

我基本上想要 Google map 中的这个 OpenLayer 功能:

new ol.layer.Image({
  source: new ol.source.ImageWMS({
    url: 'someUrl',
    params: {
      'LAYERS': 'someLayer',
      'SRS': 'EPSG:3857',
      'VERSION': '1.1.1'
    },
    ratio: 1,
  })
})

下面是我尝试使用 Google Maps API 实现这一点。这是一些现有代码，我已将静态 256 大小更改为映射高度/宽度。 WMS 在 map 中正确显示，但仍获取了多个图 block 。我只想加载一个图 block 。这是一起显示工作 OpenLayer 解决方案和非工作 Google 解决方案的 fiddle :https://jsfiddle.net/HoffZ/9zjd4052/

  var map = new google.maps.Map(document.getElementById("g-map"), {
    zoom: 4,
    center: new google.maps.LatLng(40.0, -100.0)
  });

  // "Normal" 256 tiles
  //var TILE_WIDTH = 256;
  //var TILE_HEIGHT = 256;

  // Set tile size to map size to get just one single tile. But 
  // still  multiple tiles is fetched from server
  var TILE_WIDTH = getMapWidth();
  var TILE_HEIGHT = getMapHeight();


  var wmsOptions = {
    getTileUrl: WMSGetTileUrl,
    tileSize: new google.maps.Size(TILE_WIDTH, TILE_HEIGHT)
  };

  var wmsMapType = new google.maps.ImageMapType(wmsOptions);
  map.overlayMapTypes.insertAt(0, wmsMapType);

  function WMSGetTileUrl(tile, zoom) {
    var projection = map.getProjection();
    var zpow = Math.pow(2, zoom);
    var ul = new google.maps.Point(tile.x * TILE_WIDTH / zpow, (tile.y + 1) * TILE_HEIGHT / zpow);
    var lr = new google.maps.Point((tile.x + 1) * TILE_WIDTH / zpow, (tile.y) * TILE_HEIGHT / zpow);
    var ulw = projection.fromPointToLatLng(ul);
    var lrw = projection.fromPointToLatLng(lr);
    var baseURL = "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi?";
    var version = "1.1.1";
    var request = "GetMap";
    var format = "image/png"; //type of image returned 
    var layers = "nexrad-n0r-wmst";
    var srs = "EPSG:4326";
    var bbox = ulw.lng() + "," + ulw.lat() + "," + lrw.lng() + "," + lrw.lat();

    var width = TILE_WIDTH;
    var height = TILE_HEIGHT;

    var styles = "default";

    var url = baseURL + "version=" + version + "&request=" + request + 
    "&Layers=" + layers + "&Styles=" + styles + "&SRS=" + srs + "&BBOX=" + 
    bbox + "&width=" + width + "&height=" + height + "&format=" + format +
    "&TRANSPARENT=TRUE";
    return url;
  }

  function getMapHeight() {
    var h = map.getDiv().offsetHeight;
    console.log('Google Map height is ' + h);
    return h;
  }

  function getMapWidth() {
    var w = map.getDiv().offsetWidth;
    console.log('Google Map width is ' + w);
    return w;
  }

关于如何只获取一个 WMS tile 有什么建议吗？

Answer 1

您不必手动计算 bbox。 Google API 在 map 对象上提供该功能，如下所示。

function WMSGetTileUrl(tile, zoom) {
    var bond = map.getBounds();
    var ulw = bond.getSouthWest();
    var lrw = bond.getNorthEast();

    //other stuffs

    var bbox = ulw.lng() + "," + ulw.lat() + "," + lrw.lng() + "," + lrw.lat();

    //your other stuffs
 }

这是 working sample for your requirement.