Javascript API (4)-Drawing Graphics

Graphics Rendering is one of the basic editing functions of webgis. It is easy to think of its basic function provider-Dojo, which is developed based on JavascriptAPI, point, multipoint, polyline, polygon and other basic graphics can be easily drawn on the map, the effect is good! Here we need to introduce a new library "esri. toolbars. draw ". A Toolbar is not a user interface component, but a Helper class used to draw images on a map. Generally, the UI component of the client triggers the specific image to be drawn, as shown in the following figure: Point After the user draws the image, an event is triggered to display the specific image: Dojo. connect (tb, "onDrawEnd", addGraphic ); Developers who know AO and Ags know that a graph is generally composed of two parts. One is the ry to be drawn, and the other is the display effect of the drawing, such as SimpleMarkerSymbol, therefore, the addGraphic method must assign values to the two parts: 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 )); } Content directory: 1. Draw various basic Images 2. Select the vertex element and highlight it in Graphics mode. 1. based on the previous writing of Graphics, taking the code on the official website as an example, the client provides various basic shapes for drawing, in this case, the Graphics shape is determined by the helper method provided by the toolbar by the user client. The display effect of the drawing is selected through a 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]), 1), newdojo. color ([0,255, 0, 0.25]) "> Square </option> Toolbar initialization and event listening are completed before 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 ); } After the UI is built, you can directly browse the webpage. Demo address: Http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/demos/Graphics/graphics.html 2. box selection elements are involved in many industrial applications, such as the selection of POI outlets for banks, wire and tower statistics, and analysis of tobacco sales formats. This function is implemented using Javascript APIs, two steps are required. The first is to select a query box, and the second is to render the query results and display them in Graphics mode. The query function will be described in detail in subsequent articles. Here, we will introduce "esri. tasks. query". The query function is implemented: 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.exe cute (query, addPointsToMap ); The above URL points to another REST service. addPointsToMap adds all qualified vertices to the Map for Graphics display. Next, you need to select a point in these points and highlight it in different colors. Function findPointsInExtent (extent ){ Var graphics = map. graphics. graphics; Var results = []; Var graphic; For (var I = 0, il = graphics. length; I <il; I ++ ){ Graphic = graphics; // Use highlightSymbol to highlight the points contained in the selection box. If (extent. contains (graphic. geometry )){ Graphic. setSymbol (highlightSymbol ); Results. push (graphic. getContent ()); } // The previously highlighted point of highlightSymbol is restored to the original defasymsymbol display. Else If (graphic. symbol = highlightSymbol ){ Graphic. setSymbol (defaultSymbol ); } } } The function development is complete, and the rest is the event listening and client UI editing. 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 Blog garden link: http://www.cnblogs.com/flyingis/archive/2008/07/24/1250584.html

This topic is highlighted by flyingis