缺少 ESRI 弹出窗口最大化按钮

如何解决缺少 ESRI 弹出窗口最大化按钮

目前正在使用 ESRI ArcGIS API for JavaScript 4.15 在地图中显示弹出窗口。但是缺少 ArcGIS API for JavaScript 3.35 提供的最大化按钮

是否有任何要设置以显示相同的配置。

解决方法

据我所知，新的 API 没有开箱即用的功能。不过不用担心，您可以通过向弹出窗口添加自定义操作来实现它。

请参阅我为您制作的示例以获取想法。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Popup actions | ArcGIS API for JavaScript 4.18</title>

  <style>
    html,body,#viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
  <script src="https://js.arcgis.com/4.18/"></script>

  <script>
    require(["esri/Map","esri/layers/FeatureLayer","esri/views/MapView"],function (
      Map,FeatureLayer,MapView
    ) {
      const map = new Map({
        basemap: "gray-vector"
      });

      const view = new MapView({
        container: "viewDiv",map: map,center: [-117.08,34.1],zoom: 11
      });

      const toggleFullScreenAction = {
        type: "toggle",title: "Full Screen",id: "toggle-full-screen",className: "esri-icon-maximize"
      };

      view.popup.actions.add(toggleFullScreenAction);


      const template = {
        title: "Trail run",content: "{name}"
      };

      featureLayer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/TrailRuns/FeatureServer/0",outFields: ["*"],popupTemplate: template
      });
      map.add(featureLayer);

      function toggleFullScreen() {
        if (!document.fullscreenElement) {
          document.getElementsByClassName('esri-popup__main-container')[0].requestFullscreen()
            .catch(err => {
              alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
            });
        } else {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          }
        }
      }

      view.popup.on("trigger-action",function (event) {
        if (event.action.id === "toggle-full-screen") {
          toggleFullScreen();
        }
      });



    });
  </script>
</head>

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

</html>

要运行代码段，请复制并另存为 html 文件。全屏操作在代码段中不起作用，我猜是因为它是嵌入的，但不确定。