Как заставить одну плитку WMS покрывать всю карту Google?

В основном мне нужна эта функциональность OpenLayer в Картах Google:

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?


javascript google-maps-api-3 gis wms
person HoffZ    schedule 02.07.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам не нужно вычислять 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
 }

Вот рабочий пример для вашего требования.

person Naveen Kumar H S    schedule 06.07.2018
comment
Слой WMS ведет себя странно, когда я масштабирую и панорамирую на Fiddle: части слоя исчезают/появляются, обрезаются перед границей карты и повторяются при панорамировании. - person HoffZ; 09.07.2018
comment
Начальная позиция WMS также неверна по сравнению с версией OpenLayers. - person HoffZ; 09.07.2018