Select to view content in your preferred language

how to get id object of point when click picturesymbolmarker?

2013
2
Jump to solution
11-17-2014 03:02 AM
lasinh
by
New Contributor III

i use query task return points and i was set symbol and infotemple for points, how to how to get id object atribute of point when click symbol?

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor

You can get the ObjectID from a feature by examining its attributes. For example, the following code (a modification of this sample) will put the ObjectID of the features in the console (lines 124 and 133).

<!doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title></title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/tundra/tundra.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/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="http://js.arcgis.com/3.11/"></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("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer");

        app.map.addLayer(basemap);

        // query task and query for parcels

        app.qtParcels = new QueryTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer...");

        app.qParcels = new Query();

        // query task and query for landuse

        app.qtBuildings = new QueryTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer...");

        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);

            console.log("Parcel ID:" + feat.attributes.OBJECTID);

          });

          arrayUtils.forEach(buildings, function(feat) {

            feat.setSymbol(

              new SimpleFillSymbol()

                .setColor(new Color([255, 0, 255, 0.5]))

                .setOutline(null)

            );

            app.map.graphics.add(feat);

             console.log("Building ID:" + feat.attributes.OBJECTID);

         });

          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>

View solution in original post

2 Replies
KenBuja
MVP Esteemed Contributor

You can get the ObjectID from a feature by examining its attributes. For example, the following code (a modification of this sample) will put the ObjectID of the features in the console (lines 124 and 133).

<!doctype html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <title></title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/tundra/tundra.css">

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/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="http://js.arcgis.com/3.11/"></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("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer");

        app.map.addLayer(basemap);

        // query task and query for parcels

        app.qtParcels = new QueryTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer...");

        app.qParcels = new Query();

        // query task and query for landuse

        app.qtBuildings = new QueryTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/BloomfieldHillsMichigan/Parcels/MapServer...");

        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);

            console.log("Parcel ID:" + feat.attributes.OBJECTID);

          });

          arrayUtils.forEach(buildings, function(feat) {

            feat.setSymbol(

              new SimpleFillSymbol()

                .setColor(new Color([255, 0, 255, 0.5]))

                .setOutline(null)

            );

            app.map.graphics.add(feat);

             console.log("Building ID:" + feat.attributes.OBJECTID);

         });

          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>

lasinh
by
New Contributor III

Thank you Ken Buja

0 Kudos