防止弹出模板在 ArcGIS 4.16 中显示多个功能 Angular 10

Question

我在地图上为特定图层集成了一个弹出窗口。有时 poup 显示分页（featureNavigation）多个数据。有时它无法显示数据，或者实际服务的数据不匹配 returns.

    var popupTrailheads = {
            title: "ID: {ID}",
            content: this.getcustomcontent.bind(this),
          };
          // Add layer special layer
          this.layer_fifteen = new FeatureLayer({
            url: `${this.esriURL}/15`,
            visible: true,
            outFields: ['*'],
            popupTemplate: popupTrailheads,
          });
    
     getcustomcontent(feature) {
    // The popup content will become here from angular service
return `<div>content</div>`;
    }

我有几个选项可以解决这个问题。 1）该层的弹出窗口仅在特定的缩放级别启用。否则弹出窗口不会出现。 2）地图上的点击应该只触发一个点。（我相信当点击图层时它会触发多个点，这就是它显示多个特征细节的原因。）

能否请您提出一个想法，如何在特定缩放级别启用弹出窗口，或者select在地图上单击一次仅显示一个功能。

提前致谢。

Answer 1

因此，在特定条件下（例如视图的缩放级别），有多种可能的方式启用弹出窗口。

在我为您制作的示例中，弹出窗口仅在缩放大于 10 时打开。

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>PopupTemplate - Auto Open False</title>

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

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

  <script>
    var populationChange;
    require(["esri/Map", "esri/views/MapView", "esri/layers/Layer"], function (
      Map,
      MapView,
      Layer
    ) {
      var map = new Map({
        basemap: "dark-gray"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 7,
        center: [-87, 34]
      });

      var highlightSelect = null;

      Layer.fromPortalItem({
        portalItem: {
          id: "e8f85b4982a24210b9c8aa20ba4e1bf7"
        }
      }).then(function (layer) {
        map.add(layer);

        var popupTemplate = {
          title: "Population in {NAME}",
          outFields: ["*"],
          content: [{
            type: 'fields',
            fieldInfos: [
              {
                fieldName: "POP2010",
                format: {
                  digitSeparator: true,
                  places: 0
                },
                visible: false
              },
              {
                fieldName: "POP10_SQMI",
                format: {
                  digitSeparator: true,
                  places: 2
                }
              },
              {
                fieldName: "POP2013",
                format: {
                  digitSeparator: true,
                  places: 0
                }
              },
              {
                fieldName: "POP13_SQMI",
                format: {
                  digitSeparator: true,
                  places: 2
                }
              }
            ]
          }],
        };
        layer.popupTemplate = popupTemplate;
        function populationChange(feature) {
          var div = document.createElement("div");
          var upArrow =
            '<svg width="16" height="16" ><polygon points="14.14 7.07 7.07 0 0 7.07 4.07 7.07 4.07 16 10.07 16 10.07 7.07 14.14 7.07" style="fill:green"/></svg>';
          var downArrow =
            '<svg width="16" height="16"><polygon points="0 8.93 7.07 16 14.14 8.93 10.07 8.93 10.07 0 4.07 0 4.07 8.93 0 8.93" style="fill:red"/></svg>';

          var diff =
            feature.graphic.attributes.POP2013 -
            feature.graphic.attributes.POP2010;
          var pctChange = (diff * 100) / feature.graphic.attributes.POP2010;
          var arrow = diff > 0 ? upArrow : downArrow;

          div.innerHTML =
            "As of 2010, the total population in this area was <b>" +
            feature.graphic.attributes.POP2010 +
            "</b> and the density was <b>" +
            feature.graphic.attributes.POP10_SQMI +
            "</b> sq mi. As of 2013, the total population was <b>" +
            feature.graphic.attributes.POP2013 +
            "</b> and the density was <b>" +
            feature.graphic.attributes.POP13_SQMI +
            "</b> sq mi. <br/> <br/>" +
            "Percent change is " +
            arrow +
            "<span style='color: " +
            (pctChange < 0 ? "red" : "green") +
            ";'>" +
            pctChange.toFixed(3) +
            "%</span>";
          return div;
        }

        view.popup.autoOpenEnabled = false; // <- disable view popup auto open
        view.on("click", function (event) { // <- listen to view click event
          if (event.button === 0) { // <- check that was left button or touch

            console.log(view.zoom);
            if (view.zoom > 10) { // <- zoom related condition to open popup

              view.popup.open({ // <- open popup
                location: event.mapPoint, // <- use map point of the click event
                fetchFeatures: true // <- fetch the selected features (if any)
              });

            } else {
              
              window.alert(`Popup display zoom lower than 10 .. Zoom in buddy! .. (Current zoom ${view.zoom})`);

            }

          }
        });
      });
    });
  </script>
</head>

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

</html>

涉及到弹窗只显示一个结果，可以这样隐藏导航，

view.popup.visibleElements.featureNavigation = false;

现在如果你真正想要的是只得到一个结果，那么我建议使用view方法hitTest，只得到层的最顶层结果。您可以在单击处理程序内部之后执行此操作，并且仅在需要层的任何结果时才打开。为此，您需要设置featFeatures: false，并设置命中的特征。

就像评论一样，它可能会导致用户感到奇怪或混淆，只检索所有可能的功能之一。我想你可能对内容有问题。

防止弹出模板在 ArcGIS 4.16 中显示多个功能 Angular 10

Prevent Popup template to shows multiple feature in ArcGIS 4.16 Angular 10

arcgis

arcgis-js-api

angular10

esri-loader