esri Sample待解读

程序员文章站 2022-06-23 08:29:20
Manage results from multiple queries
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Manage results from multiple queries</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.34/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.34/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{ margin: 0; padding: 0; }
      #controls {
        position: absolute;
        height: 80px;
        font-family: arial;
        bottom: 10px;
        margin: 5px;
        padding: 5px;
        z-index: 40;
        background: #fff;
        color: #444;
        width: 440px;
        left: 10px;
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px #888;
        box-shadow: 0 0 5px #888;
      }
      h3 { margin: 0 0 5px 0; border-bottom: 1px solid #444; }
      .label { display: inline-block; width: 140px; }
    </style>

    <script src="https://js.arcgis.com/3.34/"></script>
    <script>
      var app = {};

      require([
        "dojo/parser", "dojo/promise/all", "dojo/_base/connect", 
        "esri/Color", "dojo/_base/array", "dojo/dom",
        "esri/config", "esri/map", "esri/geometry/Extent",
        "esri/symbols/SimpleFillSymbol", "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/tasks/query", "esri/tasks/QueryTask",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function(
        parser, all, connect, 
        Color, arrayUtils, dom,
        esriConfig, Map, Extent,
        SimpleFillSymbol, ArcGISDynamicMapServiceLayer,
        Query, QueryTask
      ) {
        // create layout dijits
        parser.parse();
        // specify proxy for request with URL lengths > 2k characters
        esriConfig.defaults.io.proxyUrl = "/proxy/";

        app.map = new Map("map"); 
        var basemap = new ArcGISDynamicMapServiceLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer");
        app.map.addLayer(basemap);

        // query task and query for parcels
        app.qtParcels = new QueryTask("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer/2");
        app.qParcels = new Query();
        // query task and query for landuse 
        app.qtBuildings = new QueryTask("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer/0");
        app.qBuildings = new Query();

        app.qParcels.returnGeometry = app.qBuildings.returnGeometry = true;
        app.qParcels.outFields = app.qBuildings.outFields = ["*"];

        app.map.on("click", executeQueries);

        function executeQueries(e) {
          var parcels, buildings, promises, 
            qGeom, point, pxWidth, padding;

          // create an extent from the mapPoint that was clicked
          // this is used to return features within 3 pixels of the click point
          point = e.mapPoint;
          pxWidth = app.map.extent.getWidth() / app.map.width;
          padding = 3 * pxWidth;
          qGeom = new Extent({
            "xmin": point.x - padding,
            "ymin": point.y - padding,
            "xmax": point.x + padding,
            "ymax": point.y + padding,
            "spatialReference": point.spatialReference
          });

          // use the extent for the query geometry
          app.qParcels.geometry = app.qBuildings.geometry = qGeom;
          
          parcels = app.qtParcels.execute(app.qParcels);
          buildings = app.qtBuildings.execute(app.qBuildings);
          console.log("deferreds: ", parcels, buildings);
          promises = all([parcels, buildings]);
          promises.then(handleQueryResults);
          console.log("created d list");
        }

        function handleQueryResults(results) {
          console.log("queries finished: ", results);
          var parcels, buildings;

          // make sure both queries finished successfully
          if ( ! results[0].hasOwnProperty("features") ) {
            console.log("Parcels query failed.");
          }
          if ( ! results[1].hasOwnProperty("features") ) {
            console.log("Buildings query failed.");
          }

          // results from deferred lists are returned in the order they were created
          // so parcel results are first in the array and buildings results are second
          parcels = results[0].features;
          buildings = results[1].features;

          app.map.graphics.clear();

          // add the results to the map
          arrayUtils.forEach(parcels, function(feat) {
            feat.setSymbol(new SimpleFillSymbol());
            app.map.graphics.add(feat);
          });
          arrayUtils.forEach(buildings, function(feat) {
            feat.setSymbol(
              new SimpleFillSymbol()
                .setColor(new Color([255, 0, 255, 0.5]))
                .setOutline(null)
            );
            app.map.graphics.add(feat);
          });
          dom.byId("results").innerHTML = "Number of parcels:  " +  parcels.length + 
            "<br />Number of buildings:  " + buildings.length;
        }
      });
    </script>
  </head>
  
  <body class="tundra">
    <div data-dojo-type="dijit.layout.BorderContainer" 
         data-dojo-props="design:'headline',gutters:false" 
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map" 
           data-dojo-type="dijit.layout.ContentPane" 
           data-dojo-props="region:'center'">
        
        <div id="controls">
          <h3>Multiple Query Tasks</h3>
          <div id="results">Click the map to query multiple layers.</div>
        </div>

      </div>
    </div>
  </body>
</html>
本文地址：https://blog.csdn.net/Zzzpiu/article/details/109235962
相关标签： arcgis for js 3.x学习笔记 arcgisJS
上一篇： golang与java备忘录模式
下一篇：无障碍