Research and Development of distribution network WebGIS [3]

Distribution NetworkWebGISResearch and developmentSend [3]

Author: 1.1 drops of beer http://beer.cnblogs.com/

Chapter 2 Basic functions of distribution network WebGIS

In the previous chapter, I introduced the basic Ajax, but the Ajax provided by the Web GIS development framework web ADF further encapsulates the basic Ajax. The Web ADF of ArcGIS server9.3 provides a framework for developers to manage the transmission between clients and servers in the Ajax environment. This framework is called the "Callback results framework", which includes some classes on the server (callbackresultcollection, callbackresult), controls (Web ADF controls), and client JavaScript libraries (Web ADF JavaScript), as shown in.

Figure3.1Framework diagram of the WAF callback Structure

The response between the server and the client is implemented through callbackresult. In fact, a callbackresult is a JSON-formatted string generated by the web ADF control on the server. All Web ADF controls have the callbackresults attribute. You can use callbackresultscollection to add or delete these callbackresults, or convert them to string display. Of course, you can also define a callbackresult by yourself, instead of being generated by the server control, which will be described later. After the server uploads the callbackresult to the client, it submits it to the client's Js function ESRI. ADF. system. processcallbackresult () to refresh the client content. In general, the callback result framework simplifies the work of developers and asynchronously refreshes the content of the ADF and non-ADF controls.

Based on the differences between the controls to be refreshed, we will introduce them in two parts: the WAF control and the non-WAF control.

I. Refresh the Web ADF Control

WAF provides developers with a series of controls, such as common map, TOC, and toolbar. You must refresh the preceding controls to change the MAP range, whether the layers are visible, and map rendering. As mentioned above, each ADF control has the callbackresult attribute. What we need to do is copy the callbackresult of the ADF control to be refreshed to the map. callbackresults, and then return to the client's Web adf js function processcallbackresult () for processing.

For example, if you have added a new layer and need to refresh map and TOC, you need to add the followingCode:

Toc1.refresh ();

Map1.callbackresults. copyfrom (toc1.callbackresults );

The actual process is shown in:

Figure3.2Web ADF control refresh

The callback result management between the Web ADF controls depends on the callbackresultcollection class. It provides some methods to conveniently add and delete callbackresult. The ADD and copyfrom methods are the most commonly used methods. The former is used to add a custom callbackresult instance to callbackresultcollection, and the latter is used to copy a callbackresultcollection instance to another callbackresultcollection instance. Of course, you can also use the tostring method to convert callbackresult to a string. For more information about callbackresultcollection, refer to the offline help of ArcGIS Server.

It should be emphasized that not all the updates of the ADF control need to be explicitly refreshed by calling the refresh method on the server, which is particularly evident in the map control. For example, changing the MAP range or map proportion will cause the map control to automatically update its callback result collection. In other cases, such as modifying the map's visibility or adding or deleting a map resource, you must call the refresh method explicitly. The following lists the inline relationships between some Web ADF controls. In these cases, you do not need to explicitly call the refresh method.

1. When the Toolbar Control is bound to the map control, any operation on the toolbar will automatically add the map callback result to the call back result collection on the toolbar.

2. When the TOC control is bound to the map control, the button that controls the layer visibility in the TOC will also be automatically refreshed.

2. Refresh non-web ADF controls

In addition to map, TOC, and other ADF controls, the page generally contains many non-ADF controls, such as button, label, and gridview. Refresh the content of these controls, which can be completely separated from the callbackresult of ArcGIS Server, for example, using updatepanel. If you want to use callbackresult, you can also use it, but you must customize the callbackresult string.

The callbackresult class defines some static methods that allow developers to quickly customize and refresh the content of non-web ADF controls on the client. As shown in Table 3.1.

Table3.1 Method provided by callbackresult

callbackresult static method	description
createsetcontent	set the outerhtml property of an HTML element.
createsetinnercontent	set the innerhtml property of an HTML element.
createsetimagesource	set the SRC property of an image element.
createjavascript	execute javascript. On the client.
createincludejavascript	include Javascript. On the client
createincludestylesheet	include a CSS style. sheet on the client

Custom callbackresult instances on the server are processed by the web ADF JavaScript function processcallbackresult () of the client. The processcallbackresult function contains the following code to process custom callbackresult content:

[JavaScript] If (Action = 'javascript ') { VaR method = function () { try {eval (Params [0]);} ...} else if (Action = "content") { var o = $ get (controlid ); If (o) {o. outerhtml = Params [0] ;} ...} else if (Action = "innercontent") { var O2 = $ get (controlid ); If (O2) {o2.innerhtml = Params [0]; validrespon Se = true ;} ...} else if (Action = "image ") { var O3 = $ get (controlid); If (O3) {o3.src = Params [0] ;} ...} else if (Action = 'include ') { var id = Params [0]; var elm = (ID? $ Get (ID): NULL); ... If (ELM) {Elm. parentnode. removechild (ELM) ;} document. getelementsbytagname ('head '). item (0 ). appendchild (ELM); ...}

It should be emphasized that no matter which Ajax mode is used, the callback Technology (callback) or part of the page refresh (partial PostBack, or ASP. net Ajax), the content of the callback result and the functions of the client to process the callback result are the same.

With the Ajax Foundation of the "Callback results framework" mentioned above, you can develop and study the specific implementation process of the following functions.

3.1WebGIS power equipment parameter query 

Requirement: add the power device layer query function to the existing WebGIS basic template. There are two query methods for power equipment: one is to use a toolbar to query the devices at the specified location in the map, which is based on the geographical location; in addition, the user enters relevant characters and then queries the database, which is based on the property field of the device.

3.1.1 Map interaction Query

Requirement: the user clicks and interacts with the map control through the mouse on the client side, and then the client displays the details of the device selected at the location of the mouse.

On the server side (note: the "server side" mentioned in this Article refers to the establishment of server-side Code Compiled by C, similarly, the "client" refers to the use of HTML markup language or JavaScript to write the code for running the client. Although it is created on a local PC during development, however, this description can make the division of responsibilities of various source files clearer. arcGIS. ADF. web. UI. webcontrols. the mapidentify control of webcontrol, which is affiliated with the namespace "webmapapp". Then, the control has callback functions, callback queues, and other server and client-side ADF data interfaces and function interfaces for calling, developers can compile server-side and client-side code to implement related functions (the main functions and framework templates are provided ), this control can be used only when the client adds a reference Declaration for this namespace to the front of the page file:

<% -- Custom Server Control-map query control -- %> <% @ Register Assembly = "app_code" namespace = "webmapapp" tagprefix = "uc1" %>

Figure3.3Map interaction query implementation process

1.Coordinate information generated by client mouse Interaction: 

To meet the needs of WebGIS, ESRI not only provides a large number of server-side controls and APIs, but also provides client-side JavaScript libraries with abundant resources, this library is called "Web ADF JavaScript library". It is stored in ASP. built on the. NET Ajax JavaScript library, it provides a complex client framework through which you can interact with Web ADF controls or components in the script environment. This means that you can use JavaScript to interact with the Web ADF control, such as browsing a map, adding graphics to a map, creating a map tips without any server code. From another perspective, the Web ADF JavaScript Library provides another tool for Web ADF developers. Web ADF Javascript is designed to use the Client technology to enhance web ADF applications to support client/server-side synchronization and client-only interaction, instead of being used independently instead of server-side programming. This library can be used as long as there is a Web ADF control on the page. It does not need to be installed independently and is embedded in the Web ADF control and cannot be changed. It is not available outside the Web ADF, and it is mainly used for development and use with ArcGIS Server Web ADF.

The Web ADF JavaScript library depends on ASP. net Ajax JavaScript library, Asp. net Ajax JavaScript Library provides a complex foundation for creating Ajax solutions (Data Exchange Layer 3.4 ). It manages the interaction between the client and remote services, as well as controls on the server. It provides a mechanism for displaying Web controls and client event processing on the client. In addition, it provides cross-browser support, and all these features are used in the Web ADF JavaScript library. The following figure shows the relationship between them. Detailed Help on the Web ADF JavaScript library can be found in the help of ArcGIS Server.

Through some client APIs provided by the web ADF JavaScript library, we can directly perform some operations on the Web ADF control on the client, such as setting the display range of the map control, the color of the specified position in the map is highlighted to control the appearance and display of the Web ADF Server Control on the client, obtain the status information of the Web ADF Server Control on the client and capture events on the client. Some operations on the Web ADF control through the Web ADF JavaScript library do not need to go through pure client operations on the server side. Generally, they are only responsible for page display and data collection, and when data is updated, you still need to communicate with the server to obtain new data.

When performing a map interaction query, the query is based on the coordinate value of the device on the map. This coordinate is generated when you use the mouse to interact with the client map control, through the interface functions in the client web ADF JavaScript library, it is easy to extract the coordinates and perform simple character encoding:

...... VaR mappnt = new ESRI. ADF. geometries. Point (Geom. get_x (), Geom. get_y (); // extract coordinates ...... VaR argument = "mode = identify & coords =" + Geom. get_x () + ":" + Geom. get_y (); // encode ...... This. docallback (argument, this); // execute the callback-send data to the server ......

After the client encodes the map coordinate value, it then transmits the encoded string to the server in asynchronous mode, and then the server receives the data and performs related operations.

Figure3.4WAF control data exchange hierarchy

2.Server-side Data Query: 

The client initiates a request to the server and transmits the coordinate data to the server. The server responds to the request. The server responds to the client request through an overloaded function getcallbackresult, the _ callbackarg member in the Web ADF control is used to undertake the data transmitted by the client. Then the Web ApplicationProgramThe client is switched to the server, and the server is responsible for processing the callback request.

The server decodes the received string and extracts the coordinate values (the specific decoding process has been detailed in the previous chapter ), then, you can call the API provided by the web ADF to retrieve the map database and obtain the map Attribute Table that meets the requirements. The procedure is as follows:

Figure3.5Map layer Query Process

Search the geographical data source shown in (take the "binning" layer as an example) to obtain a set of data that meets the query requirements:

Figure3.6"Binning" geographic data table

In the query result, the data table generally contains two types of fields: the ry field and the additional attribute field. In the data table shown in, the first two fields are FID (Graphic Element number) and shape (geometric type, for example, multi-point type) are geometric-related fields, the following two fields are "name" and "sbbh" (device number) are used as additional attributes to describe the elements, with these descriptive fields, we can connect with SQL non-geographical databases for more detailed information queries.

After you query the geographical data of a device in a specified location from a geographical database, you can query more detailed additional information by connecting to the SQL database based on the additional attributes in the geographical data, in this module, although SQL database retrieval is the most tedious part, it is not described in detail because of the single technical problem.

Figure3.7"Binning" non-geographic data table

After the retrieval of the geographical database and the retrieval of the non-geographical database, a data table set is obtained. At this time, the data table set is stored in the callbackresults callback result set of the mapidentify control, then return the result to the client through the getcallbackresult interface function. The specific implementation method is as follows:

...... Callbackresult cresponse = pointidense (MAP, mappoint); // retrieves information of a specified device. Callbackresults. Add (cresponse); // a member function of the parent class webcontrol-a stack-type callback message queue. ...... Return base. getcallbackresult (); // return the callback result to the client.

3.The client receives and displays the data.

After the server replies to the data requested by the client, the client accepts the response data through the processcallbackresult client JavaScript function, and displays the data through a javascript control similar to maptips on the client, this JavaScript control consists of a drop-down box, a retrieval information display table, and a layer path prompt bar. The drop-down box selects the layers to be displayed, because multiple layers may have search results that meet the requirements when you click the mouse, the search information display table is used to display the search results of the specified layer in the drop-down box. The layer path prompt bar displays the currently displayed layer path. The specific effect is shown in:

Figure3.8Map interaction Query

The basic function template of the Javascript control that displays data query results on the client has been provided. Developers only need to find the interface for data transmission to import their own data, and some page elements can be customized to achieve the above effect, so the specific process will not be repeated.

3.1.2 Query device Properties

Requirement: You can enter the known attributes (such as the device ID and device name) of the power device to search for keywords and display the search results on the page, the selected query results are marked in the map, and the zoom-in and location functions and query details are provided. You need to use or set the following WAF controls:

Searchattributestask: Used to undertake keywords input by the service and retrieve map resources.

Mapresourcemanager: sets the query parameters for the map data source.

Taskresults: Task result. The query result is displayed in a tree format on the page, and other basic functions are provided.

Taskmanager: bind the preceding two controls to associate data.

1. Set the searchattributestask Control

The system's built-in searchattributestask control can be used through simple control attribute settings to meet the requirements of this graduation project. Click the searchattributestask control on the page to configure parameters. The following parameter configuration dialog box is displayed:

Figure3.9Searchattributestask control setting Interface

On the "General" tab, set some prompt characters for the control and set the range of map retrieval fields on the "Settings" tab (this is important ), on the "Results" tab, set the upper limit and display mode of the Query Result Records (generally, the default setting is used ).

2. mapresourcemanager settings

Settings related to map data source query. By setting layerdefinition in mapresourceitem in the mapresourcemanger control, the setting interface is as follows:

Figure3.10Mapresourcemanager settings page

"Symbols" tab: highlights the query result.

"Fields" tab: Set the fields to be displayed in taskresults (for example, FID and ID fields that we don't care about can be selected not to be displayed ).

"Records" tab: sets the alias of the field displayed by taskresults (this is part of the work in Chinese ).

3. Use taskresults Custom Controls

The basic controls provided by the system have the following Disadvantages:

Menu items are fixed, and the scalability is too weak.

The menu prompt is in English by default, and it is difficult to find the interface for Chinese conversion.

Therefore, in this graduation project, the custom taskresults control is used to display the query results, and some pages are added to each record. Right-click the shortcut menu and choose "clear ", "zoom in" and "Show Details ".

Create a customtaskresults class on the server that inherits ESRI. ArcGIS. ADF. Web. UI. webcontrols. webcontrol. taskresults, and then write the specific content and functions. In the client code, just like the preceding "map interactive query" control, you only need to add a control namespace reference declaration to the page element code.

When installing ArcGIS, a piece of learning code can be used for reference to build the basic platform for this control, so we will not describe it here, this graduation project solves the problem of adding the right-click menu command to each search result in customtaskresults: "clear", "zoom in", and "Show Details"

First, check the taskresults structure in the development help document of ArcGIS:

Figure3.11Taskresults Structure

One taskresults provides four shortcut menus:

Taskresultcontextmenu: The top-right menu of a task Result Framework.

Graphicslayercontextmenu: Right-click menu of the layer information node, which is on the second layer.

Featurecontextmenu: Right-click the Element Node of the layer, which is on the third layer.

Removeonlycontextmenu: Right-click menu of the blank prompt node when no search results exist.

In this graduation project, three levels of menus are customized. For space reasons, we will only introduce the function of implementing level 3 menus, and customize featurecontextmenu:

In the overloaded createchildcontrols member function, set the appearance of the Level 3 menu:

// right-click the menu to determine whether the menu is successfully customized. bool exists = false; foreach (contextmenuitem item in base. featurecontextmenu. items) { If (item. TEXT = "zoom in and locate") exists = true; } // If no, then add the custom right-click option-Level 3 directory If (! Exists) { base. featurecontextmenu. items. clear (); contextmenu = base. featurecontextmenu; // zoom in contextmenuitem menuitemzoomin = new contextmenuitem ("images/show-magnify.png", "zoom in position ",""); contextmenu. items. add (menuitemzoomin); // clear contextmenuitem menuitemclear = new contextmenuitem ("images/dismiss_solid.png", "clear ", ""); contextmenu. items. add (menuitemclear); // display contextmenuitem menuitemview = new contextmenuitem ("images/11.bmp", "display device details ", ""); contextmenu. items. add (menuitemview); }

After the above definition, When you right-click the Level 3 node in the Custom customtaskresults, three menus are displayed: "zoom in and position", "clear", and "display device details ". However, clicking these commands does not respond. You need to add the corresponding response function for these commands in onload's member functions:

This. featurecontextmenu. itemclicked + = new contextmenuitemclickedeventhandler (featurecontextmenu_itemclicked );

The featurecontextmenu_itemclicked function is bound with Level 3 menu events. You only need to write the response code inside the function:

Figure3.12Framework of server shortcut menu Response Function Code

Implementation of the three commands:

"Zoom in and position ":

The server obtains information about the current element node and extracts the geometric coordinate from it, and set a cover of a certain size centered on this geometric point (obviously smaller than the display range of the current map, otherwise it will not be "enlarged ), then, the range of the map control is set to this cover, and the center of this cover is centered to achieve the "zoom in and position" effect. The specific implementation flowchart is as follows:

Figure3.13Implement the "zoom in and position" function Process

"Clear ":

The main process is the same as "execution amplification", but the code on the server is different. You only need to delete the feature node in customtaskresults, and then add the command to the callback queue of featurecontextmenu, you can delete this node from the client.

"Display device details ":

The program is required to retrieve more detailed information from the SQL database through the geographic information contained in the element node and display it in the client browser. The node data structure of customtaskresults is an XML string, therefore, you can parse the XML document of the element node content (the method for parsing the XML document is described in the previous chapter) to obtain additional information in the geographic information, which can be used to connect to the SQL database, then, you can obtain the name of the SQL table to be retrieved by using the parent node name of the element node, so you can obtain detailed device information. After the data is obtained, it needs to be displayed on the client. In order to achieve a better client experience, the display method selects artdialog, a popular JavaScript dialog box on the Internet (the usage of artdialog is not the focus of this article, ). Artdialog only needs to pass the data of a div layer, and then calls the JS function to open the dialog box, you can display the content in the specified Div on the client side. The main implementation flowchart of this module is as follows:

Figure3.14Implement the "clear" function Process

After the preceding menu commands are completed, the "device property query" module is basically completed, as follows:

Figure3.15Run "device property query"

------------------------------------------------------------------

Author: 1.1 drops of beer

Email/Gtalk: dreamzsm@gmail.com

From: http://www.cnblogs.com/beer

Notes:You are welcome to paste it, but please add a link on the page to indicate the source