AbstractAfter analyzing the characteristics of using SVG to express geospatial information, this article applies SVG to WebGIS. The main content of the system research is to use Asp.net and SVG technology, combined with SQL Server back-end databaseTechnologyDynamic generation of SVG graphics. Using the scripting language javascr ī PT and DOM technology, the WebGIS client functions such as map scaling, translation and restoration, and layer control are well implemented.
KeywordsAsp.net; SVG; javascr sans pt; DOM; WebGIS
1 Introduction
WebGIS is
InternetThe combination of GIS and GIS is also an important research direction of GIS. However, the release of geographic information with a huge amount of information on the Web (mainly in the form of graphical images) will inevitably lead to a reduction in the speed of Internet transmission, short and flexible vector graphics are an effective means to ease this dilemma. SVG is based on
XMLBecause it can display vector images on the web, SVG can become a good network carrier of GIS. In the past, most scholars put SVG files on the client in the form of text. When the graphics are complex, the requirements on the client are relatively high. This article uses the SQL Server database to store SVG graphics data, using Asp.net to call the back-end database to dynamically generate SVG images reduces the client's requirements, and then using the scripting language javascr ī PT and DOM technology to achieve dynamic interaction between the graphics client, achieving good results. 2. SVG indicates geospatial information
SVG is a text description language that provides 17 categories and more than 80 elements, involving the display of basic graphics, text, and images, as well as Graphic Element animation, hyperlink, color gradient, transparent effect, filter effect and many other aspects. Therefore, SVG can be used to display the spatial information and attribute information of geographic data, where spatial information is used according to its geometric form.
ObjectThe line object, Region object, and annotation object are organized, and the attribute information can be described by the embedded method and the external method. 2.1 Point Object
You can use a circle or rectangle to fill the color of a vertex, for example: <circle id = "point" Cx = "50" Cy = "50" r = "3" style = "fill: Blue"/>
Above
CodeIt indicates a blue solid circle with a circle (50, 50) with a radius of 3. "point" is used to identify this point. 2.2 line Object
Connecting two points indicates a line, for example: <line id = "line" X1 = "0" Y1 = "150" X2 = "400" y2 = "150" stroke-width = "2" stroke = "blue "/>
This code indicates a line between the connection point (0,150) and the point (400,150). The width of this line is 2, the color is blue, and the line indicates the line. 2.3 region objects
You can use path or polygon, for example, <polygon points = "379,175 355,175 355,200 345,200,345,175 321,175 379,175" style = "fill: Blue"/> Code indicates that the node is) (335,175) (335,200) (345,175) (321,175) polygon. The fill color is blue. 2.4 annotation object
You can use text to represent attribute data, for example, <text id = "text1" x = "30" Y = "30"> China </text>
The above code will output the text "China" at the point (30, 30) on the browser page, and "text1" is used to identify this note. 1:
Figure 1 points, lines, areas, and notes 2.5 attribute data represented by SVG
Attribute data can be encoded using the embedded method and the external method.
MethodThe inner embedding method puts the associated attribute data and geometric data in the same feature group element. Because SVG does not provide a description mark for the attribute data, therefore, a <geoattribute> element is customized here to mark attribute data. Each attribute item is listed in sequence as a child element of the <geoattribute> element. Because the <geoattribute> element is a custom element, the common SVG document browser (such as the Adobe SVG view plug-in) does not process the element, of course, you can directly use the <DESC> element to represent very simple attributes.
The external method means that the property data is stored in an external database through the ground object identification number. Therefore, the ground object identification number must be further agreed, that is, the ground object identification number starts with "F, it also contains a category number and a target ID number. The type number can be used to determine the attribute relationship table corresponding to the type, and the target ID number can be used to locate the record number in the Attribute Table. In addition, you can also associate the attribute data page (dynamically generated using Asp.net technology) with the geometric data directly through hyperconnections. 3. SVG-Based WebGIS Design Model
Up to now, there are three main implementation models of WebGIS: ① Based on the client; ② Based on the server; ③ Based on the server/client hybrid mode. The third mode integrates the advantages of the previous two modes, which are currently popular. Likewise, SVG-Based WebGIS cannot escape these three modes. Generally, the B/S layer-3 architecture is adopted, as shown in Figure 2:
Figure 2 architecture of WebGIS Based on SVG Technology
First, the customer selects the data to be queried in the browser and sends a request to the server. The request is sent to the server through HTTP. After receiving the request, the server accesses the relevant database through the data access interface, and converts the retrieved data from the database to the corresponding XML format, SVG format, and
HtmlFormat files are returned to the client. These functions are implemented by Asp.net technology. For relatively simple GIS functions such as map layer control, scaling, and roaming, they are operated on the client and developed through DOM and javascr platinum Pt. The web server is only used to provide data to customers, the data is stored on the client, so you do not need to access the server every time you process it, which greatly reduces the amount of data transmitted over the network and the burden on the server. Customers can also analyze, extract, and parse raw data. For complex operations such as space analysis and layer editing, You need to interact with the server. The middleware mainly converts the SVG/XML data mode to the traditional DBMS database mode.
Work. 4 instances
The system uses SQL Server to store SVG graphics data, uses Asp.net to call the background database to dynamically generate SVG graphics, and uses the scripting language Cr ī PT and DOM technology to achieve dynamic interaction of graphics, figure 3 shows the main interface of the system. 4.1 map scaling, translation, and Restoration
In sv g, you can change the display range of the map by modifying the view box attribute of the root element of sv g. The attribute of view box consists of four parameters. The first two represent the X and Y coordinates of the smallest vertex in the display range, that is, the vertex of the display range, and the last two represent the starting point, the number of coordinate units that move forward horizontally and vertically to form the entire display range. For example, view box = "0 0 100 100" indicates that the display range starts from (0, 0), the window length is 100 coordinate units, and the width is 100 coordinate units. When you perform basic map operations, you can obtain the desired results by operating the view box. When the map is scaled, multiply the last two parameters by (divided by) a multiple to get the scaled window size. When the map is translated, the last two parameters remain unchanged. Modify the first two parameters, specify the new start coordinate. When the map is reset, you can restore the view box to the original value to complete the reset operation. The following code shows the map restoration function: function originview () {recordviewbox (); var docsvg = document. hunnuwebgis_svg.getsvgdocu ment (); var esvg = docsvg. getdocumentelement (); var returns riginview = "0 0 600 500"; esvg. setattribute ("viewbox", originview); 4.2 Layer Control
Because the SVG map operated in the SVG map browser is organized in a layered manner, in the data organization mode, the geographical feature data belonging to a layer is organized under the same grouping element, the ID attribute of the group element is set to the name of the layer, which makes it easier to control the display of the layer. First, find the corresponding grouping element in the svg dom tree using the layer name, and then set the style attribute value of the element to 'display: none or display: inline, to close and display the layers, as shown in figure 4. Function hilite_elem (checkbox, element_name) {var svgobj = Document. embeds ['hunnuwebgis _ SVG ']. getsvgdocument (). getelementbyid (element_name); If (! Checkbox. checked) {// hide the layer. svgobj. setattributens (null, 'style', 'display: none; fill-rule: evenodd');} else {// display layer. svgobj. setattributens (null, 'style', 'display: inline; fill-rule: evenodd ');}}
Figure 3 main system interface
4.3 simple attribute Query
Since each graphic area is represented by a <path> path, you can add an onclick event to <path> and then write The onclick Event code in javascr into pt. When you click the graphic area, a dialog box is displayed, showing the attributes of the area, as shown in Figure 5.
Figure 4 city area layer hiding effect figure 5 Property Query
4.4 coordinate display
Add onmousemove = "changetext (EVT)" to each <G> layer, and write the changetext (EVT) function through javascr transform pt to display the graphic coordinates. Function changetext (EVT) {targetxtext = svgdocument. getelementbyid ("xpos"); targetytext = svgdocument. getelementbyid ("ypos"); var xpos = EVT. getclientx (); var ypos = EVT. getclienty (); var newxpostext = svgdocument. createtextnode ("X coordinate:" + xpos); var newypostext = svgdocument. createtextnode ("Y coordinate:" + ypos); targetxtext. replaceChild (newxpostext, targetxtext. getfirstchild (); targetytext. replaceChild (newypostext, targetytext. getfirstchild ();} 4.5 measurement distance
When the coordinates of the midpoint of the graph are captured, it is easy to measure the distance between two points. You only need to compile a function to implement the mathematical function formula of distance between two points :, in this case, the distance is only the distance on the graph. To obtain the actual distance between the objects, you must divide the distance by the scale. 5 conclusion
The system uses Asp.net, SVG technology, and SQL server back-end database technology to dynamically generate SVG images. The WebGIS client functions are well implemented using SVG, javascr ī PT, and Dom technologies, the result shows that the method is feasible. more complex GIS functions, such as spatial analysis and graphic editing, will be further studied by the author. References [1] LIU Jun, Bi Yongnian. XML-based SVG Application Guide [Z]. beijing kehai Group Co., Ltd.,-12 [2] W 3C. scalable Vector Graphics 1.1 specification. http: // www. w3. ORG/t r/2003/r ec-svg11-20030114/, 2003 [3] Song, Jiang min, etc. research on visual expression of Geographical Information Based on SVG and network release [J]. journal of Information simulation, 301 (additional publication 1): [4] Feng Yanjie. SVG-Based WebGIS Implementation Technology [D]. wuhan: Wuhan University, 2005 [5. webGIS implementation mode and technical evaluation [J]. journal of Shandong Institute of Civil Engineering, (1): 92
Receiving date: January 1, May 18 revision date: January 1, May 23
Author profile:Deng xiaobin (1983-), male, Yingtan, Jiangxi Province, master's degree, main research direction: WebGIS
