ESRI Javascript API获取范围内的功能

时间:2014-03-27 00:21:33

标签: javascript esri arcgis-js-api

解决了...我正在尝试获取分组的图形的几何图形,我似乎无法获得x和y,而无需将graphic.attributes.baseGraphic添加到我必须创建的新图形中。有问题的代码有" ***"定义带有问题的部分的字符。

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;
        }
    },

1 个答案:

答案 0 :(得分:0)

基于你的&#34;有限问题的这一部分&#34;上面:

  

&#34;我正在尝试获取分组的图形的几何形状&#34;

我假设你正在使用esri ClusterLayer,如下所述:https://developers.arcgis.com/javascript/jssamples/layers_point_clustering.html

如果是这样,那么我们就去吧:

鼠标悬停并不理想,原因是群集图像只是PictureMarkerSymbols,它是针对不同断点处的新esri.renderer.ClassBreaksRenderer设置的,例如:

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

您可以点击图片,然后通过执行以下操作获取图片:

现在假设你有一个集群层对象:假设var clusterLayer = new ClusterLayer

您可以附加活动

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

从点构建多边形的方法 - 注意可能有更新的esri库,其中包含此构建

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

从多边形构建范围的方法 - 请注意,可能有更新的esri库,其中包含此构建

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

您可以根据需要调整容差 - 可能有更新的esri库可以更好地完成此操作,但这与之前使用的类似。