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

问题描述

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

    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）在地图上的点击应仅触发一个点。（我相信单击该图层会触发多个点，这就是它显示多个要素详细信息的原因。）

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

谢谢。

解决方法

因此，在某些条件下（例如视图的缩放级别），有多种方法可以启用弹出窗口。

在我为您制作的示例中，只有在缩放比例大于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",places: 2
                }
              },{
                fieldName: "POP2013",places: 0
                }
              },{
                fieldName: "POP13_SQMI",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，并设置具有匹配项的功能。

仅作为注释，它可能会使用户检索所有可能的功能之一而感到古怪或困惑。我认为您的内容可能有问题。

angular10 arcgis arcgis-js-api esri-loader

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

问题描述

解决方法

相关问答