Introduction to openlayers

Openlayers is a javascript package developed by metacarta for the WebGIS client. The current maximum version is 2.5 V and is released through BSD license. The methods used to access geospatial data comply with industry standards, such as the WMS and WFS specifications of OpenGIS. openlayers adopts the object-oriented JavaScript method for development, at the same time, I borrowed some components from the prototype framework and the RICO library.

Using openlayers as the client does not have browser dependencies. Since openlayers is implemented in Javascript, Dom (Document Object Model) applied in Web browsers is implemented by JavaScript. Meanwhile, Web browsers (such as IE and ff) Support Dom.

Openlayers APIS is written in Javascript, a dynamic scripting language. It implements a page without refreshing new updates similar to Ajax functions and brings users a rich desktop experience (it has an Ajax class in itself, used to implement Ajax functions ).

Currently, openlayers supports the following formats: XML, GML, geojson, georss, JSON, kml, WFS, and WKT (well-known text ). In each class in the openlayers. Format namespace, the parser for reading and writing these formats is implemented.

The map data resources that openlayers can use are "rich and colorful". In this respect, many options are supported, such as WMS, WFS, GoogleMap, kamap, msvirtualearth, and WorldWind. Of course, you can also use simple images as the source.

Use openlayers for the first time:

Go to its official website http://www.openlayers.org/to download his compressed package. After decompression, you can see some directories and files and copy the openlayer under the directory. JS, lib directory under the root directory, and IMG directory under the root directory to the scripts directory of your website (of course, this is just an example. You can calculate the directory structure of your website by yourself, you only need to ensure that openlayers. JS,/lib,/IMG can be in the same directory ). Then, create an index.html page to view the map and import openlayers. js and the JS you are about to create.

Let's take loading WMS and GML files as an example.

<SCRIPT src = "../lib/openlayers. js"> </SCRIPT>

<SCRIPT type = "text/JavaScript">

VaR Lon = 5; // X-axis coodinate in map units

VaR lat = 40; // y-axis coordinate in map units

VaR zoom = 5; // Number of zoom levels

VaR map, layer;

// Declare the map and layer variables; equivalent to VaR map = NULL; var layer = NULL;

Map = new openlayers. Map ('map ');

// Instantiate a map class openlayers. Map

Layer = new openlayers. layer. WMS ("openlayers WMS ",

"Http://labs.metacarta.com/wms/vmap0", {layers: 'Basic '});

// Instantiate the layer class openlayers. Layer in WMS format

Map. addlayer (layer );

Map. zoomtoextent (newopenlayers. bounds (-3.922119, 44.335327,

4.866943, 49.553833 ));

// Load the layer object on the map object and use the map. zoomtoextent function to properly display the map.

Map. addlayer (New openlayers. layer. GML ("GML", "GML/polygon. xml "));

// Load a GML file on the newly loaded WMS File

The rest of the work is to add some controls such as openlayers. control, such as layerswitcher. They will add some toolbar or buttons on the "window" of map browsing to increase interaction and functionality.

Of course, the content in openlayers is far more than that. As for its framework analysis and APIs implementation mechanism, it will be mentioned in subsequent articles. This process is also a learning process. It is inevitable that there will be something wrong with it. We warmly welcome everyone to criticize and correct each other and exchange ideas.

 

[Reprinted] openlayers project analysis-(2) source code structure analysis {thank you for your contributions !}

Through the previous project introduction, we probably know what openlayers is, what can be done, and what the meaning is. Next we will analyze how it works and how it is implemented.

 

This figure is taken from its document and aims to understand openlayers classes from the senses. The following describes the classes in the document in alphabetical order ):

Openlayers is the top layer of the class, which provides namespace for the entire project implementation. (There is no namespace for the Javascript language, but it does have its own mechanism to implement similar functions, which will be explained later). It directly has a constant version_number to identify the version.

Ajax: As the name implies, it is used to implement Ajax functions, but openlayers developers write it into a class separately, using something in the prototype. js framework. At the same time, the problem of cross-browser is also considered during the design.

Basetypes: the string, number, and function used in openlayers are customized here. For example, openlayers. string. startswith, used to test whether a string is opened with another string; openlayers. number. limitsigdigs, used to limit the valid digits of integers; openlayers. function. BIND, used to bind a function to an object.

Console: openlayers. Console. This namespace is used to debug and output errors to the "console". It must be used in combination with ../firebug. js.

Control: the control class that we usually call. It provides various controls, such as the layer switch layerswitcher mentioned in the previous section, and edit the toolbar editingtoolbar. Example of loading a control:

Class = new openlayers. Map ('map', {controls: []});

Map. addcontrol (New openlayers. Control. panzoombar ());

Map. addcontrol (New openlayers. Control. mousetoolbar ());

Events: used to implement the event mechanism of openlayers. Specifically, there are two types of events in openlayers: browser events, such as mouseup and mousedown, and custom events, such as addlayer. The event mechanism in openlayers is worth learning and will be discussed later.

Feature: We know that feature is a collection of geography and attributes. In openlayers, especially the openlayers. feature class consists of a marker and a lonla.

 

Openlayers. feature. WFS and openlayers. feature. Vector inherit from it.

Format: this class is used to read/write data in various formats. Its subclass creates the parser in each format. These formats include XML, GML, geojson, georss, JSON, kml, WFS, and WKT (well-known text ).

Geometry? Is the description of a geographical object. Its sub-classes include collection, curve, linearring, linestring, multilinestring, multipoint, multipolygon, point, polygon, rectangle, and surface. These class instances constitute the map we can see. It must be noted that the surface class has not been implemented yet.

Handler: this class is used to process sequential events, which can be activated or canceled. At the same time, it also has a method named like a browser event. When a handler is activated, the method used to handle the event is registered to the browser listener to respond to the corresponding event. When a handler is removed, these methods will also be deregistered in the event listener. Handler is created through control, while control is represented by icon.

Icon: it is displayed as an image on the computer screen. There are three attributes: URL, size, and position. Generally, it is used with openlayers. Marker to form a marker.

Layer: layer.

Map: a dynamic map in the Internet industry. It is like a container. You can add layers and controls to it. In fact, a single map is meaningless. It is layer and control that make it.

Marker: its instance is a collection of openlayers. lonlat and openlayers. Icon. To put it simply, a certain latitude and longitude of the icon is marker.

Their Composite relationships are:

Popup: A small layer on the map to enable the "Switch" function of the map. Example:

Class = new openlayers. Popup ("chicken ",

New openlayers. lonlat (5, 40 ),

New openlayers. Size (200,200 ),

"Example popup ",

True );

Map. addpopup (popup );

Renderer: rendering class. In openlayers, the rendering function exists as an attribute of the vector layer. We call it a Renderer. The vector layer displays the vector data through the method provided by this Renderer. Taking SVG and VML as examples, the inheritance relationship is as follows:

　

As for why openlayers. Renderer. Elements exists and its rendering mechanism, we will talk about it later.

Tile: this class is designed to specify a single "tile" tile or a smaller resolution. Tiles stores their own information, such as URL and size. Its class inheritance relationships are as follows:

Util: A class of "Running Dragon.

Here, we can see that openlayers's class winding is quite troublesome. The next article will analyze more details from the code section.

[Go to] openlayers Project Analysis -- (3) basetypes {thank you for your contribution !!!}

(3) basetypes: defines underlying classes and custom JS built-in classes

Let's talk about the "own" class built by openlyers under the basetypes of the base type. They are: openlayers. lonlat, openlayers. pixel, openlayers. Size, openlayers. element, openlayers. bounds, and openlayers. Class. The following sections describe:

Openlayers. lonlat: longitude and latitude class. Its instance provides a map with a longitude and latitude pair, that is, a location. There are two attributes: Lon (x-axis coodinate) and lat (Y-axis coordinate ). Here we will explain how the latitude and longitude are entangled with the coordinate of the X axis and Y axis? Yes: When a map is projected by geographical coordinates, It is the latitude and longitude; otherwise, it is the x/y axis coordinate of the map. In addition to constructors, five functions are implemented:

Toshortstring: function () converts coordinates to strings;

Clone: function () copies a lonlat object;

Add: function (Lon, Lat) changes the location of an existing map;

Return new openlayers. lonlat (this. Lon + Lon, this. LAT + LAT );

Equals: function (LL) determines whether the incoming Lon and lat pairs are equal to the current ones;

Wrapdateline: function (maxextent) Copy (Lon, Lat), which is specified as the maximum range of the boundary.

Openlayers. pixel: pixel class, which presents the pixel position on the display in the form of (x, y) coordinates. There are two attributes: X coordinate and Y coordinate. Four member functions are provided:

Clone: function () Copies pixels;

Equals: function (PX) determines whether two pixels are equal;

Add: function (x, y) changes (x, y) to form a new pixel;

Return new openlayers. pixel (this. x + X, this. Y + y );

Offset: function (PX) calls add () to offset the pixel position.

Newpx = This. Add (PX. X, PX. y );

Openlayers. Size: it also has two attributes: width and height. Two member functions are implemented: Clone: function () and equals: function (sz.

Openlayers. element: In this namespace, developers write a lot of APIS, including visible, toggle, hide, show, remove, getheight, getdimensions, and getstyle, to display, hide, delete, retrieve height, and obtain the range of elements. Taking the getheight function as an example, let's look at its code:

/**

* Apifunction: getheight

*

* Parameters:

* Element-{domelement}

*

* Returns:

* {INTEGER} the offset height of the element passed in

*/

Getheight: function (element ){

Element = openlayers. util. getelement (element );

Return element. offsetheight;

}

The Document Object Model Dom is involved here. The function itself is very simple and returns the height of the element.

Openlayers. bounds: in this class, data is stored in four floating-point numbers: Left, bottom, right, and top. It is a box-like range. It implements three functions to describe a bound: tostring, toarray, and tobbox. The code for tostring is as follows:

/**

* Apimethod: tostring

*

* Returns:

* {String} string representation of bounds object.

* (Ex. <I> "left-Bottom = (5, 42) Right-Top = (10, 45)" </I>)

*/

Tostring: function (){

Return ("left-Bottom = (" + this. Left + "," + this. Bottom + ")"

+ "Right-Top = (" + this. Right + "," + this. Top + ")");

}

The result is similar to "left-Bottom = (5, 42) Right-Top = (10, 45 )"

Three bound data source functions: fromstring, fromarray, and fromsize;

Five functions for retrieving object attributes: getwidth, getheight, getsize, getcenterpixel, and getcenterlonlat;

There are also: Add: function (x, y), extend: function (object), containslonlat, containspixel, contains, intersectsbounds, containsbounds, determinequadrant, wrapdateline. Take the extend function as an example to look at the source code.

Extend: function (object ){

VaR bounds = NULL;

If (object ){

Switch (object. class_name ){

Case "openlayers. lonlat ":

Bounds = new openlayers. bounds (object. Lon, object. Lat, object. Lon, object. LAT );

Break;

Case "openlayers. Geometry. Point ":

Bounds = new openlayers. bounds (object. X, object. Y, object. X, object. y );

Break;

Case "openlayers. bounds ":

Bounds = object;

Break;

}

If (bounds ){

If (this. Left = NULL) | (bounds. Left <thi s. Left )){

This. Left = bounds. Left ;}

If (this. Bottom = NULL) | (bounds. Bottom <this. Bottom )){

This. Bottom = bounds. Bottom ;}

If (this. Right = NULL) | (bounds. Right> T his. Right )){

This. Right = bounds. Right ;}

If (this. Top = NULL) | (bounds. Top> This. Top )){

This. Top = bounds. Top ;}

}

}

}

We can see that bounds can be extended in three forms: Point, lonlat, or bounds. The condition is that the zero coordinate is in the upper left corner of the screen.

Openlayers. Class: this class is the "everyone" in openlayers. You only need to create other classes and implement multiple inheritance. The usage is as follows:

Create a single inheritance: class = openlayers. Class (prototype );

Create multiple inheritance: class = openlayers. Class (class1, class2, prototype );

The bottom-layer class is mentioned, and the extension of the built-in JS class is written back.

Introduction to openlayers