This commit is contained in:
Javier Jimenez Shaw 2017-08-14 11:29:53 +02:00 committed by Iván Sánchez Ortega
parent 1491de5acd
commit a03f41b296
6 changed files with 27 additions and 27 deletions

View File

@ -10,7 +10,7 @@ title: WMS example
crs: L.CRS.EPSG4326 crs: L.CRS.EPSG4326
}); });
var wmsLayer = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', { var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'nasa:bluemarble' layers: 'nasa:bluemarble'
}).addTo(map); }).addTo(map);

View File

@ -9,7 +9,7 @@ title: WMS example
zoom: 3 zoom: 3
}); });
var wmsLayer = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', { var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne' layers: 'ne:ne'
}).addTo(map); }).addTo(map);

View File

@ -9,7 +9,7 @@ title: WMS example
zoom: 3 zoom: 3
}); });
var wmsLayer = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', { var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'nasa:bluemarble' layers: 'nasa:bluemarble'
}).addTo(map); }).addTo(map);

View File

@ -10,19 +10,19 @@ title: WMS example
}); });
var basemaps = { var basemaps = {
Countries: L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', { Countries: L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne_10m_admin_0_countries' layers: 'ne:ne_10m_admin_0_countries'
}), }),
Boundaries: L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', { Boundaries: L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne_10m_admin_0_boundary_lines_land' layers: 'ne:ne_10m_admin_0_boundary_lines_land'
}), }),
'Countries, then boundaries': L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', { 'Countries, then boundaries': L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne_10m_admin_0_countries,ne:ne_10m_admin_0_boundary_lines_land' layers: 'ne:ne_10m_admin_0_countries,ne:ne_10m_admin_0_boundary_lines_land'
}), }),
'Boundaries, then countries': L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', { 'Boundaries, then countries': L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne_10m_admin_0_boundary_lines_land,ne:ne_10m_admin_0_countries' layers: 'ne:ne_10m_admin_0_boundary_lines_land,ne:ne_10m_admin_0_countries'
}) })
}; };

View File

@ -9,11 +9,11 @@ var map = L.map('map', {
zoom: 3 zoom: 3
}); });
var tms_ne = L.tileLayer('http://demo.opengeo.org/geoserver/gwc/service/tms/1.0.0/ne:ne@EPSG:900913@png/{z}/{x}/{y}.png', { var tms_ne = L.tileLayer('https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0/ne:ne@EPSG:900913@png/{z}/{x}/{y}.png', {
tms: true tms: true
}).addTo(map); }).addTo(map);
var tms_bluemarble = L.tileLayer('http://demo.opengeo.org/geoserver/gwc/service/tms/1.0.0/nasa:bluemarble@EPSG:900913@jpg/{z}/{x}/{y}.jpg', { var tms_bluemarble = L.tileLayer('https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0/nasa:bluemarble@EPSG:900913@jpg/{z}/{x}/{y}.jpg', {
tms: true tms: true
}); });

View File

@ -18,21 +18,21 @@ TMS stands for *tiled map service*, and is a map tiling standard more focused on
## WMS in Leaflet ## WMS in Leaflet
When somebody publishes a WMS service, most likely they link to something called a `GetCapabilities` document. For this tutorial, we'll use the demo map services from GeoServer, at http://demo.opengeo.org/geoserver/web/. As you can see in that page, "WMS" links to the following URL: When somebody publishes a WMS service, most likely they link to something called a `GetCapabilities` document. For this tutorial, we'll use the demo map services from GeoServer, at https://demo.boundlessgeo.com/geoserver/web/. As you can see in that page, "WMS" links to the following URL:
http://demo.opengeo.org/geoserver/ows?service=wms&version=1.3.0&request=GetCapabilities https://demo.boundlessgeo.com/geoserver/ows?service=wms&version=1.3.0&request=GetCapabilities
Leaflet does not understand WMS `GetCapabilities` documents. Instead, you have to create a `L.TileLayer.WMS` layer, provide the base WMS URL, and specify whatever WMS options you need. Leaflet does not understand WMS `GetCapabilities` documents. Instead, you have to create a `L.TileLayer.WMS` layer, provide the base WMS URL, and specify whatever WMS options you need.
The base WMS URL is simply the `GetCapabilities` URL, without any parameters, like so: The base WMS URL is simply the `GetCapabilities` URL, without any parameters, like so:
http://demo.opengeo.org/geoserver/ows? https://demo.boundlessgeo.com/geoserver/ows?
And the way to use that in a Leaflet map is simply: And the way to use that in a Leaflet map is simply:
var map = L.map(mapDiv, mapOptions); var map = L.map(mapDiv, mapOptions);
var wmsLayer = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', wmsOptions).addTo(map); var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', wmsOptions).addTo(map);
An instance of `L.TileLayer.WMS` needs at least one option: `layers`. Be careful, as the concept of "layer" in Leaflet is different from the concept of "layer" in WMS! An instance of `L.TileLayer.WMS` needs at least one option: `layers`. Be careful, as the concept of "layer" in Leaflet is different from the concept of "layer" in WMS!
@ -42,7 +42,7 @@ WMS servers define a set of *layers* in the service. These are defined in the `G
We can see that the OpenGeo demo WMS has a WMS layer named `ne:ne` with a basemap. Let's see how it looks: We can see that the OpenGeo demo WMS has a WMS layer named `ne:ne` with a basemap. Let's see how it looks:
var wmsLayer = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', { var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne' layers: 'ne:ne'
}).addTo(map); }).addTo(map);
@ -51,7 +51,7 @@ We can see that the OpenGeo demo WMS has a WMS layer named `ne:ne` with a basema
Or we can try the `nasa:bluemarble` WMS layer: Or we can try the `nasa:bluemarble` WMS layer:
var wmsLayer = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', { var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'nasa:bluemarble' layers: 'nasa:bluemarble'
}).addTo(map); }).addTo(map);
@ -62,7 +62,7 @@ The `layers` option is a comma-separated list of layers. If a WMS service has de
For the example WMS server we're using, there is a `ne:ne_10m_admin_0_countries` WMS layer showing country landmasses and country names, and a `ne:ne_10m_admin_0_boundary_lines_land` WMS layer showing country boundaries. The WMS server will compose both layers in one image if we request both, separated with a comma: For the example WMS server we're using, there is a `ne:ne_10m_admin_0_countries` WMS layer showing country landmasses and country names, and a `ne:ne_10m_admin_0_boundary_lines_land` WMS layer showing country boundaries. The WMS server will compose both layers in one image if we request both, separated with a comma:
var countriesAndBoundaries = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', { var countriesAndBoundaries = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne_10m_admin_0_countries,ne:ne_10m_admin_0_boundary_lines_land' layers: 'ne:ne_10m_admin_0_countries,ne:ne_10m_admin_0_boundary_lines_land'
}).addTo(map); }).addTo(map);
@ -71,19 +71,19 @@ Note this will request *one* image to the WMS server. This is different than cre
If we combine this with the [layers control](/examples/layers-control.html), then we can build a simple map to see the difference: If we combine this with the [layers control](/examples/layers-control.html), then we can build a simple map to see the difference:
var basemaps = { var basemaps = {
Countries: L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', { Countries: L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne_10m_admin_0_countries' layers: 'ne:ne_10m_admin_0_countries'
}), }),
Boundaries: L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', { Boundaries: L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne_10m_admin_0_boundary_lines_land' layers: 'ne:ne_10m_admin_0_boundary_lines_land'
}), }),
'Countries, then boundaries': L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', { 'Countries, then boundaries': L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne_10m_admin_0_countries,ne:ne_10m_admin_0_boundary_lines_land' layers: 'ne:ne_10m_admin_0_countries,ne:ne_10m_admin_0_boundary_lines_land'
}), }),
'Boundaries, then countries': L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', { 'Boundaries, then countries': L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'ne:ne_10m_admin_0_boundary_lines_land,ne:ne_10m_admin_0_countries' layers: 'ne:ne_10m_admin_0_boundary_lines_land,ne:ne_10m_admin_0_countries'
}) })
}; };
@ -109,7 +109,7 @@ Also note that Leaflet supports very few [coordinate systems](https://en.wikiped
crs: L.CRS.EPSG4326 crs: L.CRS.EPSG4326
}); });
var wmsLayer = L.tileLayer.wms('http://demo.opengeo.org/geoserver/ows?', { var wmsLayer = L.tileLayer.wms('https://demo.boundlessgeo.com/geoserver/ows?', {
layers: 'nasa:bluemarble' layers: 'nasa:bluemarble'
}).addTo(map); }).addTo(map);
@ -122,26 +122,26 @@ Leaflet doesn't have explicit support for TMS services, but the tile naming stru
Using the same OpenGeo WMS/TMS server demo, we can see there's a TMS endpoint at: Using the same OpenGeo WMS/TMS server demo, we can see there's a TMS endpoint at:
http://demo.opengeo.org/geoserver/gwc/service/tms/1.0.0 https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0
Checking the [MapCache help about TMS](http://mapserver.org/mapcache/services.html) and the [TMS specification](https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification) you can see that the URL for a map tile in TMS looks like: Checking the [MapCache help about TMS](http://mapserver.org/mapcache/services.html) and the [TMS specification](https://wiki.osgeo.org/wiki/Tile_Map_Service_Specification) you can see that the URL for a map tile in TMS looks like:
http://base_url/tms/1.0.0/ {tileset} / {z} / {x} / {y} .png http://base_url/tms/1.0.0/ {tileset} / {z} / {x} / {y} .png
To use the OpenGeo TMS services as a `L.TileLayer`, we can check the capabilities document (the same as the base endpoint, in our case [`http://demo.opengeo.org/geoserver/gwc/service/tms/1.0.0`](http://demo.opengeo.org/geoserver/gwc/service/tms/1.0.0)) to see what `tileset`s are available, and build our base URLs: To use the OpenGeo TMS services as a `L.TileLayer`, we can check the capabilities document (the same as the base endpoint, in our case [`https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0`](https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0)) to see what `tileset`s are available, and build our base URLs:
http://demo.opengeo.org/geoserver/gwc/service/tms/1.0.0/ne:ne@EPSG:900913@png/{z}/{x}/{y}.png https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0/ne:ne@EPSG:900913@png/{z}/{x}/{y}.png
http://demo.opengeo.org/geoserver/gwc/service/tms/1.0.0/nasa:bluemarble@EPSG:900913@jpg/{z}/{x}/{y}.jpg https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0/nasa:bluemarble@EPSG:900913@jpg/{z}/{x}/{y}.jpg
And use the `tms:true` option when instantiating the layers, like so: And use the `tms:true` option when instantiating the layers, like so:
var tms_ne = L.tileLayer('http://demo.opengeo.org/geoserver/gwc/service/tms/1.0.0/ne:ne@EPSG:900913@png/{z}/{x}/{y}.png', { var tms_ne = L.tileLayer('https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0/ne:ne@EPSG:900913@png/{z}/{x}/{y}.png', {
tms: true tms: true
}).addTo(map); }).addTo(map);
var tms_bluemarble = L.tileLayer('http://demo.opengeo.org/geoserver/gwc/service/tms/1.0.0/nasa:bluemarble@EPSG:900913@jpg/{z}/{x}/{y}.jpg', { var tms_bluemarble = L.tileLayer('https://demo.boundlessgeo.com/geoserver/gwc/service/tms/1.0.0/nasa:bluemarble@EPSG:900913@jpg/{z}/{x}/{y}.jpg', {
tms: true tms: true
}); });