Graphics繪製是webgis基本編輯功能之一，基於JavascriptAPI進行開發很容易聯想到其基礎功能的提供者--Dojo，point、multipoint、polyline、polygon等基本圖形可以很方便的在地圖上繪製出來，效果還不錯！這裡需要引入一個新的庫"esri.toolbars.draw"。
Toolbar並不是一個使用者介面組件，而是一個Helper類用於在地圖上繪製圖形，通常由用戶端的UI組件來觸發所要繪製的具體圖形，如通過按鈕觸發：
Point 使用者繪製完成後，將觸發事件來完成具體圖形的顯示：
dojo.connect(tb, "onDrawEnd", addGraphic); 瞭解AO和Ags 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.各種基本圖形繪製
2.選擇點要素並以Graphics方式高亮顯示 1.在上文對Graphics繪製功能編寫基礎上，以官方網站上的代碼為例，在用戶端提供多種基礎形狀的繪製功能，此時Graphics形狀由使用者用戶端通過toolbar提供的helper方法決定，繪製的顯示效果通過一個DropDownList進行選擇：
<option value="newesri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE,10, newesri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([255,0,0]), 1), newdojo.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;
// 選擇框所包含的點用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);
} Demo示範：http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/demos/Graphics/points_in_extent.html
部落格園連結：http://www.cnblogs.com/flyingis/archive/2008/07/24/1250584.html |
