OpenLayers学习笔记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="OpenLayers.js"></script>
    <title>地图加载</title>
    <script type="text/javascript">
        var map;
        function loadmap() {
            map = new OpenLayers.Map('map', {});
            var wms_layer_map = new OpenLayers.Layer.WMS(
                    '基础图层',
                    'http://vmap0.tiles.osgeo.org/wms/vmap0',
                    { layers: 'basic' },
                    { isBasicLayer: true }
            );
            var wms_layer_labels = new OpenLayers.Layer.WMS(
                    '地理标识',
                    'http://vmap0.tiles.osgeo.org/wms/vmap0',
                    { Layers: 'clabel,ctylabel,statelabel', transparent: true },
                    { visibility: true, opcity: 0.5 }
            );
            var wms_state_lines = new OpenLayers.Layer.WMS(
                    '国家线',
                    'http://labs.metacarta.com/wms/vmap0',
                    { layers: 'stateboundary', transparent: true },
                    { displayInLayerSwitcher: true, minScale: 13841995.078125 }
            );
            var wms_water_depth = new OpenLayers.Layer.WMS(
                    '水深',
                    'http://labs.metacarta.com/wms/vmap0',
                    { layers: 'depthcontour', transparent: true },
                    { opacity: 0.8 }
            );
            var wms_roads = new OpenLayers.Layer.WMS(
                    '道路',
                    'http://labs.metacarta.com/wms/vmap0',
                    { layers: 'priroad,secroad,rail', transparent: true },
                    { transistionEffect: 'resize' }
            );
            map.addLayers([
                           wms_layer_map,
                           wms_layer_labels,
                           wms_state_lines,
                           wms_roads,
                           wms_water_depth
            ]);


            map.addControl(new OpenLayers.Control.LayerSwitcher({}));


            map.setCenter(new OpenLayers.LonLat(-116, 23));
            map.zoomTo(5);
        }
        //参数解释
        //isBasicLayer:true 设置改图层为基础图层
        //visibility:false 设置图层是否显示
        //opacity:0.5       设置图层的透明度
        //transistionEffect:'resize'  设置图层重新显示的时候,有resize动画效果
        //minScale显示到的最小比例
        //maxScale显示到的最大比例
        //displayInLayerSwitcher:false  是否在图层选择器中出现
        //map.zoomTo(9);设置地图的缩放级别
        //map.getScale();获取地图的缩放级别
    </script>
</head>


<body onload="loadmap();">
    <div id="map" style="width: 500px; height: 500px; margin: auto;"></div>
</body>
</html>

你可能感兴趣的:(OpenLayers学习笔记)