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>