用于在ArcGIS API 4.x中更改底图的菜单

var map = new Map({
  basemap: "streets" // 设置默认底图
});

var view = new MapView({
  container: "viewDiv", // 指定地图显示的容器
  map: map // 指定要显示的地图对象
});

<div id="basemapMenu">
  <button id="streetsBtn">街道地图</button>
  <button id="satelliteBtn">卫星地图</button>
  <button id="topoBtn">地形地图</button>
</div>

#basemapMenu {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 9999;
}

#basemapMenu button {
  margin-bottom: 5px;
}

var streetsBtn = document.getElementById("streetsBtn");
var satelliteBtn = document.getElementById("satelliteBtn");
var topoBtn = document.getElementById("topoBtn");

streetsBtn.addEventListener("click", function() {
  map.basemap = "streets";
});

satelliteBtn.addEventListener("click", function() {
  map.basemap = "satellite";
});

topoBtn.addEventListener("click", function() {
  map.basemap = "topo";
});

view.ui.add("basemapMenu", "top-left");