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

最新推荐文章于 2025-04-17 09:48:12 发布

置顶 Whyloveit

最新推荐文章于 2025-04-17 09:48:12 发布

阅读量5.5k

点赞数

分类专栏：实战记录文章标签：地图控件 openlayers3 地图切换切换

本文链接：https://blog.youkuaiyun.com/qq_35257397/article/details/78626343

版权

实战记录专栏收录该内容

37 篇文章

订阅专栏

本文介绍了两种在OpenLayer中实现地图切换的方法：一种是通过手动控制div显示不同图层来切换矢量地图和卫星地图；另一种是使用第三方插件ol3-layerswitcher简化操作流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据上一个文章,已经简单的会使用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系列一