[Reprint] openlayers Project Analysis -- (1) Project Introduction {thank you for your contribution !}

Source: Internet
Author: User
Tags map class

(Openlayers JavaScript mapping Library)

URL: http://www.openlayers.org/

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:

First go to its official website (of course, this is just an example. You can calculate the directory structure of your website by yourself, as long as openlayers is guaranteed. 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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.