var geometries = graphicsUtils.getGeometries(map.graphics) return empty geometries while map.graphics are not empty?

336
8
Jump to solution
09-18-2018 03:33 PM
TONGSUN
New Contributor

I'm trying to let user select polygons in a dynamiclayer with identifyTask. Then use selected pplygons as geometryservice buffer tool buffer.

Question 1:  After added identified result polygons to map.graphics, there always one extra unknow graphic than identified?

Question 2:  var geometries = graphicsUtils.getGeometries(map.graphics) returns empty geometries while map.graphics are not empty?

Thanks for any help,

Tong Sun

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Tong,

 Your workflow is pretty confusing. You have a Draw widget set to draw an extent and afterwards call the addToMap function that adds the graphic to the map and calls the executeIdentifyTask you also have:

identifyListener = map.on("click", executeIdentifyTask);

So you are executing the executeIdentifyTask on the mouse click and on the drawEnd event.

The fact that you have two have two graphics in the map graphics is you have extent you draw on the map using the Draw widget and the result of the IdentifyTask that you add to the maps graphics.

View solution in original post

0 Kudos
8 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Tong,


  What version of the API are you using?

0 Kudos
TONGSUN
New Contributor

It's version 3.25.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Tong,

  I have not run into either of these issues. Can you provide a simple sample that demonstrates these issue?

0 Kudos
TONGSUN
New Contributor

Thanks for taking time on this.

Regarding Question 1: 

Before using IdentifyTask, "console.log(map.graphics);" shew:

  1. graphics:Array(0)
    1. length:0
    2. __proto__:Array(0)
  2. hasAttributionData:false
  3. id:"mapDiv_graphics"
  4. infoTemplate:undefined

Afterwards, "console.log(map.graphics);" shew:

  1. graphics:Array(2)
    1. 0:
      1. attributes:{OBJECTID: "3", AREANO: "NORTHWEST", DISTRICT: "NW", AREA: "823429570.678", LEN: "502834.824812", …}
      2. geometry:{rings: Array(12), _ring: 0, spatialReference: {…}, cache: {…}}
      3. infoTemplate:{title: "PDSDE.PDBOUND2017_CITYLIM", content: "${*}"}
      4. symbol:{style: "solid", outline: {…}, color: b.Color}
      5. _extent:{xmin: -13350849.073860977, ymin: 4406328.614823886, xmax: -13334876.6976592, ymax: 4421855.472176674, spatialReference: {…}, …}
      6. _graphicsLayer:{_attrs: {…}, _url: null, url: null, spatialReference: {…}, initialExtent: {…}, …}
      7. _layer:{_attrs: {…}, _url: null, url: null, spatialReference: {…}, initialExtent: {…}, …}
      8. _offsets:[0]
      9. _shape:{rawNode: path, shape: {…}, matrix: null, fillStyle: b.Color, strokeStyle: {…}, …}
      10. _suspended:false
      11. __proto__:Object
    2. 1:
      1. attributes:undefined
      2. geometry:{rings: Array(12), _ring: 0, spatialReference: {…}, cache: {…}}
      3. infoTemplate:undefined
      4. symbol:{style: "none", outline: {…}, color: b.Color}
      5. visible:false
      6. _bgShape:null
      7. _dataAttrs:{data-popup-highlight: "", data-hidden: ""}
      8. _extent:{xmin: -13350849.073860977, ymin: 4406328.614823886, xmax: -13334876.6976592, ymax: 4421855.472176674, spatialReference: {…}, …}
      9. _geomVersion:3
      10. _graphicsLayer:{_attrs: {…}, _url: null, url: null, spatialReference: {…}, initialExtent: {…}, …}
      11. _layer:{_attrs: {…}, _url: null, url: null, spatialReference: {…}, initialExtent: {…}, …}
      12. _offsets:[0]
      13. _shape:{rawNode: path, shape: {…}, matrix: null, fillStyle: null, strokeStyle: {…}, …}
      14. _suspended:false
      15. __proto__:Object
    3. length:2
    4. __proto__:Array(0)
  2. hasAttributionData:false
  3. id:"mapDiv_graphics"
  4. infoTemplate:undefined

Regarding Question 2, before "var geometries = graphicsUtils.getGeometries(map.graphics);", "console.log(map.graphics);" shew same 2 graphics above:

  1. graphics:(2) [{…}, {…}]

Afterwards, "console.log(map.graphics);" shew same 2 graphics above, but "console.log(geometries);" shew:

[]length: 0__proto__: Array(0)

Also, there's a tip says this empty array "value below was evaluated just now." when "Error: Unable to perform buffer" is logged.

I saw in API reference, there's the sample:

require([
 
"esri/graphicsUtils", ...
], function(graphicsUtils, ... ) {
  geometries
[0] = graphicsUtils.getGeometries(baseGraphics);
 
...
});

But I can't find any explanation on what "baseGraphics" are.  Also, I couldn't understand why "geometries[0]" is in place of a supposed array here.  I couldn't duplicate this practice, either.  I thought this "baseGraphics" might have something to do with the extra graphic I got, which could be a default graphic added automatically to the map's graphiclayer?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Tong,

   I would have to see your code on how you are handling the identify task results. Normally it is a better idea to create your own GraphicsLayer then to just add everything to the maps.graphics though.

For question 2, the issue that map.graphics is a GraphicsLayer class NOT an array of graphics so you need:

var geometries = graphicsUtils.getGeometries(map.graphics.graphics);
0 Kudos
TONGSUN
New Contributor

Sounds promising!  I'll try your suggestion after I figured out the first question.  Thank you Robert!

My identify tool is set to identify multiple visible layers.  But only when it identifies polygon layer, the select with polygon feature button will do its thing.

Layer:

layerURL = "http://vs-pd-gis1:6080/arcgis/rest/services/TestMap5/MapServer";

crimeLayer = new ArcGISDynamicMapServiceLayer(layerURL, { id: 'crimelyrs' });

crimeLayer.setDisableClientCaching(true);

My codes for identify:

 

domConstruct.create("div", { id: "identify", title: "Identify Features By Drawing Rectangle"}, "mapDiv");

var btn = domConstruct.create("button", {

   value: "true",

   type: "button",

   id: "identifyBtn"  

});

domConstruct.place(btn, "identify");

var identifyTask, identifyParams;

this.map.on("load", mapReady());

function mapReady() {

  on(dom.byId("identifyBtn"), "dblclick", function (evt) {

      buttonReady();

     });

  on(dom.byId("identifyBtn"), "click", function (evt) {

      buttonReady();

    });

function buttonReady() {

   document.getElementById("identifyBtn").value = (document.getElementById("identifyBtn").value == "true" ?    "false" : "true");

   if (document.getElementById("identifyBtn").value == "false") {

      document.getElementById("identifyBtn").style.border = "thin solid rgba(81, 203, 238, 1)";

      identifyListener = map.on("click", executeIdentifyTask);

map.graphics.clear();

console.log(map.graphics);

         toolbar.activate(Draw.EXTENT);

      }

   else {

      document.getElementById("identifyBtn").style.border = "initial";

           identifyListener.remove();

           toolbar.deactivate();

      //map.graphics.clear();

            map.infoWindow.hide();

      }

};

//create identify tasks and setup parameters

identifyTask = new IdentifyTask(layerURL);

identifyParams = new IdentifyParameters();

identifyParams.tolerance = 3;

identifyParams.returnGeometry = true;

identifyParams.layerIds = [0, 1];

identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE;

identifyParams.width = map.width;

identifyParams.height = map.height;

toolbar = new Draw(map);

toolbar.on("draw-end", addToMap);

}

var marker = new SimpleMarkerSymbol();

marker.setStyle(SimpleMarkerSymbol.STYLE_SOLID);

marker.setSize(6);

marker.setColor(new Color([0, 255, 255, 0.6]));

marker.setOutline(null);

marker.setOffset(0, 0);

var ln = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 255]), 2);

 

var poly = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 255, 255]), 2), new Color([0, 0, 0, 0]));

function addToMap(evt) {

 

   identifyParams.geometry = evt.geometry;

   executeIdentifyTask();

console.log(map.graphics);

}

function executeIdentifyTask(event) {

   identifyParams.mapExtent = map.extent;

  var deferred = identifyTask.execute(identifyParams).addCallback(function (response) {

 

   //Sandy - set select by polygon button value

   var i = 0;

   return array.map(response, function (result) {

      var feature = result.feature;

      var layerName = result.layerName;

 

      if (result) {            

        feature.setInfoTemplate(new InfoTemplate(layerName, "${*}"));

        if (feature.geometry.type == "point") {

                  feature.setSymbol(marker);

 

          document.getElementById("QFBtn").value = "false";

               }

        else if (feature.geometry.type == "line") {

                  feature.setSymbol(ln);

 

          document.getElementById("QFBtn").value = "false";

               }

        else if (feature.geometry.type == "polygon") {

                   feature.setSymbol(poly);

 

           if (i == 0) {

            document.getElementById("QFBtn").value = "true";

                   }

             };  

             map.graphics.add(feature);

             i++;

          };

      return feature;

      });

   });

   map.infoWindow.setFeatures([deferred]);

   map.infoWindow.setFeatures(map.graphics);

   map.infoWindow.show(identifyParams.geometry.getCenter());

}

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Tong,

 Your workflow is pretty confusing. You have a Draw widget set to draw an extent and afterwards call the addToMap function that adds the graphic to the map and calls the executeIdentifyTask you also have:

identifyListener = map.on("click", executeIdentifyTask);

So you are executing the executeIdentifyTask on the mouse click and on the drawEnd event.

The fact that you have two have two graphics in the map graphics is you have extent you draw on the map using the Draw widget and the result of the IdentifyTask that you add to the maps graphics.

0 Kudos
TONGSUN
New Contributor

Robert,

I was not a javascript programmer at the beginning and with all other stuff added, I just tried to learn and compose my application from all the examples that I can find.  Sorry for bothering you with these kind of amateur mistakes.

What you pointed out makes sense. So I went on deleting 2 line codes: "identifyListener = map.on("click", executeIdentifyTask);" and "identifyListener.remove();"  But still got extra unknown graphic.  I had to create a new graphicslayer eventually as you suggested and that solved problem!

Replacing "map.graphics" with "map.graphics.graphics" also answered my Question 2.

Thanks a lot for taking time on my problems!

0 Kudos