OpenLayers.2.10.Beginners.Guide-chapter1

来源：互联网发布：淘宝网渔具专卖编辑：程序博客网时间：2024/05/16 09:45

1.<!DOCTYPE html>2.<html lang='en'>3.<head>4.    <meta charset='utf-8' />5.   <title>My OpenLayers Map</title>6.    <script type='text/javascript' src='OpenLayers.js'></script>7.    <script type='text/javascript'>8.9.        var map;10.11.       function init() {12.           map = new OpenLayers.Map('map_element', {});13.           var wms = new OpenLayers.Layer.WMS(14.               'OpenLayers WMS',15.               'http://vmap0.tiles.osgeo.org/wms/vmap0',16.               {layers: 'basic'},17.               {}18.           );19.20.           map.addLayer(wms);21.           if(!map.getCenter()){22.               map.zoomToMaxExtent();23.           }24.       }

1. Including the OpenLayers library fles:
Line [6]
<script type='text/javascript' src='OpenLayers.js'></script>

2. Creatng an HTML element for our map:
Lines [30] and [31]
<div id='map_element' style='width: 500px; height: 500px'>
</div>

3. Creatng a map object from the Map class:
Line [12]
map = new OpenLayers.Map('map_element', { });

4. Creatng a layer object from a Layer class:
Lines [13] to [18]
var wms_layer = new OpenLayers.Layer.WMS(
'WMS Layer Title',
'http://vmap0.tiles.osgeo.org/wms/vmap0',
{layers: 'basic'},
{}
);

5. Adding the layer to the map:
Line [20]
map.addLayer(wms_layer);

6. Defning the map's extent:
Lines [21] to [23]
if(!map.getCenter()){
map.zoomToMaxExtent();

}