Introduces getGetLegendGraphic method
Adds the `getGetLegendGraphic` method to `ImageWMS` and `TileWMS` source. Also adds an example and corresponding tests.
This commit is contained in:
47
examples/wms-getlegendgraphic.js
Normal file
47
examples/wms-getlegendgraphic.js
Normal file
@@ -0,0 +1,47 @@
|
||||
import Map from '../src/ol/Map.js';
|
||||
import View from '../src/ol/View.js';
|
||||
import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js';
|
||||
import ImageWMS from '../src/ol/source/ImageWMS.js';
|
||||
import OSM from '../src/ol/source/OSM.js';
|
||||
|
||||
const wmsSource = new ImageWMS({
|
||||
url: 'https://ahocevar.com/geoserver/wms',
|
||||
params: {'LAYERS': 'topp:states'},
|
||||
ratio: 1,
|
||||
serverType: 'geoserver'
|
||||
});
|
||||
|
||||
const updateLegend = function(resolution) {
|
||||
const graphicUrl = wmsSource.getGetLegendGraphicUrl(resolution);
|
||||
const img = document.getElementById('legend');
|
||||
img.src = graphicUrl;
|
||||
};
|
||||
|
||||
const layers = [
|
||||
new TileLayer({
|
||||
source: new OSM()
|
||||
}),
|
||||
new ImageLayer({
|
||||
extent: [-13884991, 2870341, -7455066, 6338219],
|
||||
source: wmsSource
|
||||
})
|
||||
];
|
||||
|
||||
const map = new Map({
|
||||
layers: layers,
|
||||
target: 'map',
|
||||
view: new View({
|
||||
center: [-10997148, 4569099],
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
|
||||
// Initial legend
|
||||
const resolution = map.getView().getResolution();
|
||||
updateLegend(resolution);
|
||||
|
||||
// Update the legend when the resolution changes
|
||||
map.getView().on('change:resolution', function(event) {
|
||||
const resolution = event.target.getResolution();
|
||||
updateLegend(resolution);
|
||||
});
|
||||
Reference in New Issue
Block a user