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. |
getParentGraphic() | Graphic | Applicable to label graphics. |
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
Graphic
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);
...
});