I'm using OpenLayers 3 (both v3.4 and v3.5) to display a tiled image from a NASA WMTS server and have a question about using the layer wrapX parameter on a global map. When I set wrapX=true in the layer specification, I can pan left and right, but the layer image doesn't line up - there's an empty gap between -180 and +180.
Am I missing some simple parameter to tell OL3 to glue the bounds together?
Here's how the map is built:
var extent = [-180, -90, 180, 90];var map = new ol.Map({ view: new ol.View({ maxResolution: 0.5625, projection: ol.proj.get("EPSG:4326"), extent: extent, center: center_coord, zoom: 1, maxZoom: 8 }), renderer: ["canvas", "dom"]});And here's the code to build the layer:
var bmng = new ol.source.WMTS({ wrapX: true, url: "http://map1{a-c}.vis.earthdata.nasa.gov/wmts-geo/wmts.cgi", layer: "BlueMarble_NextGeneration", matrixSet: "EPSG4326_500m", format: "image/jpeg", tileGrid: new ol.tilegrid.WMTS({ origin: [-180, 90], resolutions: [ 0.5625, 0.28125, 0.140625, 0.0703125, 0.03515625, 0.017578125, 0.0087890625, 0.00439453125, 0.002197265625 ], matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8], tileSize: 512 })});layer_bmng = new ol.layer.Tile({ source: bmng,});map.addLayer(layer_bmng);map.addLayer(bmng);Now, it occurs to me that this might be related to another issue. I note that the default map doesn't actually show the full [-180, 180] longitude extent - on load, the map shows only roughly [-160, 160] although I can pan left/right and see the rest of the map. The HTML and CSS are pretty simple, but I suppose it might be a CSS issue. The map is in an empty :
and the CSS for the map looks like this:
#map { background-color: #000000; border: 1px solid gray; width: 100%; height: 100%;}Thanks in advance.
أكثر...
Am I missing some simple parameter to tell OL3 to glue the bounds together?
Here's how the map is built:
var extent = [-180, -90, 180, 90];var map = new ol.Map({ view: new ol.View({ maxResolution: 0.5625, projection: ol.proj.get("EPSG:4326"), extent: extent, center: center_coord, zoom: 1, maxZoom: 8 }), renderer: ["canvas", "dom"]});And here's the code to build the layer:
var bmng = new ol.source.WMTS({ wrapX: true, url: "http://map1{a-c}.vis.earthdata.nasa.gov/wmts-geo/wmts.cgi", layer: "BlueMarble_NextGeneration", matrixSet: "EPSG4326_500m", format: "image/jpeg", tileGrid: new ol.tilegrid.WMTS({ origin: [-180, 90], resolutions: [ 0.5625, 0.28125, 0.140625, 0.0703125, 0.03515625, 0.017578125, 0.0087890625, 0.00439453125, 0.002197265625 ], matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8], tileSize: 512 })});layer_bmng = new ol.layer.Tile({ source: bmng,});map.addLayer(layer_bmng);map.addLayer(bmng);Now, it occurs to me that this might be related to another issue. I note that the default map doesn't actually show the full [-180, 180] longitude extent - on load, the map shows only roughly [-160, 160] although I can pan left/right and see the rest of the map. The HTML and CSS are pretty simple, but I suppose it might be a CSS issue. The map is in an empty :
and the CSS for the map looks like this:
#map { background-color: #000000; border: 1px solid gray; width: 100%; height: 100%;}Thanks in advance.
أكثر...