require(["esri/graphic"], function(Graphic) { /* code goes here */ });
Name | Summary |
---|---|
new Graphic(geometry?, symbol?, attributes?, infoTemplate?) | Creates a new Graphic object. |
new Graphic(json) | Creates a new Graphic object using a JSON object. |
Name | Type | Description |
---|---|---|
data-class-break | "<Number>" | Class break index as returned by ClassBreaksRenderer.getBreakIndex. |
data-geometry-type | "<String>" | Geometry type: "point" , "polyline" , "polygon" or "multipoint" . |
data-hidden | "" (empty string) | Added to the graphic's node when it is hidden. |
data-selected | "" (empty string) | Added to the graphic's node when it is selected. |
data-unique-value | "<String>" | Graphic's unique value as returned by UniqueValueRenderer.getUniqueValueInfo. |
Name | Type | Summary |
---|---|---|
attributes | Object | Name value pairs of fields and field values associated with the graphic. |
geometry | Geometry | The geometry that defines the graphic. |
infoTemplate | InfoTemplate | The content for display in an InfoWindow. |
symbol | Symbol | The symbol for the graphic. |
visible | Boolean | Indicate the visibility of the graphic. |
Name | Return type | Summary |
---|---|---|
attr(name, value) | Graphic | Adds a new attribute or changes the value of an existing attribute on the graphic's DOM node. |
clone() | Graphic | Creates a deep clone of the graphic object. |
draw() | Graphic | Draws the graphic. |
getChildGraphics() | Graphic[] | Returns the graphics summarized by an aggregate graphic in a clustering or feature reduction visualization. |
getContent() | String | Returns the content string based on attributes and infoTemplate values. |
getDojoShape() | Shape | Returns the dojo/gfx/shape.Shape of the Esri graphic. |
getInfoTemplate() | InfoTemplate | Returns the info template associated with the graphic. |
getLayer() | Layer | Returns a reference to the associated layer. |
getNode() | SVG group | SVG element | VML Shape | Group Element | Returns the DOM node used to draw the graphic. |
getNodes() | SVG group | SVG element | VML Shapes or Group Elements | Returns one or more DOM nodes used to draw the graphic. |
getShape() | Shape | Returns the dojox/gfx/shape.Shape of the Esri graphic. |
getShapes() | Shape[] | Returns one or more dojox/gfx/shape.Shape used to draw the graphic. |
getSourceLayer() | Layer | In contrast to the getLayer method, getSouceLayer does not change when a graphic is added to another layer. |
getTitle() | String | Returns the title string based on attributes and infoTemplate values. |
hide() | None | Hides the graphic. |
isAggregate() | Boolean | Indicates if the graphic represents a cluster of features. |
setAttributes(attributes) | Graphic | Defines the attributes of the graphic. |
setGeometry(geometry) | Graphic | Defines the geometry of the graphic. |
setInfoTemplate(infoTemplate) | Graphic | Defines the InfoTemplate for the InfoWindow of the graphic. |
setSymbol(symbol) | Graphic | Sets the symbol of the graphic. |
show() | None | Shows the graphic. |
toJson() | Object | Converts object to its ArcGIS Server JSON representation. |
< > geometry |
Optional | The geometry that defines the graphic. |
< > symbol |
Optional | Symbol used for drawing the graphic. |
< > attributes |
Optional | Name value pairs of fields and field values associated with the graphic. |
< > infoTemplate |
Optional | The content for display in an InfoWindow. |
require([ "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/Color", "esri/InfoTemplate", "esri/graphic", ... ], function(Point, SimpleMarkerSymbol, Color, InfoTemplate, Graphic, ... ) { var pt = new Point(xloc,yloc,map.spatialReference) var sms = new SimpleMarkerSymbol().setStyle( SimpleMarkerSymbol.STYLE_SQUARE).setColor( new Color([255,0,0,0.5])); var attr = {"Xcoord":evt.mapPoint.x,"Ycoord":evt.mapPoint.y,"Plant":"Mesa Mint"}; var infoTemplate = new InfoTemplate("Vernal Pool Locations","Latitude: ${Ycoord} <br/> Longitude: ${Xcoord} <br/> Plant Name:${Plant}"); var graphic = new Graphic(pt,sms,attr,infoTemplate); ... });
< > json |
Required | JSON object representing the graphic. |
Create a line
require([ "esri/graphic", ... ], function(Graphic, ... ) { var myLine ={geometry:{"paths":[[[-91.40625,6.328125],[6.328125,19.3359375]]], "spatialReference":{"wkid":4326}}, "symbol":{"color":[0,0,0,255],"width":1,"type":"esriSLS","style":"esriSLSSolid"}}; var gra= new Graphic(myLine); ... });
Create a polygon
require([ "esri/graphic", ... ], function(Graphic, ... ) { var myPolygon = {"geometry":{"rings":[[[-115.3125,37.96875],[-111.4453125,37.96875], [-99.84375,36.2109375],[-99.84375,23.90625],[-116.015625,24.609375], [-115.3125,37.96875]]],"spatialReference":{"wkid":4326}}, "symbol":{"color":[0,0,0,64],"outline":{"color":[0,0,0,255], "width":1,"type":"esriSLS","style":"esriSLSSolid"}, "type":"esriSFS","style":"esriSFSSolid"}}; var gra = new Graphic(myPolygon); ... });
Create a multipoint
require([ "esri/graphic", ... ], function(Graphic, ... ) { var myMultiPoint = {"geometry":{"points":[[-92.109375,44.296875],[-86.1328125,31.9921875], [-73.4765625,45.703125]],"spatialReference":4326},"symbol":{"color":[255,255,255,64], "size":12,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS","style":"esriSMSCircle", "outline":{"color":[0,0,0,255],"width":1,"type":"esriSLS","style":"esriSLSSolid"}}}; var gra = new Graphic(myMultiPoint); ... });
Create a point and specify an infoTemplate
require([ "esri/graphic", ... ], function(Graphic, ... ) { var myPoint = {"geometry":{"x":-104.4140625,"y":69.2578125, "spatialReference":{"wkid":4326}},"attributes":{"XCoord":-104.4140625, "YCoord":69.2578125,"Plant":"Mesa Mint"},"symbol":{"color":[255,0,0,128], "size":12,"angle":0,"xoffset":0,"yoffset":0,"type":"esriSMS", "style":"esriSMSSquare","outline":{"color":[0,0,0,255],"width":1, "type":"esriSLS","style":"esriSLSSolid"}}, "infoTemplate":{"title":"Vernal Pool Locations","content":"Latitude: ${YCoord} <br/> Longitude: ${XCoord} <br/> Plant Name:${Plant}"}}; var gra = new Graphic(myPoint); ... });
Object
> attributesnumeric
values. This means that when updating existing features, date fields must have numeric values and not date objects.Boolean
> visibletrue | false
true
Graphic
Graphic
var clonedGraphic = graphic.clone();
Graphic[]
String
dojo/gfx/shape.Shape
of the Esri graphic. One common use for the getDojoShape
method is to change the drawing order of a graphic using the moveToFront
and moveToBack
methods. Deprecated at v3.8. Use getShape and getShapes instead.Shape
graphic.getDojoShape().moveToFront(); graphic.getDojoShape().moveToBack();
InfoTemplate
Layer
SVG group
| SVG element | VML Shape | Group Element
map.graphics.on("click", function(e){ //get the associated node info when the graphic is clicked var node = e.graphic.getNode(); console.log(node); });
SVG group
| SVG element
| VML Shapes or Group Elements
dojox/gfx/shape.Shape
of the Esri graphic. One common use is to change the drawing order of a graphic using the moveToFront
and moveToBack
methods. (Added at v3.8)Shape
graphic.getShape().moveToFront(); graphic.getShape().moveToBack();
dojox/gfx/shape.Shape
used to draw the graphic. Multiple shapes are used when a graphics layer has a renderer with backgroundFillSymbol. (Added at v3.8)Shape[]
getSouceLayer
does not change when a graphic is added to another layer. (Added at v3.21)Layer
String
Boolean
graphic.isAggregate();
Graphic
< > attributes |
Required | The name value pairs of fields and field values associated with the graphic. |
gra.setAttributes( {"XCoord":evt.mapPoint.x,"YCoord":evt.mapPoint.y,"Plant":"Mesa Mint"});
Graphic
< > geometry |
Required | The geometry that defines the graphic. |
gsvc.simplify([ polygonGraphic.geometry ], function(geometries){ polygonGraphic.setGeometry(geometries[0]); });
Graphic
< > infoTemplate |
Required | The content for display in an InfoWindow. |
require([ "esri/InfoTemplate", ... ], function(InfoTemplate, ... ) { var infoTemplate = new InfoTemplate(); infoTemplate.setTitle("${NAME}"); infoTemplate.setContent("<b>2000 Population: </b>${POP2000}<br/>" + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI}<br/>" + "<b>2007 Population: </b>${POP2007}<br/>" + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI}"); graphic.setInfoTemplate(infoTemplate); ... });
Graphic
< > symbol |
Required | The symbol for the graphic. |
require([ "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color", ... ], function(SimpleFillSymbol, SimpleLineSymbol, Color, ... ) { var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98,194,204]), 2), new Color([98,194,204,0.5]) ); var graphic = results[i].feature; graphic.setSymbol(symbol); ... });