Is there a way to load/update the data without removing feature layer and without flicker effect using arcgis javascript api 4

问题

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:

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>

来源：https://stackoverflow.com/questions/63471793/is-there-a-way-to-load-update-the-data-without-removing-feature-layer-and-withou

标签

angular

arcgis-js-api