Implement Web-based GIS with SVG technology

introduction

SVG (Scalable Vector Graphics) is an XML-based language-based language based on two-dimensional vector graphics and vector / dot matrix mixed graphics is a new vector graphics specification. The SVG specification defines the features, syntax, and display effects of SVG, including modular XML namespaces, and SVG Document Object Models (DOM). The drawing of SVG can be performed by dynamic and interactive manner, in actual operation, is implemented in an embedded manner or script. SVG not only provides hyperlink function, but also defines a wealth of events. Since the SVG supports scripting language (Script), you can programmatically, you can respond to specific events, thereby improving the dynamic and interaction performance of SVG by SCRIPT. SVG implements organic unity of graphics, images, and text. In addition to supporting commonly used tags in HTML, such as text, images, links, interactivity, CSS usage, script (Script), also provides a large number of specific tags for graphics, images, animations. This provides a possibility for achieving GIS.

According to the actual work needs, the SVG and related technologies have implemented the Web's GIS Management System (hereinafter referred to as WebGIS) in the web browser, and achieved good results. This system includes the design of the server and the client, the server ends out of the storage and data of the data to process data, and the client mainly completes the display and interaction of SVG data. This paper mainly introduces some basic knowledge and implementation techniques based on SVG-based client-based clients.

Basic knowledge

SVG browsing plugin

To implement the display of SVG graphics, you must install the SVG browser on the client, and the SVG Viewer developed by Adobe is powerful. It is the most used in the network. The latest version is 3.0. You can download it to Adobe's website (http://www.adobe.com/svg/viewer/install/main.html), to ensure that Chinese can display correctly, please download the Simplified Chinese version. After downloading the installer, the user license information will be played back to the first time, click "Accept".

Embed SVG in the web page

The browser-based GIS system will be implemented, and the SVG graphic object needs to be embedded in the web page, using the following HTML code to implement:

Pluginspage = "http://www.adobe.com/svg/viewer/install/" src = "default.svg">

Where the Embed tag is specified as an embedded object, Width, Height specifies the width, height, TYPE specified type of the object, specified by the image / svg-xml, the SRC specifies the URL address of the SVG data file, specifies such a tag and in the browser Open, the browser calls with SVG Viewer in the specified area. Here, SRC specifies a SVG file, in the GIS system, requires different data according to different requests, can be changed to dynamic URLs, such as the server's Java servlet, dynamically generated by the server. It should be noted that SVG does not currently support GB coding, use the Chinese characters, please use UTF-8 encoding.

SVG graphic object introduction

SVG provides a wealth of graphics objects, including line, path, circle, icon (symbol), image (Image), etc., meets the needs of the GIS system. These graphics objects can be displayed by setting different properties to achieve different display effects. Objects exists in the form of an XML tag in the SVG file, while the object properties are accessed by the attribute of the label, and these objects and properties can be easily accessed by accessing the SVG's DOM object. At the same time, the SVG also provides functions of the group management ( tag), definition (DEFS), and reference. These features have been widely used in GIS. SVG event introduction

SVG provides a rich message trigger and event response function to get user messages. Move on the map, click on the mouse, etc.. The corresponding event can be defined into the entire document object, or it can be defined on a single graphic object. To define a mouse to define a mouse, you can specify the condition of the event triggered in the

}

Other functions such as maps, full map display, regional amplification, local positioning, etc., this is not one. Layer management

SVG uses XML-based DOM document management structure, which is easy to implement hierarchy, and its group object can manage all of the graphics below. The ChildNodes property in the node can get the collection of all child nodes. The getElementsByTagName () method can get a list of some type of object. To get the collection of all the path (PATH) objects under a group (G), you can call getElementsByTagname. ("PATH"). By adopting group objects to implement layer management functions, the objects of different layers are included in different groups. By setting the properties of the group, settings such as visibility, color, transparency, and other operations can be implemented, and all objects, etc. are deleted. The style attribute of the object in the SVG has inheritance. If the next level does not have a pattern attribute, directly use the attributes of the previous level, so as to be in this class until the top level. Such as: Set a display transparency, then the lower element is displayed, this transparency is used, unless its lower element specifies the transparency attribute.

The following figure shows the layer control interface in the GIS system.

Icon management

The icon is indicated by the information of the information point, and the icon is widely used in the GIS system, which is characterized by the identical predefined graphics group. Increasing the new icon is just an additional reference in different locations. Do not increase the actual drawing data. Reduce the amount of data; at the same time, if you want to modify the display icon of a type of information, simply modify the predefined icon, it is convenient for management. A lot of types of icons are defined in the WebGIS system. The figure below shows an icon defined with a circle and a path object, which is named Symbol_1, and defines within the DEFS tag, for the icon object reference:

...

The picture below shows an instance of the icon. These two icons reference the icon of the Symbo_1 defined above: Icon is the position specified by the TRANSFORM, (200, 200), respectively, (200,200).

If you want to add an icon, you can add a new reference (USE) object. These objects can have their own properties, represent different information points, but their displayed shape is predefined, and if a predefined shape is modified, the display results of these icons are also changed. The figure below shows several icons and display effects defined in WebGIS (icons for blue).

The definition of map properties

The SVG graphics data itself contains only information used to implement vector graphics, such as coordinate points, transform matrices, display styles, etc., and cannot meet the needs of the GIS system. However, since SVG is based on XML format, except for its built-in attributes, its properties can be arbitrarily expanded to implement custom functions. In the SVG graphics, the object's attribute ID is the number used to mark the unique object, which can get the specified object through the getElementById () function of the SVG document object. WebGIS uses ID good as a graphic indicator, and customizes other properties such as Name (Name), prompt information (TIP), etc. to store its GIS properties. The method for acquiring or assigning these attributes is to call the GetAttribute and SetAttribute function. As is a path in WebGIS, it is defined.

Then obtain the path object by ID "ROAD: 101", you can obtain information of its property Name and TIP, perform function display prompt information.

to sum up

This paper makes a brief introduction to the key technology of Web-based GIS with SVG technology. Through the grasp and application of SVG technology, the author successfully developed the WebGIS system, indicating that SVG technology is fully qualified for the needs of certain industries. In the long run, SVG technology represents the development direction of network vector graphics, will be widely used in all aspects including GIS.