Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //declare the layer
- var osmLayer = new ol.layer.Tile({
- source: new ol.source.OSM()
- });
- //asign the listeners on the source of tile layer
- osmLayer.getSource().on('tileloadstart', function(event) {
- //replace with your custom action
- document.getElementById('tilesloaderindicatorimg').src = 'css/images/tree_loading.gif';
- });
- osmLayer.getSource().on('tileloadend', function(event) {
- //replace with your custom action
- document.getElementById('tilesloaderindicatorimg').src = 'css/images/ok.png';
- });
- osmLayer.getSource().on('tileloaderror', function(event) {
- //replace with your custom action
- document.getElementById('tilesloaderindicatorimg').src = 'css/images/no.png';
- });
- //declare the layer
- var wmsLayer = new ol.layer.Image({
- source: new ol.source.ImageWMS({
- attributions: [new ol.Attribution({
- html: '© ' +
- '<a href="http://www.geo.admin.ch/internet/geoportal/' +
- 'en/home.html">' +
- 'National parks / geo.admin.ch</a>'
- })],
- crossOrigin: 'anonymous',
- params: {'LAYERS': 'ch.bafu.schutzgebiete-paerke_nationaler_bedeutung'},
- serverType: 'mapserver',
- url: 'http://wms.geo.admin.ch/'
- })
- });
- //and now asign the listeners on the source of it
- var lyrSource = wmsLayer.getSource();
- lyrSource.on('imageloadstart', function(event) {
- console.log('imageloadstart event',event);
- //replace with your custom action
- var elemId = event.target.params_.ELEMENTID;
- document.getElementById(elemId).src = 'css/images/tree_loading.gif';
- });
- lyrSource.on('imageloadend', function(event) {
- console.log('imageloadend event',event);
- //replace with your custom action
- var elemId = event.target.params_.ELEMENTID;
- document.getElementById(elemId).src = 'css/images/ok.png';
- });
- lyrSource.on('imageloaderror', function(event) {
- console.log('imageloaderror event',event);
- //replace with your custom action
- var elemId = event.target.params_.ELEMENTID;
- document.getElementById(elemId).src = 'css/images/no.png';
- });
- //declare the vector source
- sourceVector = new ol.source.Vector({
- loader: function (extent) {
- //START LOADING
- //place here any actions on start loading layer
- document.getElementById('laodingcont').innerHTML = "<font color='orange'>start loading.....</font>";
- $.ajax('http://demo.opengeo.org/geoserver/wfs', {
- type: 'GET',
- data: {
- service: 'WFS',
- version: '1.1.0',
- request: 'GetFeature',
- typename: 'water_areas',
- srsname: 'EPSG:3857',
- bbox: extent.join(',') + ',EPSG:3857'
- }
- }).done(loadFeatures)
- .fail(function () {
- //FAIL LOADING
- //place here any actions on fail loading layer
- document.getElementById('laodingcont').innerHTML = "<font color='red'>error loading vector layer.</font>";
- });
- },
- strategy: ol.loadingstrategy.bbox
- });
- //once we have a success responce, we need to parse it and add fetaures on map
- function loadFeatures(response) {
- formatWFS = new ol.format.WFS(),
- sourceVector.addFeatures(formatWFS.readFeatures(response));
- //FINISH LOADING
- document.getElementById('laodingcont').innerHTML = "<font color='green'>finish loading vector layer.</font>";
- }
- function spin(active) {
- if (active) {
- // start spinning the spinner
- } else {
- // stop spinning the spinner
- }
- }
- // Toggle spinner on layer loading
- layer.on('change', function() {
- spin();
- });
- layer.getSource().on('change', function() {
- spin(false);
- });
- if (source instanceof ol.source.Vector) {
- source.on("change", function () {
- //console.log("Vector change, state: " + source.getState());
- switch (source.getState()) {
- case "loading":
- $("#ajaxSpinnerImage").show();
- break;
- default:
- $("#ajaxSpinnerImage").hide();
- }
- });
- }
- if (layer instanceof ol.layer.Vector) {
- layer.on("precompose", function () {
- $("#ajaxSpinnerImage").show();
- });
- layer.on("render", function () {
- $("#ajaxSpinnerImage").hide();
- });
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement