52 lines
1.6 KiB
JavaScript
52 lines
1.6 KiB
JavaScript
goog.require('ol.Map');
|
|
goog.require('ol.RendererHint');
|
|
goog.require('ol.View2D');
|
|
goog.require('ol.layer.TileLayer');
|
|
goog.require('ol.projection');
|
|
goog.require('ol.source.BingMaps');
|
|
|
|
|
|
var layer = new ol.layer.TileLayer({
|
|
source: new ol.source.BingMaps({
|
|
key: 'AgtFlPYDnymLEe9zJ5PCkghbNiFZE9aAtTy3mPaEnEBXqLHtFuTcKoZ-miMC3w7R',
|
|
style: 'Aerial'
|
|
})
|
|
});
|
|
|
|
var map = new ol.Map({
|
|
layers: [layer],
|
|
renderer: ol.RendererHint.WEBGL,
|
|
target: 'map',
|
|
view: new ol.View2D({
|
|
center: ol.projection.transform(
|
|
[-9.375, 51.483333], 'EPSG:4326', 'EPSG:3857'),
|
|
zoom: 15
|
|
})
|
|
});
|
|
|
|
var increaseHue = document.getElementById('increase-hue');
|
|
increaseHue.addEventListener('click', function() {
|
|
layer.setHue(layer.getHue() + 0.25);
|
|
}, false);
|
|
var resetHue = document.getElementById('reset-hue');
|
|
resetHue.addEventListener('click', function() {
|
|
layer.setHue(0);
|
|
}, false);
|
|
var decreaseHue = document.getElementById('decrease-hue');
|
|
decreaseHue.addEventListener('click', function() {
|
|
layer.setHue(layer.getHue() - 0.25);
|
|
}, false);
|
|
|
|
var increaseSaturation = document.getElementById('increase-saturation');
|
|
increaseSaturation.addEventListener('click', function() {
|
|
layer.setSaturation(layer.getSaturation() + 0.25);
|
|
}, false);
|
|
var resetSaturation = document.getElementById('reset-saturation');
|
|
resetSaturation.addEventListener('click', function() {
|
|
layer.setSaturation(1);
|
|
}, false);
|
|
var decreaseSaturation = document.getElementById('decrease-saturation');
|
|
decreaseSaturation.addEventListener('click', function() {
|
|
layer.setSaturation(layer.getSaturation() - 0.25);
|
|
}, false);
|