Pergunta

Solved...I am trying to get the geometries of graphics that are grouped and I can't seem to get the x and y without adding graphic.attributes.baseGraphic to a new graphic I have to create. The code in question has the "***" characters defining the section with the issue.

handleMouseOver: function(evt) {
        var graphic = evt.graphic;
        var latlon = evt.graphic.geometry;
        //alert('x =' + latlon.x + 'y =' + latlon.y);
        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) {
                for (var i = 0; i < graphic.attributes.clusterSize; i++)
                {
                    x = graphic.attributes[i].baseGraphic.geometry.x;

                    y = graphic.attributes[i].baseGraphic.geometry.y;
                    //alert('x=' + x + 'y=' + y);
                }
                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 = [];
        //alert('x =' + latlon.x + 'y =' + latlon.y);
        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 < graphic.attributes.clusterSize; i++)  {
                    //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);
                x = graphic.attributes[i].baseGraphic.geometry.x;

                y = graphic.attributes[i].baseGraphic.geometry.y;***

                //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);
                //alert('pt.x=' + pt.x + 'pt.y=' + pt.y )
                //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;
        }
    },
Foi útil?

Solução

Based on this part of your "limited question" above:

"I am trying to get the geometries of graphics that are grouped"

I assume you are using the esri ClusterLayer as described here: https://developers.arcgis.com/javascript/jssamples/layers_point_clustering.html

If so then right here we go:

Mouse over will not be ideal at all the reason is that the cluster images are simply PictureMarkerSymbols which are set against a new esri.renderer.ClassBreaksRenderer at different break points for example:

var renderer = new esri.renderer.ClassBreaksRenderer(mapManager.pointFeatureSymbol, "clusterCount");
var blue = new esri.symbol.PictureMarkerSymbol("images/BluePin1LargeB.png", 32, 32).setOffset(0, 15);
var green = new esri.symbol.PictureMarkerSymbol("images/GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
var red = new esri.symbol.PictureMarkerSymbol("images/RedPin1LargeB.png", 72, 72).setOffset(0, 15);

    renderer.addBreak(0, 2, blue);
    renderer.addBreak(2, 200, green);
    renderer.addBreak(200, 1001, red);

You can click on the image rather and get the graphics inside by doing something like the following:

Now assuming you have a cluster layer object somewhere: lets say var clusterLayer = new ClusterLayer

you can attach an event

dojo.connect(map, "onClick", function (evt)
{
        var mp = evt.mapPoint;
        var cl= map.getLayer("Points");

        for (var g in cl.graphics)
        {
            var graphic = cl.graphics[g];
            if (graphic.geometry != null && graphic.geometry.type == "point")
            {
                var toleranceInPixel = 10;

                // now create a buffer around the current graphic and basically build                a polygon for it and get its extent
                var extentPoly = pointToPolygon(graphic.geometry,  toleranceInPixel);

                // then see if this buffered point polygon contans the mp
                if (extentPoly .contains(mp))
                {
                    // add all points that are within your buffered polygon to some array and access their geometries from there
                }
             }
        }
});

Method to build a polygon from point - Note there may be updated esri libraries which has this build in

  function pointToPolygon (point, toleranceInPixel)
  {
    //calculate map coords represented per pixel
    var pixelWidth = mapManager.map.extent.getWidth() / mapManager.map.width;

    //calculate map coords for tolerance in pixel
    var toleraceInMapCoords = toleranceInPixel * pixelWidth;

    //calculate & return computed extent
    var extent = esri.geometry.Extent(point.x - toleraceInMapCoords,
                   point.y - toleraceInMapCoords,
                   point.x + toleraceInMapCoords,
                   point.y + toleraceInMapCoords,
                    map.spatialReference);


    return (convertExtentToPolygon(extent, map.spatialReference));
}

Method to build an extent from polygon - Note there may be updated esri libraries which has this build in

  function convertExtentToPolygon (extent, spatialRef)
  {
    var xmin = extent.xmin;
    var xmax = extent.xmax;
    var ymin = extent.ymin;
    var ymax = extent.ymax;

    var topLeft = new esri.geometry.Point(xmin, ymax, spatialRef);
    var topRight = new esri.geometry.Point(xmax, ymax, spatialRef);
    var bottomRight = new esri.geometry.Point(xmax, ymin, spatialRef);
    var bottomLeft = new esri.geometry.Point(xmin, ymin, spatialRef);

    var rings = new Array(topLeft, topRight, bottomRight, bottomLeft, topLeft);

    var newPolygon = new esri.geometry.Polygon(spatialRef);
    newPolygon.addRing(rings);
    return newPolygon;
}

You can adjust the tolerance as needed - there may be newer esri libraries to do this better but this is similar to what used some time ago.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top