I have a worldwind tile server that works fine in OpenLayers 2. It is using a simple BMNG layer like so: http://worldwind.arc.nasa.gov/java/server/readme.html. Unfortunately, I cannot share the tile server with you because it is on a closed network. However, it is similar to the URL example provided below.
However, I am trying to upgrade us to OpenLayers 3. For some reason, the basic map will not display when I use OpenLayers 3.
I came back to this side of the world, and ran the following two tests. Now that I have matching URLs and layers in both examples, the OL3 version does not work either.
OPENLAYERS 2
<html>
<head>
<title>OpenLayers 2</title>
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/style.css" type="text/css">
<script src="http://dev.openlayers.org/releases/OpenLayers-2.13.1/lib/OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init() {
map = new OpenLayers.Map( 'map' );
var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'});
map.addLayer(wmsLayer);
map.setCenter(new OpenLayers.LonLat(0,0),4);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">WMS Example</h1>
<p id="shortdesc">
Shows the basic use of openlayers using a WMS layer
</p>
<div id="map" class="smallmap"></div>
</body>
</html>
And OPENLAYERS 3:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.11.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.11.0/build/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var layers = [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://vmap0.tiles.osgeo.org/wms/vmap0',
params: {'LAYERS': 'basic', 'TILED': true},
serverType: 'geoserver'
})
})
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
</script>
</body>
</html>
On my network (not this side of the world), my tile server which displays a map perfectly in OpenLayers 2, is not working with the same code in OpenLayers 3.
Does anybody know what setting could be off between OL3 and WorldWind?
MORE INFORMATION:
Using mongoose-free-5.6, I am making my directory a temporary web-server. Now, given that, OL3 is making tile requests and getting responses from the tile server. I investigated the URL in the request header of one of the requests:
http://vmap0.tiles.osgeo.org/wms/vmap0?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=true&LAYERS=basic&TILED=true&WIDTH=256&HEIGHT=256&CRS=EPSG%3A3857&STYLES=&BBOX=-2504688.542848654%2C0%2C1.3969838619232178e-9%2C2504688.5428486555
And I get this in Chrome:
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<ServiceExceptionReport xmlns="http://www.opengis.net/ogc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.3.0" xsi:schemaLocation="http://www.opengis.net/ogc http://schemas.opengis.net/wms/1.3.0/exceptions_1_3_0.xsd">
<ServiceException code="InvalidSRS">
msWMSLoadGetMapParams(): WMS server error. Invalid CRS given : CRS must be valid for all requested layers.
</ServiceException>
</ServiceExceptionReport>
FINAL ANSWER: Adding the projection to the View object is what got this to work here and on my closed network as well.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://openlayers.org/en/v3.11.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.11.0/build/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script>
var layers = [
new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://vmap0.tiles.osgeo.org/wms/vmap0',
params: {'LAYERS': 'basic', 'TILED': true},
serverType: 'geoserver'
})
})
];
var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
projection: ol.proj.get('EPSG:4326'),
center: [0, 0],
zoom: 2
})
});
</script>
</body>
</html>
