在新数据出现时创建要素后,我替换了图层源,但在地图上仍然删除了可见的要素(ArcGIS-js-api 4)

After creating feature when new data comes i replace layer source but on map still deleted features visible(ArcGIS-js-api 4)

我创建了一个要素层,每 5 秒后外部服务将以 JSON 格式获取新数据。当新数据到来时,我用新数据覆盖要素层源并调用 layer.refresh 方法。我观察到的仍然是未从地图中删除的旧数据,如果打开弹出窗口,则内容不会更新。 我不想使用 apply edits.by creati

问题: 当我 replace/overwrite 图层源然后在地图上仍然存在一些旧的已删除功能并且在弹出窗口中未反映更新数据

问题: 覆盖要素层源后如何更新地图和弹出内容

下一段代码显示 source 属性 是一个用于初始化本地 FeatureLayer 的选项。为了操纵您需要使用的功能 applyEdits.

查看添加和删除功能时的 source 长度。 [剧透,它永远不会改变]

我认为你正在试验的问题与我提到的有关。

<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(mag) {
        const query = quakesLayer.createQuery();
        query.where = `mag = ${mag}`;
        
        return quakesLayer.queryFeatures(query);
      }

      function displayResults(results) {
        const addFeatures = results.features;
        resultsLayer.applyEdits({
          addFeatures,
          deleteFeatures: updates % 2 === 0 ? lastAddFeatureResults : []
        }).then(results => {
          // console.log(results.addFeatureResults);
          // console.log(results.deleteFeatureResults);
          lastAddFeatureResults = updates % 2 === 0 ?
            results.addFeatureResults :
            lastAddFeatureResults.concat(results.addFeatureResults);
          console.log(`[after update ${updates}] features:${lastAddFeatureResults.length}  source.length:${resultsLayer.source.length} added:${results.addFeatureResults.length} deleted:${results.deleteFeatureResults.length}`)
        });
      }

      function updateLayer() {
        updates++;
        console.log(`[before update ${updates}] features:${lastAddFeatureResults.length} source.length:${resultsLayer.source.length}`)
        console.timeLog('update layer');
        queryEarthquakes(updates % 2 ? 3 : 4).then(displayResults);
      }
      
      console.time('update layer');

      let updates = 0;
      updateLayer();

      setInterval(updateLayer, 5000);

    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>