1. 程式人生 > >arcgis for js 的繪製

arcgis for js 的繪製

我嘗試捋一下arcgis for js中有關畫圖的各種物件關係。

1、要想繪製,最好在GraphicsLayer或FeatureLayer上進行。FeatureLayer繼承自GraphicsLayer。

2、symbol是畫筆。有好幾種:
這裡寫圖片描述

    //設定填充symbol
    var bColor = arColor; bColor.push(0.5);//透明度
    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、但畫筆要繪製成圖形才算

    //將點連成多邊形
    //注意這個多邊形並未畫在“紙”上,只形成於畫家的“腦海”
    //或者說,僅是打草稿階段,用鉛筆在紙上簡單地勾畫了幾下
    var polygon = new esri.geometry.Polygon(points);
    //直到這時才用畫筆symbol畫出來,還附帶上各種自定義資料
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("風圈:${level}", tplAirRing));

4、但是,地圖上還不會出現這幅畫,直到明確地將畫加進圖層

layer.add(gr)

layer:圖層
graphic:影象
geometry:幾何物件
symbol:畫筆

其中graphic可以承載我們加進去的資訊:

//直到這時才用畫筆symbol畫出來,還附帶上各種風圈資料
    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("風圈:${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}級風圈半徑:</div>"
    + "<div><div class='e d'>西北${wn}公里</div><div class='e'>東北${en}公里</div></div>"
    + "<hr />"
    + "<div><div class='e d'>西南${ws}公里</div><div class='e'>東南${es}公里</div></div>"
    + "</div>";

這些資訊,在需要的時候可以派上用場:
這裡寫圖片描述