Simple and representative examples of openlayers

The examples provided by openlayers are representative and worth learning for beginners.
Contains multiple layers, zoom bars, toolbar, mouse position, and pop-up window. The layers are from geoservr
WMS and WFS service interfaces.
MainCodeAs follows:
Style definition: defines the map size, toolbar position, and replacement button image.
<Style type = "text/CSS">
# Map {
Width: 640px;
Height: 475px;
Border: 1px solid black;
}

. Olcontrolpanel Div {
Display: block;
Position: absolute;
Top: 0px;
Left: pixel PX;
Width: 60px;
Height: 23px;
Margin: 5px;
}
. Olcontrolpanel. olcontrolmousedefaultsitemactive {
Background-image: URL ("/openlayers/img/pan.gif ");
}
. Olcontrolpanel. olcontrolmousedefaultsiteminactive {
Background-image: URL ("/openlayers/img/panselected.gif ");
}
. Olcontrolpanel. olcontrolzoomboxiteminactive {
Width: 60px;
Height: 23px;
Position: absolute;
Top: 0px;
Left: 250px;
Background-image: URL ("/openlayers/img/zoominselected.gif ");
}
. Olcontrolpanel. olcontrolzoomboxitemactive {
Width: 60px;
Height: 23px;
Position: absolute;
Top: 0px;
Left: 250px;
Background-image: URL ("/openlayers/img/zoomin.gif ");
}
. Olcontrolpanel. olcontrolselectfeatureiteminactive {
Width: 60px;
Height: 23px;
Position: absolute;
Top: 0px;
Left: 310px;
Background-image: URL ("/openlayers/img/infoselected.gif ");
}
. Olcontrolpanel. olcontrolselectfeatureitemactive {
Width: 60px;
Height: 23px;
Position: absolute;
Top: 0px;
Left: 310px;
Background-image: URL ("/openlayers/img/info.gif ");
}
</Style>
JS Code, the core part.
<SCRIPT src = "/openlayers. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
<! --
// Define global variables
VaR map, layer, selectcontrol, selectedfeature;
// Close the function in the pop-up window
Function onpopupclose (EVT ){
Selectcontrol. unselect (selectedfeature );
}
// Construct the function in the pop-up window
Function onfeatureselect (feature ){
Selectedfeature = feature;
Popup = new openlayers. Popup. Anchored ("chicken ",
Feature. Geometry. getbounds (). getcenterlonlat (),
New openlayers. Size (250,75 ),
"<Div style = 'font-size:. 8em '>" + feature. attributes ['cq: lname'] + "</div> ",
Null, true, onpopupclose );
Feature. popup = popup;
Map. addpopup (popup );
}
// Destroy the function in the pop-up window
Function onfeatureunselect (feature ){
Map. removepopup (feature. Popup );
Feature. Popup. Destroy ();
Feature. popup = NULL;
}
// Map and page loading Functions
Function Init (){
// Set the map zoom range and zoom level, with the minimum scale of 0
Map = new openlayers. Map ($ ('map'), {maxscale: 500, minscale: 500000, numzoomlevels: 5 });
// Load the administrative area layer and WMS Raster image
Layer = new openlayers. layer. WMS ("District ",
"Http: // 192.98.151.17: 8081/geoserver/WMS", {layers: 'cq: gmap_district '});
Map. addlayer (layer );
// Load the water system layer and WMS raster images
Layer = new openlayers. layer. WMS ("water ",
"Http: // 192.98.151.17: 8081/geoserver/WMS", {layers: 'cq: gmap_lake ', 'transparent': True, format: 'image/PNG '});
Map. addlayer (layer );
// Load the unit layer and WFS vector data, which are drawn by openlayers on the client. Note: too many layers will lead to slow speed.
Layer = new openlayers. layer. WFS ("unit ",
"Http: // 192.98.151.17: 8081/geoserver/WFS", {typename: 'cq: gpoi_gov '},
{
Typename: 'unit ',
Featurens: 'http: // www.openplans.org/cq ',
Extractattributes: True,
Maxfeatures: 10,
Textattrtodisplay: 'lname'
});
Map. addlayer (layer );
// Add buttons and toolbar on the map
ZB = new openlayers. Control. zoombox ();
VaR Panel = new openlayers. Control. Panel ({defacontrol control: ZB });
Selectcontrol = new openlayers. Control. selectfeature (layer, {onselect: onfeatureselect, onunselect: onfeatureunselect, hover: true });
Panel. addcontrols ([
New openlayers. Control. mousedefaults (), ZB, selectcontrol
]);
Map. addcontrol (panel );

Map. addcontrol (New openlayers. Control. panzoombar ({zoomworldicon: false }));
Map. addcontrol (New openlayers. Control. layerswitcher ({'ascending': false }));
Map. addcontrol (New openlayers. Control. mouseposition ());
// Set the Central Coordinates and zoom level of the initial map
Map. setcenter (New openlayers. lonlat (106.5, 29.5), 3 );

}
// -->
</SCRIPT>
HTML code
<Body onload = "Init ()">
<H1> openlayers test <Div id = "Panel"> </div>
<Div id = "map"> </div>
<Textarea style = "display: none" id = "serialize" Cols = "96" rows = "10"/>
</Body>