OpenLayers学习笔记

最新推荐文章于 2018-06-25 15:07:34 发布

lxbgg

最新推荐文章于 2018-06-25 15:07:34 发布

阅读量1.3k

点赞数

分类专栏： sh

本文链接：https://blog.csdn.net/drr789/article/details/9184867

版权

sh 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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 οnlοad="loadmap();">
    <div id="map" style="width: 500px; height: 500px; margin: auto;"></div>
</body>
</html>

lxbgg

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
OpenLayers学习笔记

地图加载 var map; function loadmap() { map = new OpenLayers.Map('map', {}); var wms_layer_map = new OpenLayers.Layer.WMS( '基础图层',
复制链接

扫一扫

专栏目录