Use SVG technology to implement Web-based GIS

Introduction

SVG (Scalable Vector Graphics) is an XML-based markup language used to describe two-dimensional vector graphics and vector/dot matrix hybrid graphics. It is a brand new vector graphics specification. The SVG Specification defines the features, syntax, and display effects of SVG, including the modular XML namespace and SVG Document Object Model (DOM ). SVG plotting can be performed dynamically and interactively. In actual operations, it is implemented by embedding or scripting. SVG not only provides the hyperlink function, but also defines a wide range of events. Because SVG supports the scripting language (SCRIPT), you can use Script Programming to access the elements and attributes of the SVG Dom to respond to specific events, thus improving the dynamic and interactive performance of SVG. SVG achieves the organic unity of graphics, images, and text. SVG supports common HTML tags, such as text, images, links, interactions, CSS usage, and scripts, it also provides a large number of specific tags for graphics, images, and animations. This makes it possible to implement GIS.

Based on actual work requirements, the author uses SVG and related technologies in a web browser to implement a Web GIS Management System (WebGIS), which has achieved good results. This system includes the design of the server and client. The server stores and dynamically loads the data to be processed, and the client displays and interacts with SVG data. This article briefly introduces some basic knowledge and implementation technology of the SVG-Based WebGIS client.

Basic knowledge

SVG browser plug-in

To display SVG images, you must install the SVG browser on the client. The SVG viewer developed by Adobe has powerful functions and good display performance, which is the most widely used on the network, its latest version is 3.0. You can go to Adobe's website (http://www.adobe.com/svg/viewer/install/main.html) to download, in order to ensure that the Chinese can be correctly displayed, please download the Simplified Chinese version. After downloading and installing the program, the user license information will pop up during the first use. Click "accept.

Embed SVG in a webpage

To implement a browser-based GIS system, you need to embed SVG graphical objects into a webpage and use the following HTML code:

<embed width="640" height="560" type="image/svg-xml" id="svgmapctrl"pluginspage="http://www.adobe.com/svg/viewer/install/" src="default.svg" ></embed>

The embed label is specified as an embedded object, width and height respectively specify the width and height of the object, and type specifies the image/svg-xml type, src specifies the URL address of the svg data file. If this label is specified and opened in the browser, the browser calls SVG Viewer to display the file in the specified area. Src specifies an svg file. in GIS, you can change the file to a dynamic url, such as a server-side Java Servlet, to obtain different data according to different requests, dynamically generated by the server. It should be noted that SVG currently does not support GB encoding, please use UTF-8 encoding when using Chinese characters.

Introduction to SVG graphics objects

SVG provides a wide range of graphical objects, including line, path, circle, text, and image, meet the needs of the GIS system. These graphic objects can achieve different display effects by setting different attributes and display styles. Objects exist in the form of XML tags in SVG files, and object attributes are accessed by tag attributes. You can easily access these objects and attributes by accessing the DOM objects of SVG. Meanwhile, SVG also provides functions such as group management (<g> tag), definition (defs), and reference. These features are widely used in GIS.

Introduction to SVG events

SVG provides rich message triggering and Event Response functions to obtain user messages. For example, moving a map or clicking a mouse. Events can be defined in the entire document object or a single graphic object. To define a certain mouse event for a path, you can <path onmousemove = "mouseMoved (evt )"..... />, Onmousemove specifies the event trigger condition (that is, when the mouse moves over the path), mouseMoved is the response function to be triggered, and evt indicates the event itself, you can use evt to obtain information related to the current event. You can define a response function in the script for corresponding processing. Similarly, SVG provides a variety of status events, such as data loading, which can trigger the onload event for initialization.

Function implementation

Map interaction and Control

When an SVG file is opened in a browser, the SVG image appears as an embedded object of the browser. You can easily obtain the SVG image object and its internal graphic attributes through the script function. By obtaining these objects and attributes, you can easily implement the interaction function.

The most basic function of GIS is map control. SVG Viewer itself provides the zoom function for graphics, but it can only be achieved by pressing the specified function key during mouse operation. This is not suitable for the needs of GIS functions, shield them in the WebGIS system. However, SVG provides rich message triggering and Event Response functions to implement custom map control by capturing these messages. The implementation process of a enlarged map is: the user clicks the map, triggers the onmousedown event, and calls the message response function, in the message response function, the map transformation matrix is enlarged by 1.1 times with the current clicked point as the center, and the display image is updated. The message response function is as follows:

Function zoom (evt, scale) {// scale = 1.1; Means to zoom in 1.1 times point = new GDPoint (); point. x = evt. clientX; point. y = evt. clientY; // point: the coordinate point of the current click is the screen coordinate absPoint = pointInvert (point); // converts it to the absolute maximum table scale = curTransform. scale * scale; // set the current scaling factor curTransform. scale = scale; point1 = pointApply (absPoint); // use the absolute coordinate to apply the current transformation coefficient curTransform. x + = point. x-point1.x; curTransform. y + = point. y-point1.y; // zoom center to the current clicked position matrix = trans2String (curTransform); // generate a new transform matrix maproot. setAttribute ("transform", matrix); // apply the new transformation matrix}

Other functions, such as map zoom-out, full graph display, area zoom-in, and local location, are similar.

Layer Management

SVG uses an XML-based DOM document management structure to facilitate hierarchical management. The <g> object in the SVG group can manage all the images under it. The childNodes attribute in a node can be used to obtain the set of all child nodes. The getElementsByTagName () method can be used to obtain a list of objects of a certain type, for example, to obtain all paths in A group (g) you can call getElementsByTagName ("path "). The author uses group objects to manage layers. Objects of different layers are included in different groups. You can set attributes of a group, such as visibility, color, and transparency, as well as select and delete all objects. The style attributes of objects in SVG are inherited. If there is no style attribute at the next level, directly use the attribute at the upper level, and so on until the top level. For example, if you set a display transparency for a layer, this transparency is used when its lower-level elements are displayed, unless its lower-level elements specify the transparency attribute.

The following figure shows the Layer Control Interface in GIS.

Icon Management

Icons indicate information of information points. They are widely used in GIS systems to mark information points. They are characterized by referencing the same predefined graphic groups. Adding a new icon only adds a reference at a different position. Do not add actual drawing data. Reduces the amount of data. to modify the display icon of a certain type of information, you only need to modify the predefined icon to facilitate management. Many types of icons are defined in the WebGIS system. An icon defined by a circle and a path object. Its name is symbol_1 and is defined in the defs label for reference by the icon object:

<defs><g id="symbol_1" type="default" style="&_symbol;"><circle cx="0" cy="0" r="10" /><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>

For example, the two icons reference the symbo_1 icon defined above: the actual positions of the icon on the map are (200,100) and (200,200) respectively ).

<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" />

To add an icon, you only need to add a new reference object. These objects can have their own attributes, indicating different information points, but their display shapes are predefined. If they are modified, the display results of these icons are also changed. For the icons and display effects defined in WebGIS (the blue is the icon ).

Map attribute Definition

SVG graphic data only contains information used to display vector images, such as coordinate points, transformation matrices, and display styles, which cannot meet the needs of GIS systems. However, because SVG is based on XML format, in addition to its built-in attributes, it can be expanded to implement custom functions. In SVG graphics, the property id of an object is used to mark the id of a unique object. You can use the getElementById () function of the SVG Document Object to obtain the specified object. WebGIS uses a good id as an internal identifier of the image, while other attributes such as name and tip are customized to store their GIS attributes. To obtain or assign values to these attributes, call the getAttribute and setAttribute functions. For example, a path is defined in WebGIS.

<Path id = "ROAD: 101" Name = "Jiefang Avenue" Tip = "Jiefang Avenue (East)" d = "<M ...... "/>

After obtaining the path object through ID "ROAD: 101", you can obtain the information of its attribute Name and Tip, and execute the display prompt information and other functions.

Summary

This article briefly introduces the key technology for implementing Web-based GIS using SVG technology. Through the GRASP and Application of SVG technology, the author successfully developed the WebGIS system, it means that the SVG technology is fully qualified for the needs of GIS applications in some industries. In the long run, the SVG technology represents the development direction of network Vectoring Graphics and will certainly be widely used in all aspects including GIS.

Introduction

4 years of Java, 2 years of J2EE development experience, familiar with XML and Related Technology contact: lbluekey@sina.com