Drawing of arcgis for js

I try to smooth out the various object relationships related to drawing in arcgis for js.

1. To draw, it's best to do it on a GraphicsLayer or FeatureLayer. FeatureLayer inherits from GraphicsLayer.

2. symbol is a brush. There are several:

    //Set fill symbol
    var bColor = arColor; bColor.push(0.5);//transparency
    var sfl = new esri.symbol.SimpleFillSymbol(
        esri.symbol.SimpleFillSymbol.STYLE_SOLID,
        new esri.symbol.SimpleLineSymbol(
            esri.symbol.SimpleLineSymbol.STYLE_SOLID,
            new dojo.Color(arColor),
            2
        ),
        new dojo.Color(bColor)
    );

3. But a brush needs to be made into a figure

    //Polygon points
    //Note that this polygon is not painted on paper, but in the painter's mind
    //In other words, in the draft stage, I simply sketched on the paper with a pencil
    var polygon = new esri.geometry.Polygon(points);
    //Until then, it was drawn with the brush symbol, with various wind circle data attached
    var gr = new esri.Graphic(polygon, sfl,
        {
            "level": c.level, "wn": c.WN, "en": c.EN, "es": c.ES, "ws": c.WS,
            "attrtype": "airRing", "index": index,
        },
        new esri.InfoTemplate("Wind coil:${level}", tplAirRing));

4. However, the painting will not appear on the map until it is explicitly added to the layer

layer.add(gr)

layer: layers
graphic: Images
geometry: geometric objects
symbol: Brush

graphic can carry the information we added:

//Until then, it was drawn with the brush symbol, with various wind circle data attached
    var gr = new esri.Graphic(polygon, sfl,
        {
            "level": c.level, "wn": c.WN, "en": c.EN, "es": c.ES, "ws": c.WS,
            "attrtype": "airRing", "index": index,
        },
        new esri.InfoTemplate("Wind coil:${level}", tplAirRing));
var tplAirRing = "<style>.tyconring{padding: 3px;}"
    + ".tyconring div{line-height:25px;height:25px;}"
    + ".e{width: 49%;text-align: center;float: left;}"
    + ".d{border-right:solid 1px #000;}"
    + "hr{width:100%;}"
    + "</style>"
    + "<div class='tyconring'>"
    + "<div>${level}Stage wind circle radius:</div>"
    + "<div><div class='e d'>Northwest ${wn}kilometre</div><div class='e'>Northeast ${en}kilometre</div></div>"
    + "<hr />"
    + "<div><div class='e d'>Southwest ${ws}kilometre</div><div class='e'>Southeast ${es}kilometre</div></div>"
    + "</div>";

This information can be used when needed:

Posted on Tue, 05 May 2020 08:13:13 -0400 by dipenmistry