ArcGIS API for Js 之 QueryTask详解

ArcGIS API for Js 之 QueryTask详解

实现功能说明

• 明白Query和QueryTask之间的关系
• 实现发布图层属性信息的相关查询
• 结合3D符号和信息模板弹出进行相关可视化展示
• dojo/_base/array的相关机制

实现的相关代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="description" content="[Query Task - 4.3]">
  <!-- 
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the tasks-query sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/tasks-query/index.html  
  -->
  <title>Query Task - 4.3</title>

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

    #optionsDiv {
      background-color: dimgray;
      color: white;
      z-index: 23;
      position: absolute;
      top: 0px;
      right: 0px;
      padding: 0px 0px 0px 10px;
      border-bottom-left-radius: 5px;
      max-width: 350px;
    }

    .esri-popup .esri-popup-header .esri-title {
      font-size: 18px;
      font-weight: bolder;
    }

    .esri-popup .esri-popup-body .esri-popup-content {
      font-size: 14px;
    }
  </style>

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

  <script>
    require([
      "esri/Map",
      "esri/views/SceneView",
      "esri/layers/GraphicsLayer",
      "esri/symbols/PointSymbol3D",
      "esri/symbols/ObjectSymbol3DLayer",
      "esri/tasks/QueryTask",
      "esri/tasks/support/Query",
      "dojo/_base/array",
      "dojo/dom",
      "dojo/on",
      "dojo/domReady!"
    ], function(
      Map, SceneView, GraphicsLayer, PointSymbol3D, ObjectSymbol3DLayer,
      QueryTask, Query, arrayUtils, dom, on
    ) {

      // URL to feature service containing points representing the 50 
      // most prominent peaks in the U.S. 
      var peaksUrl =
        "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Prominent_Peaks_US/FeatureServer/0";

      // Define the popup content for each result    
      var popupTemplate = { // autocasts as new PopupTemplate()
        title: "{MTN_PEAK}, {STATE}",
        fieldInfos: [{
          fieldName: "ELEV_ft",
          label: "Elevation (feet)",
          format: {
            places: 0,
            digitSeperator: true
          }
        }, {
          fieldName: "ELEV_m",
          label: "Elevation (meters)",
          format: {
            places: 0,
            digitSeperator: true
          }
        }, {
          fieldName: "PROMINENCE_ft",
          label: "Prominence (feet)",
          format: {
            places: 0,
            digitSeperator: true
          }
        }, {
          fieldName: "PROMINENCE_m",
          label: "Prominence (meters)",
          format: {
            places: 0,
            digitSeperator: true
          }
        }, {
          fieldName: "ISOLATION_mi",
          label: "Isolation (miles)",
          format: {
            places: 0,
            digitSeperator: true
          }
        }, {
          fieldName: "ISOLATION_km",
          label: "Isolation (km)",
          format: {
            places: 0,
            digitSeperator: true
          }
        }],
        content: "<b><a href='https://en.wikipedia.org/wiki/Topographic_prominence'>Prominence:</a>" +
          "</b> {PROMINENCE_ft} ft ({PROMINENCE_m} m)" +
          "<br><b>Prominence Rank:</b> {RANK}" +
          "<br><b>Elevation:</b> {ELEV_ft} ft ({ELEV_m} m)" +
          "<br><b><a href='https://en.wikipedia.org/wiki/Topographic_isolation'>Isolation:</a>" +
          "</b> {ISOLATION_mi} mi ({ISOLATION_km} km)"
      };

      var mtnSymbol = new PointSymbol3D({
        symbolLayers: [new ObjectSymbol3DLayer({
          resource: {
            primitive: "cone"
          }
        })]
      });

      // Create graphics layer and symbol to use for displaying the results of query    
      var resultsLyr = new GraphicsLayer();

      /*****************************************************************
       *  Point QueryTask to URL of feature service  
       *****************************************************************/
      var qTask = new QueryTask({
        url: peaksUrl
      });

      /******************************************************************    
       * Set the query parameters to always return geometry and all fields.
       * Returning geometry allows us to display results on the map/view
       ******************************************************************/
      var params = new Query({
        returnGeometry: true,
        outFields: ["*"]
      });

      var map = new Map({
        basemap: "osm",
        layers: [resultsLyr] // add graphics layer to the map
      });

      var view = new SceneView({
        map: map,
        container: "viewDiv",
        center: [-100, 38],
        zoom: 4
      });

      var attributeName = dom.byId("attSelect");
      var expressionSign = dom.byId("signSelect");
      var value = dom.byId("valSelect");

      // Executes each time the button is clicked    
      function doQuery() {
        // Clear the results from a previous query
        resultsLyr.removeAll();
        /*********************************************
         *
         * Set the where clause for the query. This can be any valid SQL expression.
         * In this case the inputs from the three drop down menus are used to build
         * the query. For example, if "Elevation", "is greater than", and "10,000 ft" 
         * are selected, then the following SQL where clause is built here:
         * 
         * params.where = "ELEV_ft > 10000";  
         * 
         * ELEV_ft is the field name for Elevation and is assigned to the value of the
         * select option in the HTML below. Other operators such as AND, OR, LIKE, etc
         * may also be used here.
         *
         **********************************************/
        params.where = attributeName.value + expressionSign.value + value.value;

        // executes the query and calls getResults() once the promise is resolved
        // promiseRejected() is called if the promise is rejected
        qTask.execute(params)
          .then(getResults)
          .otherwise(promiseRejected);
      }

      // Called each time the promise is resolved    
      function getResults(response) {
        console.log(response.features);
        // Loop through each of the results and assign a symbol and PopupTemplate
        // to each so they may be visualized on the map
        var peakResults = arrayUtils.map(response.features, function(
          feature) {

          // Sets the symbol of each resulting feature to a cone with a 
          // fixed color and width. The height is based on the mountain's elevation
          feature.symbol = new PointSymbol3D({
            symbolLayers: [new ObjectSymbol3DLayer({
              material: {
                color: "green"
              },
              resource: {
                primitive: "cone"
              },
              width: 100000,
              height: feature.attributes.ELEV_m * 100
            })]
          });

          feature.popupTemplate = popupTemplate;
          //feature is an object 
          return feature;
        });

        resultsLyr.addMany(peakResults);

        // animate to the results after they are added to the map  
        view.goTo(peakResults);
        // print the number of results returned to the user
        dom.byId("printResults").innerHTML = peakResults.length +
          " results found!";
      }

      // Called each time the promise is rejected    
      function promiseRejected(err) {
        console.error("Promise rejected: ", err.message);
      }

      // Call doQuery() each time the button is clicked    
      on(dom.byId("doBtn"), "click", doQuery);
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="optionsDiv">
    <h2>Prominent Peaks in the U.S.</h2>
    <select id="attSelect">
      <option value="ELEV_ft">Elevation</option>
      <option value="PROMINENCE_ft" selected>Prominence</option>
    </select>
    <select id="signSelect">
      <option value=">">is greater than</option>
      <option value="<">is less than</option>
      <option value="=">is equal to</option>
    </select>
    <select id="valSelect">
      <option value="1000">1,000 ft</option>
      <option value="5000">5,000 ft</option>
      <option value="10000">10,000 ft</option>
      <option value="15000">15,000 ft</option>
      <option value="20000">20,000 ft</option>
      <option value="PROMINENCE_ft">Prominence</option>
    </select>
    <br>
    <br>
    <button id="doBtn">Do Query</button>
    <br>
    <p><span id="printResults"></span></p>
  </div>
</body>

</html>

需要注意的是

1. 3D符号的建立。怎么说呢，Esri很套路的告诉我们所需要的符号还给我们扩展，很官方的夸赞是让编程更加的简单。详细了解还是得看API 还有和你们分享一个生成符号的示例吧。

[干货] https://developers.arcgis.com/javascript/latest/sample-code/playground/live/index.html#/config=symbols/3d/PointSymbol3D.json)

2.注意Query和QueryTask的关系和区别分别都有什么参数，如何调用。Query相当于是SQL语句啊，QueryTask就是Query执行环境，以及返回结果的通道。我是简单的来说的，具体详细的还是得看API。

3.注意发布的图层，首先搞清楚图层中存在什么属性，目标要查询什么属性，明白后就很简单的调用了。

1. 值得一提的就是dojo/_base/array的map方法吧:
   

还有相关的原型，这是有关原生JS的，看还是挺有帮助的。

实现的效果

如果读者有兴趣，还可以东西更多

• 自定义样式，自我形象打扮由自己决定
• 自己再玩玩其它属性啦，什么的。
• 简单点讲,API玩不好，就是你被玩，玩好了，就是你玩它。

优雅的玩技术

在GIS的沙场，传播有价值的东西!