Web Introduction
SVG (Scalable Vector Graphics) is an xml-based standard language for the description of two-dimensional vector graphics and vector/dot matrix mixed graphics, and is a new vector graphics specification. The SVG specification defines the features, syntax, and display effects of SVG, including the modular XML namespace (namespace) and the SVG Document Object Model (DOM). SVG drawings can be done in a dynamic and interactive manner, and in practice, they are implemented in embedded or scripted ways. SVG not only provides hyperlink functionality, but also defines a rich range of events. Because SVG supports scripting languages (scripts), you can use script programming to access elements and attributes of the SVG DOM to respond to specific events, thereby improving SVG's dynamic and interactive performance. SVG realizes the organic unification of graph, image and text. In addition to supporting commonly used tags in HTML, such as text, images, links, interactivity, use of CSS, scripts (script), but also provides a large number of graphics, images, animations and specific tags. This provides a possibility for the implementation of GIS.
According to the actual work needs, the author uses SVG and related technology in Web browser to realize the Web GIS Management System (hereinafter referred to as Webgis), and obtains the very good result. This system includes the design of the server and the client, which is to handle the data storage and the dynamic loading of the data, the client mainly completes the display and the interaction of the SVG data. This paper mainly introduces some basic knowledge and implementation technology of WEBGIS based on SVG.
Basic knowledge
SVG browsing Plugin
To achieve the display of SVG graphics, you must install the SVG browser on the client, Adobe developed the SVG viewer powerful, display good, is the most used on the network, its latest version is 3.0. can go to Adobe's website (http://www.adobe.com/svg/viewer/install/main.html) to download, in order to ensure that Chinese can be correctly displayed, please download the Simplified Chinese version. After downloading the installation program, the first time to use back pop-up user license information, click "Accept" can be.
Embed SVG in Web pages
To implement a browser-based GIS system, you need to embed an SVG graphic object into a Web page, using the following HTML code to implement:
<embed width= "640" height= "560" type= "Image/svg-xml" id= "Svgmapctrl"
Pluginspage= "http://www.adobe.com/svg/viewer/install/" src= "Default.svg" ></embed>
Where the embed label is specified as an embedded object, width,height specifies the width and height of the object, the type specifies Image/svg-xml, and src specifies the URL of the SVG data file, specifying such a label and opening in the browser. The browser calls the SVG viewer back to display in the specified area. Here, src specifies an SVG file that, in a GIS system, requires different data to be obtained according to different requests, then it can be changed to a dynamic URL, such as a server-side Java Servlet, which is dynamically generated by the server. It should be noted that SVG does not currently support GB encoding, and when using Chinese characters, use UTF-8 encoding.
Introduction to SVG graphic objects
SVG provides a wealth of graphic objects, including lines (line), path (path), Circle (Circle), icon (symbol) text, images (image), etc., to meet the needs of the GIS system. These graphic objects can be displayed differently by setting different properties and displaying styles. objects exist as XML tags in an SVG file, and object properties are accessed by the attributes of the tag, and can be accessed conveniently by accessing the SVG DOM object. At the same time SVG also provides the management of the group (<g> tags), definition (defs) and reference functions. These features have been widely used in GIS.
Introduction to SVG Events
SVG provides a rich set of message triggers and event response functions to obtain user messages. such as moving on the map, click the mouse and so on. The corresponding event can be defined in the entire Document object or on a single drawing object. To define a certain mouse event for a path (path), you can do so <path onmousemove= "mousemoved (evt)" .../> onmousemove Specify the condition that the event triggers (that is, when the mouse moves over path). Mousemoved is the response function to be triggered, EVT represents the event itself, you can obtain information related to the current event by EVT, and the user can define the response function in script and handle it accordingly. Similarly, SVG also provides rich state events, such as the completion of data loading, can trigger the OnLoad event, to do some initialization processing.
function realization
The interaction and control of map
When you open an SVG file in a browser, the SVG graphic appears as an embedded object in the browser, which makes it easy to get the SVG graphic object and its interior graphic properties through the script function. By getting these objects and properties, you can easily implement interactive functionality.
The most basic function of GIS system is map control, the SVG Viewer itself provides the zoom function of graphics, but it can be realized by using the specified function key when the mouse is operated, which is not suitable for the need of GIS function, and is shielded in the Webgis system. However, because SVG provides rich message triggering and event response functions, it realizes the custom map control function by capturing these messages. A magnified map of the implementation process is: users click on the map, triggering the onmousedown event, call the message response function, in the message response function in the Map transformation matrix in the current point of click of the center magnified 1.1 times times, update the display graphics. The function of the message response is as follows:
Function Zoom (evt, scale)
{//scale = 1.1; 1.1 Times times larger
Point = new Gdpoint ();
Point.x = Evt.clientx;
Point.y = Evt.clienty; Point is the screen coordinates for the currently clicked coordinates
Abspoint = Pointinvert (point);//Convert to absolute most table
scale = Curtransform.scale*scale; Set the current scaling factor
Curtransform.scale = scale;
Point1 = pointapply (abspoint);//absolute coordinates apply current transform coefficients
Curtransform.x + = point.x-point1.x;
CURTRANSFORM.Y + = point.y-point1.y;//Zoom Center pan to the current point of click
matrix= trans2string (curtransform);//Generate a new transformation matrix
Maproot.setattribute ("Transform", matrix);//Apply the new transformation matrix
}
Other such as map reduction, the full picture display, area amplification, local positioning and other functions similar to this, not to be introduced here.
Layer Management
SVG uses the Xml-based DOM document management structure, it is convenient to realize the level management, its group <g> object can manage all the graphics below it. The ChildNodes property in a node can get a collection of all the child nodes, and the getElementsByTagName () method can get a list of objects of a type, such as getting a collection of all path objects under a group (g). You can call getElementsByTagName ("path"). The author implements layer management by adopting group objects, and objects of different layers are included in different groups. By setting the properties of a group, you can implement settings such as visibility, color, transparency, and all objects, such as selecting, deleting, and so on. The style attributes of an object in SVG are inherited and, if there is no style attribute at the next level, use the properties at the top level directly, and so on, until the top-level. For example, when a display transparency is set on a layer, its subordinate elements are displayed with that transparency, unless its subordinate element specifies the transparency attribute.
The following figure shows the layer control interface in a GIS system.
Icon Management
Icons represent information points, and icons are used extensively in GIS systems to flag information points, characterized by icons referencing the same predefined group of graphs. Adding new icons is just adding a reference to a different location. The actual drawing data is not added. Reduce the amount of data, at the same time, if you want to modify the display of some kind of information icon, just modify the predefined icon can facilitate management. Many types of icons are defined in the Webgis system. The following figure represents an icon defined with a circle and a path object, with the name Symbol_1 and defined within the defs tag for reference by the icon object:
<defs>
<g id= "Symbol_1" type= "Default" style= "&_symbol;" >
<circle cx= "0" cy= "0" r= "ten"/>
<path d= "M-7.1 7.1,-10 0,-7.1-7.1,0-10,7.1-7.1z" style= "fill: #0000ff; fill-opacity:0.6"/>
</g>
...
</defs>
The following illustration is an instance of an icon that references the symbo_1 icon defined above: The actual position of the icon on the map for transform is (200,100), (200,200).
<use id= "Icon:1" type= "A" transform= "Translate (200,100)" xlink:href= "#symbol_1"/>
<use id= "Icon:2" type= "B" transform= "Translate (200,200)" xlink:href= "#symbol_1"/>
If you want to increase the icon, just add a new reference (use) object. These objects can have their own properties, representing different information points, but the shapes they display are predefined and, if predefined shapes are modified, the display results of these icons change as well. The following figure shows several icons and display effects defined in Webgis (blue is an icon).
Definition of MAP attributes
SVG graphic data itself contains only information used to realize vector graphics, such as coordinate point, transformation matrix, display style and so on, which can't meet the needs of GIS system. However, because SVG is based on XML format, in addition to using its built-in properties, you can arbitrarily expand its properties to achieve custom functionality. In SVG graphics, an object's property ID is the number used to flag a unique object, and the getElementById () function of the SVG document object can get the specified object. Webgis uses IDs as an intrinsic indicator of graphics, while customizing other properties such as name, Tip (TIP) to store its GIS properties. The methods to get or assign these properties are to invoke the GetAttribute and setattribute functions. As in Webgis, a path is defined in this way.
<path id= "road:101" name= "Jiefang Avenue" tip= "Jiefang Avenue (East)" d= "<m ..."/>
Then through the id "road:101" to get the path object, you can get its property name and tip information, perform display prompts and other functions.
Summarize
This paper introduces the key technologies of web-based GIS using SVG technology, and through the GRASP and application of SVG technology, the author has successfully developed the Webgis system, which shows that the SVG technology can be fully qualified for GIS application in some industries, and in the long run, The SVG technology represents the development direction of the network vectorization graph, which will be widely used in all aspects including GIS.
