Openlayer + AGS Integrated Application (I)-openlayer map presentation

Source: Internet
Author: User

Author: flyingis

This article is strictly prohibited for commercial purposes. If you need to reprint it, please indicate the author and the original link. For other questions, please contact:Dev. VIP # gmail.com

Openlayer is a JS library used to display browser maps. It is used to build network-based geographic applications. openlayer uses prototype. JS and Rico are the basis of the core library, implementing the industrial standard geographic data access method (OGC standard ). In enterprise-level GIS applications, it can be used as a client application development framework to eliminate coupling with the GIS service layer.

ArcGIS Server 9.3 provides better support for the OGC standard. The OGC standard serves as a bridge between the openlayer and ArcGIS Server services. It is developed based on the AGS service, it is a new choice except for the official development framework of the open APIs of ADF, JS, flex, and Silverlight.

There are already many resources for openlayer development on the Internet:
Http://www.3snews.net /? Uid-10624-action-spacelist-type-blog-itemtypeid-793
Or Google Search"Openlayer"

This series of articles will repeat some openlayer functions, but it is more important to study the openlayer design mode and how to effectively use the AGS service for openlayer development.

Preparations:

1. Download The openlayer 2.7
URL: http://openlayers.org/

2. ArcGIS Server 9.3 is successfully installed.
Installation Method: http://bbs.esrichina-bj.cn/ESRI/viewthread.php? Tid = 3891 & extra = Page % 3d1

3. Prepare a complete set of sample data. You can copy the data from ArcGIS tutor, or use your own or download data from the website.

It doesn't matter if you cannot prepare for 2 or 3 for the moment. Start with openlayer (OL.

Subject content:

1. For more information about the ol code framework and structure, see other articles, starting with the simplest map presentation in the sample.

Code
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> openlayers basic single WMS example </title>
<LINK rel = "stylesheet" href = "../theme/default/style.css" type = "text/CSS"/>
<LINK rel = "stylesheet" href = "style.css" type = "text/CSS"/>
<SCRIPT src = "../lib/openlayers. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
VaR map, layer;
Function Init (){
Map = new openlayers. Map ('map ');
Layer = new openlayers. layer. WMS ("openlayers WMS ",
"Http://labs.metacarta.com/wms/vmap0 ",
{Layers: 'Basic '});
Map. addlayer (layer );
Map. zoomtomaxextent ();
}
</SCRIPT>
</Head>
<Body onload = "Init ()">
<H1 id = "title"> basic single WMS example <Div id = "tags"> </div>
<Div id = "includesc"> show a simple Map </div>
<Div id = "map" class = "smallmap"> </div>
<Div id = "Docs">
This example shows a very simple layout with minimal controls. This example uses a single WMS base layer.
</Div>
</Body>
</Html>

Key points:
(1) Introduce openlayer. js
(2) map initialization in body onload

Openlayer. the layer must be separated from the "layer" concept of Chinese translation. A layer here is a complete service, such as a WMS Service released by the AGS server, this service may consist of one or more layers.

2. Understand openlayer. Layer

Code
Function Init (){
Map = new openlayers. Map ('map ');

VaR ol_wms = new openlayers. layer. WMS (
"Openlayers WMS ",
"Http://labs.metacarta.com/wms/vmap0 ",
{Layers: 'Basic '}
);

VaR jpl_wms = new openlayers. layer. WMS (
"NASA global mosaic ",
"Http://t1.hypercube.telascience.org/cgi-bin/landsat7 ",
{Layers: "landsat7 "}
);

VaR dm_wms = new openlayers. layer. WMS (
"DM solutions Demo ",
"Http://www2.dmsolutions.ca/cgi-bin/mswms_gmap ",
{
Layers: "bathymetry, land_fn, Park, drain_fn, drainage," +
"Prov_bound, fedlimit, rail, road, popplace ",
Transparent: "true", format: "image/PNG "},
{
Minresolution: 0.17578125,
Maxresolution: 0.703125
}
);

Map. addlayers ([ol_wms, jpl_wms, dm_wms]);
Map. addcontrol (New openlayers. Control. layerswitcher ());
Map. zoomtomaxextent ();
}

Three WMS services are added here. Each Service is used as a layer of ol map. After running, we can see that the base layer and overlayers do not contain the specific layers of the three services.

Some of the services are stand-alone, some are check boxes, and the check boxes are displayed because the transparent is set to true. Transparent layers are generally placed above the map and will not be used as the basemap, therefore, Ol uses the check box to allow users to select or cancel the display of the service map. If it is set to false, all of them can only be selected as the basemap.

3. Add multiple services at a time

In addition to adding services one by map. addlayers, you can also add multiple services as an array to map at a time: Code
Function Init (){
Map = new openlayers. Map ('map ');

VaR urlarray = ["http://t1.labs.metacarta.com/wms-c/Basic.py ",
Http://t2.labs.metacarta.com/wms-c/Basic.py];
Layer = new openlayers. layer. WMS ("openlayers WMS", urlarray, {layers: 'Basic '});
Map. addlayer (layer );
}

4. Ol document

Ol has a reference document in both the online and downloaded packages. devdocs is more comprehensive, but it still does not include all parameter descriptions. It can be used from the previous openlayer. layer. the WMS object is confirmed. The parameters in the constructor are as follows:
Name {string} a name for the Layer
URL {string} base URL for the WMS (e.g. http://wms.jpl.nasa.gov/wms.cgi)
Params {object} an object with key/value pairs representing the getmap query string parameters and parameter values.
Options {ojbect} hashtable of extra options to tag onto the Layer

At this point, there is no more detailed description. We can only accumulate data based on the sample and source code. For example, in addition to layers, the third set of parameters also include: Code
{
Layers: "bathymetry, land_fn, Park, drain_fn, drainage, prov_bound, fedlimit, rail, road, popplace ",
Transparent: "true ",
Format: "image/PNG"
}

You can also set the fourth group of parameters {'displayinlayerswitcher ': false}. The layer service is not displayed in the service list (blue panel in the middle). The default value is true. {'Isbaselayer ': false}. The default value is true. A single listener is displayed before the service. We need to explore these issues step by step.

5. openlayers. layer. WMS

We mentioned two parameters displayinlayerswitcher and isbaselayer, which are not in openlayers. layer. WMS definition, but in the parent class openlayers. layer, and openlayers in the middle. layer. httprequest, openlayers. layer. grid is not described in detail in this document, but more information can be obtained from the source code. From this inheritance relationship, we can find that all openlayers inheritance is implemented through prototype inheritance.

Summary:

Map objects are the core of Map Display. All map operations must be related to map objects. There are many attribute methods in them. You can learn controls. Previously, we didn't define controls, however, you can still use the mouse to operate the map. By default, the map automatically has four controls: navigation, panzoom, argparser, and attribution.

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.