Loading OpenLayers strategy for GeoJSON with varying resolutions

I am currently working on loading geojson data using openlayers 3. Due to the large amount of data, I am looking to transfer only the necessary information. To achieve this, I have implemented a method where I pass the resolution and extent of the current view to the webservice. Here is my code snippet:

var vectorSource = new ol.source.ServerVector({
    format: new ol.format.GeoJSON(),
    loader: function(extent, resolution, projection) {
        var url = 'data.json?e=' + extent.join(',') + '&r=' + resolution;
        $.ajax({
            url: url,
            success: function(data) {
                vectorSource.addFeatures(vectorSource.readFeatures(data));
            }
        });
    },
    projection: 'EPSG:3857',
    strategy: ol.loadingstrategy.bbox
});

var vector = new ol.layer.Vector({
    source: vectorSource
});

var map = new ol.Map({
    layers: [vector],
    target: 'map',
    view: new ol.View({
        center: [0, 0],
        zoom: 0
    })
});

However, I have noticed that my code only triggers the webservice call once. Can someone advise on which loading strategy I should implement in order to call the webservice every time the extent (and/or the resolution) changes?

javascriptopenlayers-3geojsonloaddata

Answer №1

ol.source.ServerVector has a limitation where it does not recognize when different results are returned for various resolutions. It stores loaded areas and avoids loading an area if it already contains the features.

In the provided example, the entire world is initially loaded at zoom=0, so no additional load is required thereafter. If you change zoom=0 to something like zoom=10, a zoom out will trigger a load because the larger area is not preloaded, while a zoom in will not trigger a load.

To reload data every time the resolution changes, you need to clear the stored memory. Just add the following code after defining your map:

map.getView().on('change:resolution', function(evt){
    alert ('resolution changed');
    vectorSource.clear();
});

This code ensures that the memory is cleared each time the resolution changes, forcing a new load to be triggered accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for changing the timestamp "2021-04-18T00:00:00Z" to UTC+8 timezone?

I'm feeling a bit lost with this date format (2021-04-18T00:00:00Z). Can someone please explain to me what type of format is this and how can I convert it to UTC+8? I am currently working on creating a message extension for the Microsoft Teams app, u ...

javascriptmicrosoft-graph-apimicrosoft-teamsmicrosoft-graph-teams

retrieve data from an external HTML file using JavaScript

Can someone assist me? I am working on a webpage that generates a table displaying high tide values in Venice from this link: http://93.62.201.235/maree/ESPORTAZIONI/MESE/Stazione_PuntaSalute_CanalGrande.html. I am trying to extract a specific value (the t ...

javascriptjqueryhtml-table

Employing jQuery to add an element as a sibling rather than a child node

I'm having trouble finding the specific functionality I need. My goal is to add sibling DOM elements to a disconnected node. From what I gather, it should be possible with either .after() or .add(), but for some reason both methods are not working as ...

javascriptjqueryhtmlcss

Eliminate items from within the Array object prototype

I am attempting to enhance the functionality of a JavaScript native array within an Angular service without extending global objects through prototyping. app.factory('Collection', function($http, $q) { var Collection = function(arr) { ...

javascriptarraysangularjsprototype-pattern

Identify the specific code that will be executed upon pressing a button - checkbox restriction

Check out my code example on jsfiddle: https://jsfiddle.net/elenderg/wzarrg06/63/ In the first div, there are 10 buttons. See image below: https://i.sstatic.net/BDdtG.png <button class='btn btn-info custom' onclick="myFunction()" ...

javascripthtmlcssdomcheckbox

Explore the wonders of our solar system using three.js!

I am embarking on my first project using three.js to create a miniature solar system consisting of 1 star, 2 planets, and 1 moon orbiting each planet. As a beginner to both three.js and JavaScript in general, I am eager to learn. Currently, I have success ...

javascriptvectorthree.js

Update the value of ng-show to false after redirection to the home page from the login page using AngularJS

I am new to angularjs and encountered a problem which required me to change the value of ng-show="false" to ng-show="true" when the user is redirected to the home page after successfully logging in! This is what I am attempting to achieve: .controller(&a ...

javascriptangularjs

Transmit serialized form information and get redirected by PHP Laravel with both form and session details

I am facing an issue with my form submission process on a webpage. I have a form where after submission, I need to add additional data before finalizing the submission. While I can successfully serialize and submit the form data via AJAX, I am encountering ...

javascriptphpajaxlaravel

Swap the Text for a Button

I've been searching for a solution to this problem, but all I seem to find online is advice on how to "replace button text." What I'm trying to achieve is to have text change into a button when hovered over. I've attempted using fadeIn/fade ...

javascriptjqueryhtmlcss

Tips for concurrently downloading several files using NodeJS and triggering a callback upon completion

My task involves handling a list of media files (mp3, wav, mp4, png, ...) similar to the example shown below. The list can be lengthy: { "0000": { "type": "audio", "path": "animals_sequence.m ...

javascriptnode.js

Troubleshooting JQuery AJAX HTML Problems in Google Chrome and Firefox

I'm facing an issue with my code and I'm not sure what to do. It works perfectly on Internet Explorer, but when I try to open it on Chrome or Mozilla, the links in my menu don't work! I click on them but nothing happens. Can someone please h ...

javascriptjqueryhtmlcssajax

Add opening and closing HTML tags to enclose an already existing HTML structure

Is there a way to dynamically wrap the p tag inside a div with the class .description-wrapper using JavaScript or jQuery? This is the current html structure: <div class="coursePrerequisites"> <p> Lorem ipsum.. </p> </ ...

javascriptjqueryhtml

What is the method for verifying a password in the login process when it has been hashed by bcrypt during registration?

Currently in the process of developing a signup and login page using Node.js with Pug, Mongoose, and bcrypt. I am encrypting and storing passwords in the database after registration or sign up. I'm facing an issue with the comparison function as it r ...

javascriptnode.jsexpressvalidationbcrypt

Ways to consistently stream information from server to browser

I have a file that is constantly being updated with the following contents: id,value,location 1234,pass,/temp/... 234,fail,/temp/r/... 2343,pass,/temp/status/... The file keeps updating for approximately 1 hour by a program. I want to display ...

javascriptpythonjquerynode.jscgi

Building a single class in Node.js Express for use across multiple routes

In my project, I am developing APIs in the routes folder. How can I create a validation class to ensure that certain objects are not empty, null, undefined, or contain errors, and then use it across all routes? For instance, when creating a new user via a ...

javascriptnode.jsmongodbexpress

Executing PHP code and then triggering an Ajax callback

Looking to implement an alert message using the sweetalert plugin. I have a page that displays 10 products on the index page, each with a link (or form) containing data to send to a PHP script. For example: script.php?id=x&b=x&c=z The HTML includ ...

javascriptphpjqueryhtmlajax

Managing click events within a div element

Within my data set retrieved from a SQL database, each item is represented in various divs as shown below: <?php $url = 'DataBase'; $json_response = file_get_contents ( $url ); $json_arr = json_decode ( $json_response, true ); for($i ...

javascriptjqueryhtml

Using jQuery and AJAX to dynamically add data to POST parameters

Hello, I have a question that may sound like one from a newbie. I am trying to figure out how to insert a variable into a parameter for a POST request instead of simply writing the number in directly: var x = 3; id=(the var x needs to be here)&appid=4 ...

javascriptjqueryajax

Utilizing web components from NPM packages in conjunction with Svelte

My current project involves the development of a simple Single Page App (SPA) using Svelte. I have successfully implemented a basic layout and styling, as well as an asynchronous web request triggered by a button click. Now, my next objective is to utiliz ...

javascriptnpmsvelteweb-component

Resolving the ENOTFOUND error in Imgur API call: 443

I keep getting the same error message every time I execute the node.js code below. As someone who is new to working with Authorization Headers in node.js, I must be overlooking something. Can someone offer assistance or direct me to reliable documentatio ...

javascriptnode.jsrequestimgur