时间戳

首页 > 解决方案 > arcgis goTo 功能并打开弹出窗口

arcgis - arcgis goTo 功能并打开弹出窗口

问题描述

我是 Arcgis 地图和使用 ArcGIS Javascript 4.2 库的新手。目前这些功能正在地图上显示，我正在尝试转到功能并以编程方式打开它的弹出窗口。下面是我查询运行良好的功能的代码。

                var query = layer.createQuery();
                query.where = "key= " + dataItem.key+ "";
                query.returnGeometry = true;
                query.returnCentroid = true;
                query.returnQueryGeometry = true;
                layer.queryFeatures(query).then(function (results) {
                //I am getting the feature results here.
                //trying to navigate to feature and open popup
                });

注意：我尝试使用文档中的以下代码，该代码运行良好，但我没有中心，因为在我的情况下特征是折线。 view.goTo({center: [-126, 49]})

标签： arcgisarcgis-js-api

解决方案

首先，View goTo方法有几个选项，包括仅使用几何图形，我认为这对您的情况来说是一个更好的选择，缩放到折线。

其次要打开弹出窗口，您只需要使用该open方法即可将要显示的功能传递给那里。

检查我给你的这个例子，有两个建议，

<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS API for JavaScript Hello World App</title>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    #selectDiv {
      height: 30px;
      width: 100%;
      margin: 5px;
    }
    #cableNameSelect {
      height: 30px;
      width: 300px;
    }
    #cableGoToButton {
      height: 30px;
      width: 100px;
    }
    #viewDiv {
      height: 500px;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
</head>

<body>
  <div id="selectDiv">
    <select id="cableNameSelect"></select>
    <button id="cableGoToButton">GO TO</button>
  </div>
  <div id="viewDiv">
  </div>
  <script src="https://js.arcgis.com/4.15/"></script>

  <script>
    require([
      'esri/Map',
      'esri/views/MapView',
      'esri/layers/FeatureLayer'
    ], function (Map, MapView, FeatureLayer) {

      const cableNameSelect = document.getElementById("cableNameSelect");
      const cableGoToButton = document.getElementById("cableGoToButton");

      const map = new Map({
        basemap: 'hybrid'
      });

      const view = new MapView({
        container: 'viewDiv',
        map: map,
        zoom: 10,
        center: {
          latitude: 47.4452,
          longitude: -121.4234
        }
      });
      view.popup.set("dockOptions", {
        buttonEnabled: false,
        position: "top-right"
      });

      const layer = new FeatureLayer({
        url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/cables/FeatureServer/0",
        popupTemplate: {
          title: "{NAME}",
          outFields: ["*"],
          content: [{
            type: 'fields',
            fieldInfos: [
              {
                fieldName: "length"
              },
              {
                fieldName: "owners"
              },
              {
                fieldName: "rfs"
              }
            ]
          }],
        }
      });

      map.add(layer);

      layer.queryFeatures({
        where: "1=1",
        outFields: ["Name"],
        returnGeometry: false
      }).then(function(results) {
        for(const graphic of results.features) {
          cableNameSelect.appendChild(new Option(graphic.attributes.Name, graphic.attributes.Name));
        }
      });

      cableGoToButton.onclick = function() {
        if (!cableNameSelect.value) {
          return;
        }
        cableGoToButton.disabled = true;
        layer.queryFeatures({
          where: `Name='${cableNameSelect.value}'`,
          outFields: ["*"],
          returnGeometry: true
        }).then(function (results) {
          cableGoToButton.disabled = false;
          if (!results.features) {
            return;
          }
          view.goTo(results.features[0].geometry);
          view.popup.open({
            features: [results.features[0]]
          })
        })
      };

    });
  </script>
</body>

</html>

推荐阅读