深入淺出ArcGIS 9.3 Javascript API（四）

第四章 繪製Graphic

    Graphics繪製是那個能讓死氣沉沉的WebGIS應用變得精彩有趣的點石成金魔棒。JavaScript API中擁有更強大的Graphics繪製功能。基於JavaScript API開發很容易聯想到其鼻祖——Dojo豐富靈活的圖片繪製功能。在Dojo中，point、multipoint、polyline、polygon等基本圖形可以很簡潔的在地圖上繪製出來，並且展示效果令人興奮！

   在開始這部分的示例前，首先要引入一個新的庫"esri.toolbars.draw"。Toolbar並不是一個用戶接口組件，而是一個Helper類用於在地圖上繪製圖形，通常由客戶端的UI組件來觸發所要繪製的具體圖形，如通過按鈕觸發：
 

    用戶繪製完成後，將觸發事件來完成具體圖形的顯示：
 dojo.connect(tb, "onDrawEnd", addGraphic);

    瞭解AO和ArcGIS Server ADF的開發人員都知道，圖形一般由兩部分組成，一是所要繪製的幾何圖形，即geometry，一是繪製圖形的顯示效果，如SimpleMarkerSymbol，所以在addGraphic方法要完成這兩部分的賦值：
  function addGraphic(geometry) {
     var symbol = dojo.byId("symbol").value;
      if (symbol) {
         symbol = eval(symbol);
     }
      else {
         var type = geometry.type;
          if (type === "point" || type === "multipoint") {
             symbol = tb.markerSymbol;
         }
          else if (type === "line" || type === "polyline") {
             symbol = tb.lineSymbol;
         }
          else {
             symbol = tb.fillSymbol;
         }
     }
     map.graphics.add(new esri.Graphic(geometry, symbol));
 }

    1.在上文對Graphics繪製功能編寫基礎上，以官方網站上的代碼爲例，在客戶端提供多種基礎形狀的繪製功能，此時Graphics形狀由用戶客戶端通過toolbar提供的helper方法決定，繪製的顯示效果通過一個DropDownList進行選擇：
<option value="new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]))">Square</option>

    Toolbar初始化及事件監聽在map.addLayer之前完成：
  function init() {
     map = new esri.Map("map");
     dojo.connect(map, "onLoad", initToolbar);
     map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));
 }
 
  function initToolbar(map) {
     tb = new esri.toolbars.Draw(map);
     dojo.connect(tb, "onDrawEnd", addGraphic);
 }

    構建界面UI之後，可以直接瀏覽網頁，Demo演示地址：
http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/demos/Graphics/graphics.html

    2.框選點要素，在很多行業應用中都涉及到，如對銀行POI網點選擇、電線杆塔統計、菸草銷售點業態分析等等，在JavaScript API實現這樣的功能，需要分兩步實現，第一是框選查詢，第二是對查詢的結果渲染並以Graphics方式顯示。

    查詢功能在後續文章中會詳細介紹，這裏僅輕筆帶過，引入"esri.tasks.query"，查詢功能實現：
 var queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");
 var query = new esri.tasks.Query();
 query.where = "STATE_NAME = 'Washington'";
 query.returnGeometry = true;
 query.outFields = ["CITY_NAME"];
 queryTask.execute(query, addPointsToMap);

    上面URL指向的是另外一個REST服務，addPointsToMap將所有符合條件的點都添加到Map中作爲Graphics顯示，接下來就是要在這些點中框選點並用不同顏色高亮顯示。
  function findPointsInExtent(extent) {
     var graphics = map.graphics.graphics;
     var results = [];
     var graphic;
      for (var i=0, il=graphics.length; i<il; i++) {
         graphic = graphics[i];
         // 選擇框所包含的點用highlightSymbol高亮顯示
          if (extent.contains(graphic.geometry)) {
             graphic.setSymbol(highlightSymbol);
             results.push(graphic.getContent());
         }
         // 之前已經highlightSymbol高亮顯示的點恢復爲原來defaultSymbol顯示
          else if (graphic.symbol == highlightSymbol) {
             graphic.setSymbol(defaultSymbol);
         }
     }
 }

    功能開發就完成了，剩下的就是加上對事件的監聽以及客戶端UI編輯。

  function initToolbar(map) {
     var tb = new esri.toolbars.Draw(map);
     dojo.connect(tb, "onDrawEnd", findPointsInExtent);
     tb.activate(esri.toolbars.Draw.EXTENT);
 }

    篇幅所限，如果想了解更多JavaScript API請關注Flyingis的blog，地址：http://www.cnblogs.com/flyingis。

本篇文章來源於 GIS空間站 轉載請以鏈接形式註明出處 網址：http://www.gissky.net/Article/1397_4.htm