Question

我基本上想要Google Maps中的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在地图中正确显示，但是仍然获取了多个图块。我只想加载一个图块。这是摆弄的OpenLayer解决方案和非工作的Google解决方案一起出现的小提琴：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磁贴的任何建议？

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.

如何获得单个WMS磁贴以覆盖整个Google Map？

1 个答案: