图层管理相关调整

shuishen

2021-06-17 f3016800deb09b296c93e1d6329aea47ffe27942

图层管理相关调整

 widgets/Layermanagement/Widget.html

@@ -1,24 +1,29 @@
<div>
    <div class="layer-tab">
        <button>
            <img src="./images/layer-control.png" alt="">
    <div class='layer-tab'>
        <button title='图层管理'>
            <img src='./images/layer-control.png' alt=''>
        </button>
    </div>

    <div class="layer-list">
    <div class='layer-list'>
        <h3>
            图层管理
            <span class='sign-head-th-xx'><i class='layui-icon'>&#x1006;</i></span>
        </h3>
        <ul>
            <li>
            <li class="no-data">
                <div>
                    名称
                    <button>
                        透明度设置
                    </button>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i
                            class="layui-icon">&#xe619;</i></button>
                    <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"><i
                            class="layui-icon">&#xe61a;</i></button>
                    暂无图层加载
                </div>
            </li>
        </ul>
    </div>

    <div class="tree-layer-opcity">
        <h3>图层透明度控制</h3>
        <i class="close layui-icon">&#x1006;</i>
        <ul>
			
        </ul>	
    </div>
</div>

 widgets/Layermanagement/Widget.js

@@ -15,34 +15,163 @@
        'libs/layer/layer.js'
    ],
    function (declare,
              lang,
              array,
              html,
              topic,
              BaseWidget,
              aspect,
              string,
              utils,
              layer
        lang,
        array,
        html,
        topic,
        BaseWidget,
        aspect,
        string,
        utils,
        layer
    ) {
        return declare([BaseWidget], {
            baseClass: 'jimu-widget-Layermanagement',
            name: 'Layermanagement',
            dataArr: [],
            startup: function () {
                var that = this;
                // 暴露在外的接口
                topic.subscribe("closeZtree", lang.hitch(this, this.closeZtreeBox));
               
                topic.subscribe("appendItem", lang.hitch(this, this.appendItem));
                topic.subscribe("removeItem", lang.hitch(this, this.removeItem));

                $(".jimu-widget-Layermanagement .layer-tab button").click(function () {
                    $(".jimu-widget-Layermanagement .layer-list").stop().toggle();
                })

                $(".jimu-widget-Layermanagement .sign-head-th-xx").click(function () {
                    $(".jimu-widget-Layermanagement .layer-list").stop().hide();
                })

                $(".jimu-widget-Layermanagement .layer-list ul").on("click", "li .layer-opacity", function () {

                    var layerId = $(this).parents('li').attr('itemid');
                    var layerTitle = $(this).parents('li').attr('itemtitle');

                    var liC = `<li>
                            <div title="${layerTitle}">
                                ${layerTitle}
                            </div>
                            <div id="${layerId + 'Layer'}">

                            </div>
                        </li>`;

                    $(".jimu-widget-Layermanagement .tree-layer-opcity ul").empty();

                    $(".jimu-widget-Layermanagement .tree-layer-opcity ul").append(liC)

                    $(".jimu-widget-Layermanagement .tree-layer-opcity").stop().show();

                    layui.use("slider", function () {

                        layui.slider.render({
                            elem: '#' + layerId + 'Layer',
                            min: 0,
                            max: 10,
                            value: that[layerId].alpha * 10,
                            step: 1,
                            theme: '#1E9FFF',
                            setTips: function (value) { //自定义提示文本
                                return value / 10;
                            },
                            change: function (value) {
                                that[layerId].alpha = value / 10
                            }
                        });

                    })

                })

                $(".jimu-widget-Layermanagement .layer-list ul").on("click", "li .setup", function () {

                    var layerId = $(this).parents('li').attr('itemid');

                    that.map.scene.imageryLayers.raise(that[layerId]);

                    if ($(this).parents('li').prev().length > 0) {
                        $(this).parents('li').prev().before($(this).parents('li'));
                    }

                })

                $(".jimu-widget-Layermanagement .layer-list ul").on("click", "li .setdown", function () {

                    var layerId = $(this).parents('li').attr('itemid');

                    that.map.scene.imageryLayers.lower(that[layerId]);

                    if ($(this).parents('li').next().length > 0) {
                        $(this).parents('li').next().after($(this).parents('li'));
                    }

                })

                $(".jimu-widget-Layermanagement .tree-layer-opcity .close").click(function () {
                    $(".jimu-widget-Layermanagement .tree-layer-opcity").stop().hide();
                })

            },

            closeZtreeBox: function (item) {
                if (item != this.name) {
                    $('#ztree_container').stop().hide();
            appendItem: function (item, obj, layer) {
                var that = this;
                if (item == this.name) {

                    $(".jimu-widget-Layermanagement .layer-list ul .no-data").stop().hide();
                    var flag = true;
                    var liList = $(".jimu-widget-Layermanagement .layer-list ul li");
                    for (var i = 0; i < liList.length; i++) {
                        if ($(liList[i]).attr('itemid') && $(liList[i]).attr('itemid') == obj.id) {
                            flag = false
                        }
                    }

                    if (flag == true) {
                        var liItem = $("<li itemid='" + obj.id + "' itemtitle='" + obj.title + "'> <div>" +
                            "<span title='" + obj.title + "'>" +
                            obj.title +
                            "</span>" +
                            "<button type='button' class='layui-btn layui-btn-normal layui-btn-sm control-btn layer-opacity' title='透明度调整'>" +
                            "<img src='./images/工具（用以切换图层的透明度）.png' alt=''>" +
                            "</button>" +
                            "<button type='button' class='layui-btn layui-btn-normal layui-btn-sm control-btn setup' title='向上移动图层'>" +
                            "<img src='./images/向上移动.png' alt=''>" +
                            "</button>" +
                            "<button type='button' class='layui-btn layui-btn-normal layui-btn-sm control-btn setdown' title='向下移动图层'>" +
                            "<img src='./images/向下移动.png' alt=''>" +
                            "</button>" +
                            "</div> </li>");

                        that[obj.id] = layer;

                        $(".jimu-widget-Layermanagement .layer-list ul").prepend(liItem);
                    }



                }
            },

            removeItem: function (item, obj) {
                if (item == this.name) {
                    var liList = $(".jimu-widget-Layermanagement .layer-list ul li");
                    for (var i = 0; i < liList.length; i++) {
                        if ($(liList[i]).attr('itemid') && $(liList[i]).attr('itemid') == obj.id) {
                            $(liList[i]).remove();
                        }
                    }

                    if ($(".jimu-widget-Layermanagement .layer-list ul li").length == 1) {
                        $(".jimu-widget-Layermanagement .layer-list ul .no-data").stop().show();
                        $(".jimu-widget-Layermanagement .tree-layer-opcity").stop().hide();
                    }

                }
            },

            onOpen: function () {
                

            },

            onClose: function () {

 widgets/Layermanagement/css/style.css

@@ -1,10 +1,10 @@
.jimu-widget-Layermanagement {
    
    color: #555;
}

.jimu-widget-Layermanagement .layer-tab {
    position: fixed;
    top: 100px;
    top: 72px;
    right: 10px;
}

@@ -22,7 +22,6 @@
    position: relative;
    border: 1px solid #444;
    border-color: #fff;
    color: #edffff;
    fill: #edffff;
    margin: 1px 2px;
    cursor: pointer;
@@ -37,10 +36,108 @@
}

.jimu-widget-Layermanagement .layer-list {
    display: none;
    position: fixed;
    top: 100px;
    top: 72px;
    right: 60px;
    width: 320px;
    height: 420px;
    min-height: 80px;
    background: #fff;
}
    border-radius: 5px;
    box-shadow: 0 0 8px #fff;
}

.jimu-widget-Layermanagement .layer-list ul {
    max-height: 360px;
    overflow-y: auto;
}

.jimu-widget-Layermanagement .layer-list h3 {
    position: relative;
    margin: 0;
    line-height: 40px;
    height: 40px;
    font-size: 16px;
    font-weight: normal;
    text-align: center;
}

.jimu-widget-Layermanagement .layer-list h3 .sign-head-th-xx {
    position: absolute;
    right: 0px;
}

.jimu-widget-Layermanagement .layer-list li {
    padding: 0 10px;
}

.jimu-widget-Layermanagement .layer-list li>div {
    display: flex;
    align-items: center;
    height: 36px;
}

.jimu-widget-Layermanagement .layer-list li>div span {
    width: calc(100% - 102px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jimu-widget-Layermanagement .layer-list .control-btn {
    padding: 0 !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    margin-left: 10px;
}

.jimu-widget-Layermanagement .layer-list .layui-btn {
    border: none;
}

.jimu-widget-Layermanagement .layer-list .control-btn img{
    margin: auto;
    width: 16px;
    height: 16px;
}


.jimu-widget-Layermanagement .tree-layer-opcity {
    display: none;
    position: fixed;
    top: 72px;
    right: 390px;
    width: 260px;
    height: auto;
    background: #Fff;
    border-radius: 5px;
    box-shadow: 0 0 8px #fff;
  }
  
  .jimu-widget-Layermanagement .tree-layer-opcity h3 {
    margin: 0;
    height: 36px;
    line-height: 36px;
    text-align: center;
  }
  
  
  .jimu-widget-Layermanagement .tree-layer-opcity .close {
    position: absolute;
    top: 4px;
    right: 4px;
  }
  
  .jimu-widget-Layermanagement .tree-layer-opcity li>div:first-child {
    padding: 0 10px;
    line-height: 28px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  
  .jimu-widget-Layermanagement .tree-layer-opcity li>div:last-child {
    margin: 10px 10px;
    width: calc(100% - 20px);
  }