javascript - 将 arcgis js api 弹出单击事件更改为右键单击

问题描述

使用 arcgis js api 4.15 调用弹出点击事件非常简单，例如您只需定义它。

即如下所示：

    fl = new FeatureLayer({
      source: gras,
      objectIdField: "ObjectID",
      geometryType: "polygon",
      fields: [{
        name: "ObjectID",
        alias: "ObjectID",
        type: "oid"
      }, {
        name: "id",
        alias: "id",
        type: "string"
      }, {
        name: "place",
        alias: "place",
        type: "string"
      }, {
        name: "url",
        alias: "url",
        type: "string"
      }, {
        name: "grid_value",
        alias: "grid_value",
        type: "double"
      }],
      renderer: renderer,
      popupEnabled: true, <------------------------ here
      popupTemplate: popuptemp <---------------------- here
    });

问题是......我想知道是否有人对如何处理将其更改为 API 中的右键单击事件有所了解？

（即缺少文档https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html）

开箱即用的事件是在单击图层时触发，我想更改或自定义它以在右键单击时获取事件..

另一个通过他们的文档尝试的逻辑，不确定如何处理嵌套的开放逻辑 - 或者如何从那里调用它。

view.popuptemp.autoOpenEnabled = false;
        view.on("click", function(event) {
           if  (event.which==3) {
                alert('Right mouse button pressed');
                break;
            }
          view.popuptemp.open({
            // Set the popup
          });
        });

标签： javascriptarcgis-js-api

如前所述，您必须禁用弹出自动打开，然后在发生右键单击时显示功能信息。像这样的东西应该工作，

view.popup.autoOpenEnabled = false; // <- disable view popup auto open
view.on("click", function (event) { // <- listen to view click event
  if (event.button === 2) { // <- check that was right button
    view.popup.open({ // <- open popup
      location: event.mapPoint, // <- use map point of the click event
      fetchFeatures: true // <- fetch the selected features (if any)
    });
  }
});

在这里，您可以在 ArcGIS 示例之一上进行上述工作，

<!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 - use functions to set content - 4.15</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: populationChange,
          fieldInfos: [
            {
              fieldName: "POP2010",
              format: {
                digitSeparator: true,
                places: 0
              }
            },
            {
              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 === 2) { // <- check that was right button
            view.popup.open({ // <- open popup
              location: event.mapPoint, // <- use map point of the click event
              fetchFeatures: true // <- fetch the selected features (if any)
            });
          }
        });
      });
    });
  </script>
</head>

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

</html>

javascript - 将 arcgis js api 弹出单击事件更改为右键单击

问题描述

解决方案

推荐阅读