使用ESRI API切换地图问题：变量已更新但地图未刷新

我懂你现在的困扰——明明已经改了存储Portal ID的konj变量，控制台也显示值变了，但地图就是纹丝不动。这其实是个很典型的实例初始化后不会自动响应变量变更的问题：

你当前的代码里，WebMap和MapView是在页面加载完成前就创建好了，用的是初始的konj值。之后点击按钮修改window.konj，只是改变了变量的数值，但已经实例化的地图对象根本不知道这个变化，自然不会重新加载新地图。

解决思路 #

把地图的初始化逻辑封装成一个可重复调用的函数，每次输入新ID后，销毁旧的地图视图，再用新ID创建新的WebMap和MapView实例。

修改后的代码 #

JavaScript 部分

// 初始ID
let konj = "9f91f911f58540ceaac0300c55e18fbb";
// 声明全局视图变量，方便后续销毁
let mapView = null;

// 封装地图初始化函数
function initMap(portalItemId) {
  // 如果已有视图，先销毁避免内存泄漏
  if (mapView) {
    mapView.destroy();
  }

  // 创建新的WebMap实例
  const map = new WebMap({
    portalItem: {
      id: portalItemId
    }
  });

  // 创建新的MapView实例
  mapView = new MapView({
    container: "mapViewDiv",
    map: map,
    padding: { top: 50, bottom: 0 },
    ui: { components: [] }
  });

  // 可选：添加加载状态反馈
  map.when(() => {
    console.log("新地图加载成功");
  }).catch(error => {
    console.error("地图加载失败:", error);
    alert("加载失败，请检查Portal ID是否正确");
  });
}

// 页面加载完成后初始化默认地图
$(function(){
  // 初始化默认地图
  initMap(konj);

  // 点击按钮触发地图更新
  $("#buto").click(function(){
    const newPortalId = $("#inputField").val().trim();
    if (newPortalId) {
      konj = newPortalId;
      // 调用初始化函数加载新地图
      initMap(konj);
    } else {
      alert("请输入有效的Portal地图ID");
    }
  });
});

HTML 部分（保持原代码即可）

<div class="calcite-map calcite-map-absolute">
  <div id="mapViewDiv"></div>
</div>
<!-- Form -->
<form id="nameForm">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Please paste Id of map</label>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Id of map</label>
      <input type="text" class="form-control" id="inputField">
      <br>
    </div>
  </div>
  <br>
  <button type="button" class="btn btn-primary" id="buto">Submit</button>
</form>

额外小提示 #

• 可以给输入框加个格式验证（比如检查ID长度是否符合ESRI Portal ID的标准），提前过滤无效输入
• 如果需要保留地图的一些交互状态，可以在销毁前记录相关参数，初始化新地图时复用

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