OpenLayers 2.10 Beginners Guide 阅读笔记(第一章)

    OpenLayers 2.10 Beginners Guide 是一本非常好的openlayer2入门书籍,英文水平要求不高,讲解通俗易懂,以下是个人总结珍贵笔记:

  代码中链接了一个Openlayers.js文件,需要自行下载openlayers2.13源码,取用里面的openlayers.js文件

入门小示例:

<!DOCTYPE html>
<html lang='zh-cn'>
<head>
    <meta charset='utf-8' />
    <title>My OpenLayers Map</title>
    <script type='text/javascript' src='../OpenLayers.js'></script>
    <script type='text/javascript'>
        var map;
        function init() {
            map = new OpenLayers.Map('map', {});
            var wms = new OpenLayers.Layer.WMS(
                'OpenLayers WMS',
                'http://vmap0.tiles.osgeo.org/wms/vmap3',
                {
                    layers: 'basic'
                },
                {}
            );
            map.addLayer(wms);
            if (!map.getCenter()) {
                map.zoomToMaxExtent();
            }
        }
    </script>
</head>
<body onload='init();'>
<div id='map' style='width: 800px; height: 600px;'>
</div>
</body>
</html>

重点注意:

1、一个地图至少要有一个图层,该图层用于布置底层瓦片

2、一个WMS图层,至少要传入一个键值对:layers,示例代码中传入了一个layers:’basic’,代表向WMS服务请求basic图层

3、为了使图层可见,最后必须给地图设置一个显示的层级,map.zoomTo…以下列举三种方式:

map.zoomToMaxExtent();   //最大程度展示

map.zoomToExtent(指定范围); 

map.setCenter(new OpenLayers.LonLat(x,y));

  map.zoomTo(5);

4、放置地图的<div>的id属性值 === <script>中定义map时的第一个参数值

转载自:https://blog.csdn.net/m0_37738114/article/details/87879606

You may also like...