matthew.f.tenold

Using graphic utils

Discussion created by matthew.f.tenold on Apr 11, 2014
Hello,

I am looking to get the geometries out of selected graphics using the event function.   I have my cluster layer js file as a class that I reference in the main html page.  Any help would be greatly appreciated.  I can post the project as a zip also.

Here are the functions in question.

   
setFeatures: function(features) {
 
        this._features = [];
        var wkid = features[0].geometry.spatialReference.wkid;
        if (wkid != 102100) {
            if (wkid == 4326 || wkid == 4269 || wkid == 4267) {
                dojo.forEach(features, function(feature) {
                    if (this._map.spatialReference.wkid == 102100) {
                        point = esri.geometry.geographicToWebMercator(feature.geometry);
                    } else {
                        point = feature.geometry;
                    }
                    point.attributes = feature.attributes;
                    this._features.push(point);
     
                }, this);
            } else {
                throw 'Input Spatial Reference Must Be in Either WKID: 102110 or WKID: 4326';
                return;
            }
        } else {
            dojo.forEach(features, function(feature) {
                point = feature.geometry;
                point.attributes = feature.attributes;
                this._features.push(point);
            }, this);
   
        }
    },

    //fires when cluster layer is loaded, but not added to map yet.
    handleLayerLoaded: function(lyr) {
        this.clusterFeatures();
    },

    //fires when any graphic (clustered or single) is moused over
    handleMouseOver: function(evt) {
        var graphic = evt.graphic;
        if (graphic.symbol.type == 'textsymbol' || graphic.symbol.type == 'simplelinesymbol') {
            if (graphic.attributes) {
                if (graphic.attributes.baseGraphic && graphic.attributes.baseGraphic.task) {
                    graphic.attributes.baseGraphic.task.cancel();
                }
            }
            return;
        }
        if (graphic.attributes.isCluster) { //cluster mouse over
            if (graphic.attributes.clustered) {
                if (graphic.task) {
                    graphic.task.cancel();
                }
                return;
            }
        } else { //single marker or cluster flare mouse over
            if (graphic.attributes.baseGraphic) { //cluster flare
                graphic.attributes.baseGraphic.task.cancel();
            }
            this.showInfoWindow(graphic);
            return;
        }

        graphic.clusterGraphics = [];
  
        var cSize = graphic.attributes.clusterSize;
        var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 0, 1]), 1);

        //polyline used to "tie" flare to cluster
        //set up initially with the center pt of the cluster as the first point and a dummy point @ 0,0 for a placeholder
        var line = new esri.geometry.Polyline(map.spatialReference);
        line.addPath([graphic.geometry, new esri.geometry.Point(0, 0)]);

        //polyline graphic
        var lineGraphic = new esri.Graphic(line, lineSymbol);

        //creating a circle to evenly distribute our flare graphics around
        if (cSize > 1 && cSize <= this._flareLimit) {  //cSize > 1 may not be needed
            //takes the number of points (flares) for the cluster
            var numPoints = graphic.attributes.clusterSize;

            //takes the pixel distance from the center of the graphic to flare out the graphics
            var bufferDistance = this.getPixelDistanceFromCenter(graphic.geometry);

            //center of cluster graphic
            var centerPoint = graphic.geometry;
            
            //variables used to plot points evenly around the cluster
            var dblSinus, dblCosinus, x, y, pt, ptGraphic, p, l;

            for (var i = 0; i < numPoints; i++) {
                //dblSinus = Math.sin((Math.PI * 2.0) * (i / numPoints));
                //dblCosinus = Math.cos((Math.PI * 2.0) * (i / numPoints));

                x = centerPoint.x + bufferDistance //* dblCosinus;
                y = centerPoint.y + bufferDistance //* dblSinus;
    
                //constructing the flare graphic point
                pt = new esri.geometry.Point(x, y, this._map.spatialReference)
                ptGraphic = new esri.Graphic(pt, this.symbolBank.single, dojo.mixin(graphic.attributes[i], { baseGraphic: graphic }), this._infoTemplate);

                //try to always bring flare graphic to front of everything else
                p = this.add(ptGraphic);
                p.getDojoShape().moveToFront();

                //reset our 0,0 placeholder point in line to the actual point of the recently created flare graphic
                line.setPoint(0, 1, pt);
                lineGraphic = new esri.Graphic(line, lineSymbol, { baseGraphic: graphic });
                
                //try to always have connector line behind everything else
                l = this.add(lineGraphic);
                l.getDojoShape().moveToBack();

                //store flare graphic and connector graphic
                graphic.clusterGraphics.push(p);
                graphic.clusterGraphics.push(l);
            }
            
            //set "clustered" flag
            graphic.attributes.clustered = true;
        }
    },

Outcomes