arcgis for js学习之Graphic类

arcgis for js学习之Graphic类

 

    <title>Graphic类</title>
    <meta charset="utf-8" />
    <!-- 说明：Graphic类
        一个graphic类包括四个基本的参数：一个geometer,一个symbol,attribute和infoTemplate.
        Grpaphic只能显示在GraphicsLayer对象中，即在GraphicLayer上监听Graphic对象。
        两种实例化的方式：
        new Graphic(geometry,symbol,attributes,infoTemplate)
        new Grpahic(json)
         -->
    <!-- data 属性：
        data-class-break:
        data-geometry-type:几何类型：point,polyline,polygon ,multipoint
        data-hidden:添加到图形中的节点时隐藏
        data-selected:添加到图形中的节点被选中
         -->
    <!-- 属性：
        attributes:属性字段值
        geometry:定义一个几何图形
        infoTemplate:infoWindow中显示的内容
        symbol：图形的样式
        visible:图形的可见性
         -->
    <!-- 方法：
        attr(name,value):修改属性值
        draw():绘制图形
        getContent():返回内容的值
        getDojoShape():
        getInfoTemplate():返回信息模板
        getLayer():返回一个图层的
        getNode():返回节点用于绘制图层
        getNodes():返回多个节点
        getShape():返回一个esri图形
        getShapes():。。。。
        getATitle():获取标题
        hide():隐藏图形
        setAttributes(attributes):定义图形的属性
        setGeometry(geometry):定义几何图形
        setInfoTemplate(infoTempate):定义一个infoWindow
        setSymbol(symbol):设置图形的象征
        show():显示图形
        toJson():将对象转换为json标的是的gis服务器
         -->
    <script>
        //实例一：最基本的图形
        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([225, 0, 0, 0.5]));
            var attr = {
                "Xcoord": evt.mapPoint.x,
                "Ycoord": evt.mapPoint.y,
                "Plant": "Mesa Mint"
            };
            var infoTemplate = new InfoTemplate("");
            var graphic = new Graphic(pt, sms, attr, infoTemplate);
        });
        //实例二：创建一个线图形
        require([
            "esri/graphic"
        ], function (Graphic) {
            var myLine = {
                geometry: {
                    "path": [[[111, 222], [222, 333]]],
                    "spatialReference": { "wkid": 4326 }
                },
                "symbol": {
                    "color": [0, 0, 0, 255],
                    "width": 1,
                    "type": "esriSLS",
                    "style": "esriSLSSolid"
                }
            };
            var gra = new Graphic(myLine);
        });
        //实例三：创建一个面图层
        require([
            "esri/graphic"
        ], function (Graphic) {
            var myPolygon = {
                "geometry": {
                    "rings": [[[222, 333], [333, 222], [334, 666]]],
                    "spatialReference": { "wkid": 4326 }
                },
                "symbol": {
                    "color": [0, 0, 0, 64],
                    "outline": {
                        "outline": [0, 0, 0, 255],
                        "width": 1,
                        "type": "esriSLS",
                        "style": "esriSFSSolid"
                    }
                }
            };
            var gra = new Graphic(myPolygon);
        });
        //实例四：创建多个点
        require([
            "esri/graphic"
        ], function (Graphic) {
            var myPoint = {
                "geometry": {
                    "x": 333,
                    "y": 222,
                    "spatialReference": { "wkid": 4326 }
                },
                "attributes": {
                    "Xcoord": 222.222,
                    "Ycoord": 333.333,
                    "Plant": "Mesa Mint"
                },
                "symbol": {
                    "color": [222, 0, 0, 222],
                    "size": 12,
                    "angle": 0,
                    "xoffest": 0,
                    "yoffest": 0,
                    "type": "esriSMS",
                    "style": "esriSMSSquare",
                    "outline": {
                        "color": [0, 0, 0, 233],
                        "width": 1,
                        "type": "esriSLS",
                        "type": "esriSLSSOlid"
                    }
                },
                "infoTemplate": {
                    "title": "sssss",
                    "content": "latude:${Field}"
                }
            };
            var gra = new Graphic(myPoint);
        })
    </script>