图例的修改，目录树调整，图层管理调整，图片更新

shuishen

2021-06-23 9356ddd3554e1ddf8847923d0ce2eceeef8411f0

图例的修改，目录树调整，图层管理调整，图片更新

 images/layer-control.png

 widgets/Layermanagement/Widget.html

@@ -10,7 +10,13 @@
            图层管理
            <span class='sign-head-th-xx'><i class='layui-icon'>&#x1006;</i></span>
        </h3>
        <ul>

        <div class="layer-list-box">
            <ul class="layers-title">

            </ul>

            <ul class="layers-item">
            <li class="no-data">
                <div>
                    暂无图层加载
@@ -19,6 +25,8 @@
        </ul>
    </div>

    </div>

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

 widgets/Layermanagement/Widget.js

@@ -35,6 +35,9 @@
                topic.subscribe("appendItem", lang.hitch(this, this.appendItem));
                topic.subscribe("removeItem", lang.hitch(this, this.removeItem));

                topic.subscribe("appendTilt", lang.hitch(this, this.appendTilt));
                topic.subscribe("removeTilt", lang.hitch(this, this.removeTilt));

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

@@ -48,7 +51,7 @@
                    $(".jimu-widget-Layermanagement .tree-layer-opcity").stop().hide();
                })

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

                    var layerId = $(this).parents('li').attr('itemid');
                    var layerTitle = $(this).parents('li').attr('itemtitle');
@@ -89,7 +92,7 @@

                })

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

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

@@ -101,7 +104,7 @@

                })

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

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

@@ -123,9 +126,9 @@
                var that = this;
                if (item == this.name) {

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

                        that[obj.id] = layer;

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

            appendTilt: function (item, obj, layer) {
                var that = this;
                if (item == this.name) {

                    $(".jimu-widget-Layermanagement .layer-list .layers-item .no-data").stop().hide();

                    var flag = true;

                    var liList = $(".jimu-widget-Layermanagement .layer-list .layers-title 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>" +
                            "</div> </li>");

                        $(".jimu-widget-Layermanagement .layer-list .layers-title").prepend(liItem);
                    }
                }
            },

            removeItem: function (item, obj) {
                if (item == this.name) {
                    var liList = $(".jimu-widget-Layermanagement .layer-list ul li");
                    var liList = $(".jimu-widget-Layermanagement .layer-list .layers-item 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();
                    if ($(".jimu-widget-Layermanagement .layer-list .layers-item li").length == 1 && $(".jimu-widget-Layermanagement .layer-list .layers-title li").length == 0) {
                        $(".jimu-widget-Layermanagement .layer-list .layers-item .no-data").stop().show();
                        $(".jimu-widget-Layermanagement .tree-layer-opcity").stop().hide();
                    }

                }
            },

            removeTilt: function (item, obj) {
                if (item == this.name) {
                    var liList = $(".jimu-widget-Layermanagement .layer-list .layers-title 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 .layers-item li").length == 1 && $(".jimu-widget-Layermanagement .layer-list .layers-title li").length == 0) {
                        $(".jimu-widget-Layermanagement .layer-list .layers-item .no-data").stop().show();
                        $(".jimu-widget-Layermanagement .tree-layer-opcity").stop().hide();
                    }


 widgets/Layermanagement/css/style.css

@@ -35,6 +35,10 @@

}

.jimu-widget-Layermanagement .layer-tab button img {
    width: 20px;
}

.jimu-widget-Layermanagement .layer-list {
    display: none;
    position: fixed;
@@ -47,7 +51,7 @@
    box-shadow: 0 0 8px #fff;
}

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

 widgets/LeftNavigationBar/Widget.js

@@ -376,18 +376,25 @@
                                        that.map.scene.globe.depthTestAgainstTerrain = false;
                                        obj.data.children.forEach(item => {
                                            Cesium.when(that[item.id], function (layer) {
                                                topic.publish('removeTilt', 'Layermanagement', item);
                                                topic.publish('removeLayersLegends', 'legends', item);
                                                that.map.scene.layers.remove(layer[0].name)
                                            })
                                            var host = that.returnStr(item.src).host;
                                            var scene = that.map.scene;
                                            var partOfUrl = that.returnStr(item.src).partOfUrl;
                                            //添加S3M图层服务
                                            that[item.id] = scene.open(host + partOfUrl);
                                            that[item.id] = scene.open(host + partOfUrl, undefined, {
                                                autoSetView: false //不自动定位
                                            });
                                            topic.publish('appendTilt', 'Layermanagement', item);
                                            topic.publish('addLayersLegends', 'legends', item);
                                            //定位到场景
                                            Cesium.loadJson(host + partOfUrl + '/scenes.json').then(function (scenes) {
                                                var sname = scenes[0].name;
                                                Cesium.loadJson(host + partOfUrl + '/scenes/' + sname + '.json').then(function (jsonData) {
                                                    Cesium.when(that[item.id], function (layer) {

                                                        //设置相机位置、视角，便于观察场景
                                                        scene.camera.setView({
                                                            destination: new Cesium.Cartesian3.fromDegrees(Number(item.lon), Number(item.lat), Number(item.height)),
@@ -408,6 +415,8 @@
                                                    });
                                                });
                                            });


                                        });
                                    } else {

@@ -458,6 +467,8 @@
                                    if (obj.data.model) {
                                        obj.data.children.forEach(item => {
                                            Cesium.when(that[item.id], function (layer) {
                                                topic.publish('removeTilt', 'Layermanagement', item);
                                                topic.publish('removeLayersLegends', 'legends', item);
                                                that.map.scene.layers.remove(layer[0].name)
                                            })
                                        });
@@ -482,6 +493,8 @@

                                    if (obj.data.model) {
                                        Cesium.when(that[obj.data.id], function (layer) {
                                            topic.publish('removeTilt', 'Layermanagement', obj.data);
                                            topic.publish('removeLayersLegends', 'legends', obj.data);
                                            that.map.scene.layers.remove(layer[0].name)
                                        })

@@ -491,9 +504,12 @@
                                        var partOfUrl = that.returnStr(obj.data.src).partOfUrl;
                                        //添加S3M图层服务

                                        that[obj.data.id] = scene.open(host + partOfUrl);
                                        that[obj.data.id] = scene.open(host + partOfUrl, undefined, {
                                            autoSetView: false //不自动定位
                                        });
                                        topic.publish('appendTilt', 'Layermanagement', obj.data);
                                        topic.publish('addLayersLegends', 'legends', obj.data);
                                        //定位到场景

                                        Cesium.loadJson(host + partOfUrl + '/scenes.json').then(function (scenes) {
                                            var sname = scenes[0].name;
                                            Cesium.loadJson(host + partOfUrl + '/scenes/' + sname + '.json').then(function (jsonData) {
@@ -565,6 +581,9 @@

                                    if (obj.data.model) {
                                        Cesium.when(that[obj.data.id], function (layer) {

                                            topic.publish('removeTilt', 'Layermanagement', obj.data);
                                            topic.publish('removeLayersLegends', 'legends', obj.data);
                                            that.map.scene.layers.remove(layer[0].name)
                                        })

@@ -585,6 +604,7 @@

                            }


                            for (var i = 0; i < that.dataAllArray.length; i++) {

                                if (obj.data.id == that.dataAllArray[i].id) {

 widgets/legends/Widget.html

@@ -1,18 +1,8 @@
<div>
    <div class="title">图层列表</div>
    <div class="title">图例列表</div>
    <div class="main">
        <div id="legendsInquanjing">
            <div class="m-init"> <i class="m-init-h"><img src="./images/addL/全景.png" /></i> 全景站点 <i>(0个)</i> </div>
            <!-- <div class="m-init m-i-child"> <i></i> 大湖池<i>(1个)</i> </div>
            <div class="m-init m-i-child"> <i></i> 战备胡 <i>(1个)</i> </div> -->
        </div>
        <div id="legendsInjiankong">
            <div class="m-init"> <i class="m-init-h"><img src="./images/addL/监控.png" /></i> 监控站点 <i>(0个)</i> </div>
            <!-- <div class="m-init m-i-child"> <i></i> 大湖池 <i>(1个)</i> </div> -->
        </div>
        <div id="legendsInjiance">
            <div class="m-init"> <i class="m-init-h"><img src="./images/addL/监测.png" /></i> 监测站点 <i>(0个)</i> </div>
            <!-- <div class="m-init m-i-child"> <i></i> 大湖池 <i>(1个)</i> </div> -->
        <div id='legendsInquanjing'>

        </div>
        <ul class="layer-legends">


 widgets/legends/Widget.js

@@ -34,76 +34,52 @@
                topic.subscribe("removeLayersLegends", lang.hitch(this, this.removeLayersLegends));

            },
            onGetLegendsData: function (item) {
                var val = item == '  ' ? '' : item;
                var that = this,
                    twoData = []
                    // url = `http://171.34.76.171:8880/pyh-wetResource/monitorRecords/queryMonitorData?name=&start&limit&type=${index}`
                    ,
                    token = 'Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJlY2hpc2FuIiwic3ViIjoiYWRtaW4iLCJpYXQiOjE2MjMyMjU5OTcsImV4cCI6MTYyNTgxNzk5N30.zWpoKa5AK7xLIPNm-CXoHY9D5kpk9AiUTGkuAQOZi2Rdl2BfroT4IqxjBpyUPZlgwCjG2CoJqy_7rnnodpmqNw',
                    myGet = function (val, i) {
                        var url = `http://171.34.76.171:8880/pyh-wetResource/monitorRecords/queryMonitorData?name=${val}&start&limit&type=${i}`;
                        axios.get(url, {
                            headers: {
                                'token': token
                            }
                        }).then((res) => {
                            if (res.data.code == 200) {
                                var data = res.data.data.panoramaList || res.data.data.stationList || res.data.data.videoList || [],
                                    onceData = {};
                                for (var k in data) {
                                    if (i == 0) {
                                        onceData[data[k].protectArea] = onceData[data[k].protectArea] == undefined ? 1 : onceData[data[k].protectArea] += 1;
                                    } else if (i == 2) {
                                        onceData[data[k].protectName] = onceData[data[k].protectName] == undefined ? 1 : onceData[data[k].protectName] += 1;
                                    } else if (i == 1) {
                                        onceData[data[k].wetlandName_] = onceData[data[k].wetlandName_] == undefined ? 1 : onceData[data[k].wetlandName_] += 1;
                                    }
                                }
                                twoData.push(onceData)
                                if (i == 2) {
                                    ready(twoData, item);
                                }
                            } else {
                                console.log('请求访问失败')
                            }
                        })
                    },
                    ready = function (d, val) {
                        if (val == '') {
                            d = {};
                        }
                        var init = (data, dom, img) => {
                            var q = data,
                                num = 0,
                                strq, domq = $(dom),
                                h = '';
            onGetLegendsData: function (item, data, imgurl, type) {
                if (item == this.name) {

                    var domq = $("#legendsInquanjing");
                            domq.empty();
                            for (var k in q) {
                                num += q[k];
                                h += `<div class="m-init m-i-child"> <i></i> ${k}<i>(${q[k]}个)</i> </div>`;
                    var liList = $(".jimu-widget-legends .layer-legends li");
                    if (data == "" && data.length == 0) {
                        if (liList.length == 0) {
                            $(".jimu-widget-legends").stop().hide();
                            }
                            strq = `<div class="m-init"> <i><img src="./images/addL/${img}.png" /></i> ${img}站点 <i>(${num}个)</i> </div>` + h;
                            domq.append(strq);
                        }
                        // 全景
                        init(d[0], '#legendsInquanjing', '全景');
                        // 监控
                        init(d[2], '#legendsInjiankong', '监控');
                        // 监测
                        init(d[1], '#legendsInjiance', '监测');
                    },
                    doit = () => {
                        var i = 0;
                        myGet(val, i);
                        var i = 1;
                        myGet(val, i);
                        var i = 2;
                        myGet(val, i);

                        return;
                    }

                doit();
                    var onceData = {};

                   

                    for (var k in data) {

                        if (type == "全景站点") {

                            onceData[data[k].protectArea] = onceData[data[k].protectArea] == undefined ? 1 : onceData[data[k].protectArea] += 1;

                        } else if (type == "监控站点") {

                            onceData[data[k].protectName] = onceData[data[k].protectName] == undefined ? 1 : onceData[data[k].protectName] += 1;

                        } else if (type == "监测站点") {

                            onceData[data[k].wetlandName_] = onceData[data[k].wetlandName_] == undefined ? 1 : onceData[data[k].wetlandName_] += 1;

                        }
                    }

                    var itemBox = $("<div class='m-init'> <i class='m-init-h'><img src='" + imgurl + "' /></i> " + type + " <i>(" + data.length + "个)</i> </div>")

                    var h = '';

                    for (var k in onceData) {
                        h += `<div class="m-init m-i-child"> <i></i> ${k}<i>(${onceData[k]}个)</i> </div>`;
                    }

                    domq.append(itemBox , h);
                    $(".jimu-widget-legends").stop().show();

                }
            },
            addLayersLegends: function (item, obj) {

@@ -120,6 +96,10 @@
                            $(".jimu-widget-legends .layer-legends").append(list);
                        }
                    }
                    var liList = $(".jimu-widget-legends .layer-legends li");
                    if (liList.length > 0 && $(".jimu-widget-legends").is(":hidden")) {
                        $(".jimu-widget-legends").stop().show();
                    }
                }
            },
            removeLayersLegends: function (item, obj) {
@@ -130,12 +110,19 @@
                            $(liList[i]).remove();
                        }
                    }

                    var domq = $("#legendsInquanjing");

                    if (domq.text().trim() == "") {
                        $(".jimu-widget-legends").stop().hide();
                    }
                }
            },
            closeToolBox: function (item) {},

            onOpen: function () {
                //面板打开的时候触发 （when open this panel trigger）
                $(".jimu-widget-legends").stop().hide();
            },

            onClose: function () {

 widgets/legends/css/style.css

@@ -79,6 +79,7 @@
    height: 36px;
    line-height: 36px;
}

.jimu-widget-legends .layer-legends li .m-init-h {
    width: auto;
    margin-right: 10px !important;

 widgets/searchL/Widget.js

@@ -55,7 +55,7 @@

                $(".searchImg").click(function () {
                    that.getInputData();
                    topic.publish('getLegendsData', that.searchDatas);

                    that.addOneEntitys.removeAll();
                    if (typeof that.searchDatas == 'string') {
                        var han = /^[\u4e00-\u9fa5]+$/;
@@ -98,14 +98,13 @@
                $(".searchColce").click(function () {
                    $('.searchLMain').hide();
                    that.addOneEntitys.removeAll();
                    topic.publish('getLegendsData', '');
                    topic.publish('getLegendsData', "legends", '');
                })

                $("#local_data").keyup(function (e) {
                    // console.log(e);
                    that.getInputData();
                    if (e.keyCode == 13 && typeof that.searchDatas == 'string') {
                        topic.publish('getLegendsData', that.searchDatas);
                        that.addOneEntitys.removeAll();
                        var han = /^[\u4e00-\u9fa5]+$/;
                        if (han.test(that.searchDatas) || that.searchDatas == '  ') {
@@ -171,10 +170,13 @@
                if (d == []) {
                    if (n == 0) {
                        this.beginLayUi(d);
                        topic.publish('getLegendsData', "legends", d, "./images/addL/全景.png", "全景站点");
                    } else if (n == 1) {
                        this.beginLayUi(1, d);
                        topic.publish('getLegendsData', "legends", d, "./images/addL/监控.png", "监控站点");
                    } else if (n == 2) {
                        this.beginLayUi(1, 1, d);
                        topic.publish('getLegendsData', "legends", d, "./images/addL/全景.png", "监测站点");
                    }
                } else {
                    var i = 1;
@@ -186,10 +188,13 @@
                    var data = d;
                    if (n == 0) {
                        this.beginLayUi(data);
                        topic.publish('getLegendsData', "legends", d, "./images/addL/全景.png", "全景站点");
                    } else if (n == 1) {
                        this.beginLayUi(1, data);
                        topic.publish('getLegendsData', "legends", d, "./images/addL/监控.png", "监控站点");
                    } else if (n == 2) {
                        this.beginLayUi(1, 1, data);
                        topic.publish('getLegendsData', "legends", d, "./images/addL/监测.png", "监测站点");
                    }
                }
            },
@@ -199,7 +204,6 @@
                this.map.dataSources.add(dataSourceOne);
                //面板打开的时候触发
                var that = this;
                that.getData(0)
                layui.use('element', function () {
                    var $ = layui.jquery
                        , element = layui.element;