openlayer 系列二(地图切换控件)

根据上一个文章,已经简单的会使用openlayer 了.

现在加入地图切换控件.切换卫星地图和矢量地图作为展示.目前有2种方案.

方案一:

首先我们把2个地图全部叠加map 上.

    a = new ol.layer.Tile({            title: '天地图普通',            type: 'base',            visible: true,            source: new ol.source.scgisTile({                url: 'http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/newtianditudlg/'            })        });        b = new ol.layer.Tile({            title: '天地图卫星',            type: 'base',            visible: false,            source: new ol.source.scgisTile({                url: 'http://www.scgis.net.cn/iMap/iMapServer/DefaultRest/services/sctilemap_dom_dom/'            })        });        map.addLayer(a);        map.addLayer(b);

然后通过控制div显示地图即可.

非常简单,直接在原来代码(系列一)基础加个div,再整点CSS 就可以了….

//css     .map-btn {            position: absolute;            right: 10px;            top: 120px;            z-index: 2;            width: 60px;            height: 50px;            border: 2px solid #ffffff;            /*background: url(../imgs/map2.png);*/            background-size: 100% 100%;            box-shadow: 0 2px 15px rgba(0,0,0,.5);            cursor: pointer;        }        .map-btn-txt {            position: absolute;            right: 0;            bottom: 0;            width: 30px;            background: rgba(0, 158, 218, 0.67);            color: #fff;            text-align: center;            font-size: 12px;            border-top-left-radius: 4px;        }<div class="map-btn">    <div class="map-btn-txt">影像</div></div>

接下来是JS 控制地图切换

 var showFlag = 1;    // 地图模式按钮切换    $('.map-btn').click(function () {        if (2 == showFlag) {//            $(this).css({"background": "url(static/img/map1.png)", "background-size": "100% 100%"});            $('.map-btn-txt').text('矢量');            showFlag =1;            a.setVisible(true);    //显示矢量            b.setVisible(false); //显示瓦片        }        else {//            $(this).css({"background": "url(static/img/map2.png)", "background-size": "100% 100%"});            $('.map-btn-txt').text('影像');            showFlag = 2;            a.setVisible(false);    //显示矢量            b.setVisible(true); //显示瓦片        }    });

方案二:

在最大同性交友网站上利用歪国人的插件. 地址如下:ol3-layerswitcher

图如下:

引入js css

  <link rel="stylesheet" href="../../static/css/ol.css" type="text/css">    <link rel="stylesheet" href="../../static/css/layerswitcher.css" type="text/css">    <link rel="stylesheet" href="../../static/css/ol3-layerswitcher.css" type="text/css">    <script src="../../static/js/jquery-2.1.1.min.js" type="text/javascript"></script>    <script type="text/javascript" src="../../static/js/echarts.min.js"></script>    <script src="../../static/js/ol4.1.1_scgis.js" type="text/javascript"></script>    <script src="../../static/js/ol3-layerswitcher.js" type="text/javascript"></script>

代码就是2句话

   var layerSwitcher = new ol.control.LayerSwitcher({            tipLabel: 'Légende' // Optional label for button        });       map.addControl(layerSwitcher);

完毕 :总结第一种方案很想百度地图那样的.建议采用.
系列一 地址
openlayer系列一