Is there a way to load/update the data without removing feature layer and without flicker effect using arcgis javascript api 4
Question
I am creating a feature layer from feature collection by fetching data from external query service and adding to the map with some data.
As per my project need I have to refresh the data on the map after every 5 seconds. To achieve this I am requesting data using external query and after getting the response data I am removing the previous feature layer and adding a new one.
Issues : While adding the new layer on the map it takes a little time (~1 sec) to reflect the feature on the map which looks like a flicker effect.
Question : Is there a way to load/update the data without removing feature layer and without flicker effect (only added/removed features should reflect on the map )
1 answers
solution1
1 ACCPTED 2020-08-18 16:04:05
If I understand correctly, you are removing the layer with the old features and adding a new one with the new features. You don't need to do that.
Use FeatureLayer function applyEdits , to remove all the features and add the new ones in "one" operation.
ArcGIS JS Docs - FeatureLayer applyEdits
UPDATE:
Take a look at the example I made for you.
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>ArcGIS API for JavaScript Hello World App</title> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css"> <script src="https://js.arcgis.com/4.15/"></script> <script> require([ 'esri/Map', 'esri/views/MapView', 'esri/layers/FeatureLayer', 'esri/Graphic' ], function (Map, MapView, FeatureLayer, Graphic) { const quakesUrl = 'https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/ks_earthquakes_since_2000/FeatureServer/0'; const quakesLayer = new FeatureLayer({ url: quakesUrl, visible: false }); let lastAddFeatureResults = []; const resultsLayer = new FeatureLayer({ source: [], geometryType: 'point', renderer: { type: 'simple', symbol: { type: 'simple-marker', style: 'circle', size: `8px`, color: [255, 0, 0, .6], outline: { color: 'black', width: '0.5px' } } }, fields: [ { name: 'OBJECTID', alias: 'ObjectID', type: 'oid' }, { name: 'time', alias: 'Time', type: 'string' }, { name: 'mag', alias: 'Magnitude', type: 'double' }, { name: 'magType', alias: 'Magnitude Type', type: 'string' }, { name: 'place', alias: 'Place', type: 'string' }, { name: 'type', alias: 'Type', type: 'string' } ], popupEnable: true, popupTemplate: { title: '{place}' } }); const map = new Map({ basemap: "gray", layers: [quakesLayer, resultsLayer] }); const view = new MapView({ container: "viewDiv", map: map, center: [-97.75188, 37.23308], zoom: 9 }); function queryEarthquakes() { const query = quakesLayer.createQuery(); query.where = "mag >= 3"; return quakesLayer.queryFeatures(query); } function displayResults(results) { const addFeatures = results.features; resultsLayer.applyEdits({ addFeatures, deleteFeatures: lastAddFeatureResults }).then(results => { console.log(results.addFeatureResults); console.log(results.deleteFeatureResults); lastAddFeatureResults = results.addFeatureResults; }); } function updateLayer() { console.timeLog('update layer'); queryEarthquakes().then(displayResults); } console.time('update layer'); updateLayer(); setInterval(updateLayer, 5000); }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.