WebGIS开发利用Openlayers实现图层组控制

最新推荐文章于 2024-05-09 10:44:47 发布

GIS开发特训营

最新推荐文章于 2024-05-09 10:44:47 发布

阅读量1.5k

点赞数 1

分类专栏： GIS开发文章标签： javascript 前端数据库开发 gis web

本文链接：https://blog.csdn.net/gis_witch/article/details/122404208

版权

GIS开发专栏收录该内容

34 篇文章 29 订阅

订阅专栏

本文示例需要使用【include-openlayers-local.js】开发库实现图层组控制功能。通过 layer 对象的 setOpacity()方法设置图层透明度以及 setVisible()方法设置图层是否可见。

具体效果如下图所示：

实现步骤

1. 引用开发库:

本示例通过本地离线【include-openlayers-local.js】脚本引入开发库;

2. 创建地图容器:

创建id="mapCon"的 div 作为地图容器，并设置其样式;

3. 创建地图对象:

创建地图对象，设置地图的必要参数,将 layers 属性设置为天地图矢量图层、天地图注记图层以及 ;mapbox TileJson 图层

4. 设置图层透明度:

创建图层组控制控件，通过 layer 对象的 setOpacity()方法设置图层透明度;

layer.setOpacity(parseFloat(this.value)

Step 5. 设置图层是否可见:

通过 layer 对象的 setVisible()方法设置图层是否可见。

layer.setVisible(this.checked)

关键接口

1.【图层基类】ol.layer.Layer

【method】setVisible(visible)：设置图层的可见性

参数名	类型	说明
visible	boolean	图层的可见性

详细信息见 OpenLayers API

【method】setOpacity(opacity)：设置图层的可见性

参数名	类型	说明
opacity	number	图层的透明度(0-1)

详细信息见 OpenLayers API

代码块：

<!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" />
    <title></title>
    <!--当前示例页面样式表引用-->
    <link rel="stylesheet" href="./static/demo/openlayers/example/style.css" />
    <script include="jquery" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-openlayers-local.js"></script>

    <style type="text/css">
        #mapCon {
            width: 100%;
            height: 95%;
            position: absolute;
        }
      

        #layertree li > span {
            cursor: pointer;
            font-size: 6px;
        }
        #layertree ul{
            font-family: cursive;
            color:white;
            margin: 0px;
            padding-left: 20px;
        }
        fieldset{
            padding-left: 6px;
            padding-bottom: 5px;
            padding-right: 6px;
            border-width: 1px;
        }
      
        br{
           display:inline; 
           line-height:2px;
        }

        fieldset label {
            float:left;
            color: white;
            font-size: 6px;
            font-weight: 500;
            font-family: cursive;
            margin: 2px 2px;
            width: 70%;
        }
        fieldset input {
            float: left;
            margin-bottom:2px;
            width: 10%;
        }
        input[type="range"] {
        /*-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;*/
            -webkit-appearance:none; /*去除默认样式*/
            background-color: #ebeff4;
            /*border-radius: 15px;*/
            width: 70px;
            -webkit-appearance: none;
            height:2px;
            padding: 0;
            border: none;
            margin-top: 10px
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;/*去除默认样式*/
            cursor: default;
            top: 0;
            height: 10px;
            width: 10px;
            transform: translateY(0px);
            /*background: none repeat scroll 0 0 #5891f5;*/
            background: #fff;
            border-radius: 5px;
            border: 2px solid #006eb3;
            /*-webkit-box-shadow: 0 -1px 1px #fc7701 inset;*/
        }
    </style>

    <script type="text/javascript">
        var map = null;
        var tdk = "4c27d6e0e8a90715b23a989d42272fd8";   //天地图密钥

        function init() {
           
            
            //加载天地图瓦片图层数据
            var TiandiMap_vect = new ol.layer.Tile({
                    title: "天地图矢量图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + tdk,
                        wrapX: false
                    })
            });
            
            var TiandiMap_vectcia =new ol.layer.Tile({
                    title: "天地图矢量注记图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + tdk
                    })
            });

            var tileJsonLayer = new ol.layer.Tile({
                source: new ol.source.TileJSON({
                    url: 'https://api.tiles.mapbox.com/v4/mapbox.geography-class.json?secure&access_token=pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q',
                    crossOrigin: 'anonymous'
                })
            });

            //初始化地图容器
            map = new ol.Map({
                target: 'mapCon',     //地图容器div的ID
                controls: ol.control.defaults({
                    attributionOptions: ({
                        collapsible: true
                    })
                }),
                view: new ol.View({
                    center: ol.proj.fromLonLat([37.40570, 8.81566]),  //地图初始中心点
                    maxZoom: 28,         //最大瓦片显示级数
                    minZoom: 1,          //最小瓦片显示级数
                    zoom: 6              //地图初始显示级数
                  
                }),
                layers:[TiandiMap_vect,new ol.layer.Group({layers:[tileJsonLayer,TiandiMap_vectcia]})]
            });

            map.getLayers().forEach(function (layer, i) {
                bindInputs('#layer' + i, layer);
                if (layer instanceof ol.layer.Group) {
                    layer.getLayers().forEach(function (sublayer, j) {
                        bindInputs('#layer' + i + j, sublayer);
                    });
                }
            });

            $('#layertree li > span').click(function() {
                $(this).siblings('fieldset').toggle();
            });
            $('#layertree li > span').siblings('fieldset').hide();
           
        }
        function bindInputs(layerid, layer) {
            var visibilityInput = $(layerid + ' input.visible');
            visibilityInput.on('change', function () {
                layer.setVisible(this.checked);
            });
            visibilityInput.prop('checked', layer.getVisible());

            var opacityInput = $(layerid + ' input.opacity');
            opacityInput.on('input change', function () {
                layer.setOpacity(parseFloat(this.value));
            });
            opacityInput.val(String(layer.getOpacity()));
        }
   
    </script>
</head>

<body onload="init()">
    <div id="mapCon">
    </div>
    <fieldset id="layertree" style="position: absolute;width: 180px;top: 18px;left: 50px;background-color: black;opacity: 0.65;border-radius: 10px;padding: 10px 6px;">
        <ul>
            <li>
                <span>天地图</span>
                <fieldset id="layer0">
                    <input id="visible0" class="visible" type="checkbox" /><label class="tableTxt">可见</label><br/>
                    <label style="width: 54px;line-height: 17px">透明度:</label><input class="opacity" type="range" min="0" max="1" step="0.01" />
                </fieldset>
            </li>
            <li>
                <span>组图层</span>
                <fieldset id="layer1">
                    <input id="visible1" class="visible" type="checkbox" /><label class="tableTxt">可见</label><br/>
                    <label style="width: 54px;line-height: 17px">透明度:</label><input class="opacity" type="range" min="0" max="1" step="0.01" />
                </fieldset>
                <ul>
                    <li>
                        <span>mapbox TileJson</span>
                        <fieldset id="layer10">
                            <input id="visible10" class="visible" type="checkbox" /><label class="tableTxt">可见</label><br/>
                            <label style="width: 45px;line-height: 17px">透明度:</label><input style="width: 67px;" class="opacity" type="range" min="0" max="1" step="0.01" />
                        </fieldset>
                    </li>
                    <li>
                        <span>天地图注记图层</span>
                        <fieldset id="layer11">
                            <input id="visible11" class="visible" type="checkbox" /><label class="tableTxt">可见</label><br/>
                            <label style="width: 45px;line-height: 17px">透明度:</label><input style="width: 67px;" class="opacity" type="range" min="0" max="1" step="0.01" />
                        </fieldset>
                    </li>
                </ul>
            </li>
        </ul>
    </fieldset>
</body>

</html>

GIS开发特训营

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
WebGIS开发利用Openlayers实现图层组控制

本文示例需要使用【include-openlayers-local.js】开发库实现图层组控制功能。通过 layer 对象的 setOpacity()方法设置图层透明度以及 setVisible()方法设置图层是否可见。具体效果如下图所示：实现步骤1. 引用开发库:本示例通过本地离线【include-openlayers-local.js】脚本引入开发库;2. 创建地图容器:创建id="mapCon"的 div 作为地图容器，并设置其样式;3. 创建.
复制链接

扫一扫