Working with graphics

    ArcGIS JavaScript API允許在地圖上繪製graphic(圖形)。graphic可以由使用者作為標記或輸入繪製，也可以由應用程式根據任務繪製。例如，應用程式可能會將查詢結果作為graphics新增到地圖。

    您可以為您的ArcGIS JavaScript API地圖建立和新增一個或多個graphic圖層。一個GraphcsLayer包含一個Graphic物件的陣列，該陣列初始是空的，但是在地圖載入之後任何時候都可以新增graphic。

    將graphic想象為4件事物的容器：geometry、symbol、attrubutes和info template.

• geometry決定graphic的位置。可以是point、multipoint、polyline、polygon。
• symbol決定graphic的外觀，geometry是point、multipoint的symbol可以是marker symbol，polyline的symbol可以是line symbol、polygon的symbol可以是fill symbol。
• attributes是描述graphic的名稱-值對。如果您建立graphic，您需要分配attributes。如果graphic是在一個圖層上響應執行任務而建立的，則graphic自動包含該圖層的欄位屬性。一些任務允許您限制返回到結果graphic的attributes，
  Query.outFields是限制任務返回attributes的一個示例。
• info template定義當graphic被點選時，各種attribute將如何出現。

    四個屬性geometry、symbol、attributes和info template都是可選的。許多task結果被作為FeatureSet中的graphic物件被返回。這些graphic返回時只有geometry和attributes。如果您想將graphic新增到地圖中，必須為它們定義和設定符號。

    如果您正在編寫允許使用者在地圖上繪製graphic的程式碼，則Draw工具條使此變得非常容易。Draw工具條是一個類，可以幫助您捕獲使用者在螢幕上繪製的geometry，然後您可以定義一個symbol並將它應用到新graphic物件中的geometry中。

    隨著task型別的不同，將task結果新增到地圖上的方式也會有所不同。如果task返回一個FeatureSet，那麼您就會得到一個graphic陣列（FeatureSet.features)，可以通過遍歷該陣列將graphic新增到地圖。下面的程式碼顯示瞭如何使用QueryTask的結果完成這些。注意，程式碼為graphic定義了一個symbol和一個info template。

queryTask.on("complete", function(featureSet) {
  map.graphics.clear();
  var symbol = new SimpleFillSymbol();
  // Loop through features in the featureSet and add them to the map.
  for (var i=0, il=featureSet.features.length; i<il; i++) {
    // Get the current feature from the featureSet.
    // Feature is a graphic
    var graphic = featureSet.features[i];
    graphic.setSymbol(symbol);
    graphic.setInfoTemplate(infoTemplate);

    //Add graphic to the map graphics layer.
    map.graphics.add(graphic);
  }
});

    其他task沒有提供要素集，但是提供了geometry，您可以使用geometry來建立graphic。一個Locator返回一個或多個AddressCandidates，其中有一個location property是Point，您可以使用這個geometry來建立顯示地址位置的graphic。如下列程式碼所示：

for (var i=0, il=candidates.length; i<il; i++) {
  candidate = candidates[i];
  if (candidate.score > 80) {
    var attributes = { 
      address: candidate.address, 
      score: candidate.score, 
      locatorName: candidate.attributes.Loc_name 
    };
    var graphic = new Graphic(candidate.location, symbol, attributes, infoTemplate);
    map.graphics.add(graphic);
  }
}

1、優化graphic和symbol的程式碼

    下面是在處理graphic及其相關geometry和symbol時可以優化程式碼的一些方法

    向map中新增graphic

    在將graphic新增到map的graphic圖層之前，一定要設定graphic的geometry和symbol。如果graphic已被新增到map，呼叫setGeometry或者setSymbol將可以對graphic進行重繪。

    效率較低：

var graphic = new Graphic(geometry, defaultSymbol);
map.graphics.add(graphic);
if (isSelected) {
  graphic.setSymbol(highlightSymbol);
}

    更有效率：

var graphic = new Graphic(geometry, isSelected ? highlightSymbol : defaultSymbol);
map.graphics.add(graphic);

    建立和自定義symbol

    建立symbol時，應使用預設symbol建構函式並僅重寫自定義屬性。在開始自定義symbol之前，請檢查每個symbol型別的預設屬性集。

    下面的程式碼通過設定所有屬性來建立symbol，即使預設symbol已經是solid line。這樣做的效率較低：

var symbol = new SimpleLineSymbol(
  SimpleLineSymbol.STYLE_SOLID,
  new Color([255,0,0]), 1)
);

    下面的程式碼效率更高。它採用預設symbol，並只重寫需要自定義的屬性，在本例中是color：

var symbol = new SimpleLineSymbol().setColor(new Color([255,0,0]));

    鏈式方法

    鏈式方法呼叫可以減少您編寫的程式碼。例如SimpleMarkerSymbol提供返回物件本身的setter方法，允許方法的鏈式呼叫。

    效率較低：

var symbol = new SimpleMarkerSymbol();
symbol.setSize(10);
symbol.setColor(new Color([255,0,0]));

    效率較高：

var symbol  = new SimpleMarkerSymbol().setSize(10).setColor(new Color([255,0,0]));