AJAX调用后未给userLayer赋值 地图检测图层不存在问题求助

• 过早调用了resolve(response)：在AJAX请求成功的回调里，刚拿到服务端返回就直接触发了Promise的resolve，此时构建userLayer图层、执行图层查询、将图层添加到地图的逻辑都还没执行，外层的then回调会被提前触发，自然拿不到可用的userLayer，也检测不到地图上的图层。
• 遗漏了图层查询的异步逻辑：L.esri.featureLayer的query().run()本身也是异步操作，userLayer.addTo(map)被放在了这个异步操作的回调里，哪怕把resolve移到构建userLayer之后，也需要等run回调执行完成、图层确实加到地图之后再resolve，才能保证外层then执行时逻辑符合预期。
• userLayer赋值错误：外层直接将addUserLayerTreemail的返回值（Promise实例）赋值给了userLayer变量，和实际需要的图层实例完全不是同一个东西。

修正addUserLayerTreemail函数 #

addUserLayerTreemail(
  $loadingContent,
  $loadingDiv,
  treeLayers,
  map,
  heritage_cluster_layer_view_18,
  flowering_cluster_layer_view_18,
  IMP_FIELDS,
  suggestion,
  userPlottedLayerView18Options,
  userLayer,
  $speciesError
) {

  $loadingContent.text('Loading Search Results');
  addClass($loadingDiv, 'show');
  removeClass($speciesError, 'show-error');

  // 移除已有图层逻辑保持不变
  for (let layer in treeLayers) {
    if (map.hasLayer(treeLayers[layer])) {
      treeLayers[layer].removeFrom(map);
    }
  }
  if (map.hasLayer(heritage_cluster_layer_view_18)) {
    heritage_cluster_layer_view_18.removeFrom(map);
  }
  if (map.hasLayer(flowering_cluster_layer_view_18)) {
    flowering_cluster_layer_view_18.removeFrom(map);
  }

  if(map.hasLayer(userLayer)) {
    userLayer.removeFrom(map);
  }

  const featureType = 'USERTREE';
  let queryString = '';
  suggestion = suggestion.toLowerCase();
  let $selectedOptionSearch = $('.mapFilterBtns.is-active').data('value');
  let all_trees="";
  let searchText= $('#mapSearch').val();
  let configData = {"searchText": searchText, "searchType" : $selectedOptionSearch};

  return new Promise(function(resolve, reject){
    $.ajax({
      url: "../apis/Search",
      method: 'GET',
      dataType: 'json',
      data : configData,
      contentType: 'application/json',
      success: response => {
        console.log("ajax response in the ajax function",response);
        // 移除原有的提前resolve逻辑
        let conditionalVal = " or ";
        let treeID = "";

        for(let i=0; i<response.length; i++) {
          treeID = response[i]['TreeID']
          if(i==0) {
              all_trees = `${IMP_FIELDS.TREEMAIL_SEARCH} like '%${treeID}%'`;
          } else {
              all_trees += conditionalVal + `${IMP_FIELDS.TREEMAIL_SEARCH} like '%${treeID}%'`;
          }
        }
        console.log("all trees here",all_trees);
        queryString = all_trees + ` and Actual_Tree_Type like '%${featureType}%'`;
        let layerOptions = $.extend(
          {
            where: queryString
          },
          userPlottedLayerView18Options
        );
        layerOptions.url = mapLayers.userPlantedLayer;
        
        userLayer = L.esri.featureLayer(layerOptions);
        userLayer
          .query()
          .where(queryString)
          .run((err, featureCollection, response) => {
              if(err) {
                reject(err);
                return;
              }
              // 图层添加到地图完成后再resolve，同时返回图层实例
              userLayer.addTo(map);
              resolve(userLayer);
          });
      },
      error : function(err){
        reject(err, "printing error here");
      }
    });
  })
}

修正调用逻辑 #

// 不要把Promise赋值给userLayer，在then回调中拿到返回的图层实例再赋值
this.addUserLayerTreemail(
  $loadingContent,
  $loadingDiv,
  treeLayers,
  map,
  heritage_cluster_layer_view_18,
  flowering_cluster_layer_view_18,
  IMP_FIELDS,
  suggestion,
  userPlottedLayerView18Options,
  userLayer,
  $speciesError
).then( function(userLayerInstance){
  userLayer = userLayerInstance;
  console.log(map.hasLayer(userLayer), "check if layer exists") // 此时输出为true
  setSearchState(true);
  $mapSearch.blur();
}).catch(function(err){
  console.log("error caught", err)
});

内容的提问来源于stack exchange，提问作者Ian Bell