1. 程式人生 > >ArcGIS API For JavaScript官方文件(二十)之圖形和要素圖層——①Graphics概述

ArcGIS API For JavaScript官方文件(二十)之圖形和要素圖層——①Graphics概述

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中。

Drawing tools sample演示了這個工作過程。

    隨著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 propertyPoint,您可以使用這個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);
  }
}
    有關如何從不同task的結果中建立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]));
    當要使用鏈式方法呼叫時,您需要平衡程式碼的效率和可讀性。如果您避免使用鏈式呼叫,您的程式碼可能會更容易閱讀和維護,但是,您將失去鏈式方法呼叫所提供的效能優勢。