shuishen
2021-06-09 0ee58233d6e1ab07bc13701f12b60be8dcf9aff7
目录树添加模型,和透明度调整的相关结构及逻辑样式
5 files modified
323 ■■■■ changed files
config.json 8 ●●●● patch | view | raw | blame | history
index.html 2 ●●● patch | view | raw | blame | history
widgets/LeftNavigationBar/Widget.html 13 ●●●●● patch | view | raw | blame | history
widgets/LeftNavigationBar/Widget.js 261 ●●●● patch | view | raw | blame | history
widgets/LeftNavigationBar/css/style.css 39 ●●●●● patch | view | raw | blame | history
config.json
@@ -306,10 +306,10 @@
    }],
    "mapOptions": {
      "positionInfo": {
        "xmin": 115.547800,
        "ymin": 28.820504,
        "xmax": 115.926573,
        "ymax": 28.671158
        "xmin": 114.079032,
        "ymin": 30.223379,
        "xmax": 118.791967,
        "ymax": 28.127233
      },
      "animation": false,
      "baseLayerPicker": true,
index.html
@@ -103,7 +103,7 @@
        }
        .cesium-baseLayerPicker-dropDown {
            width: 220px !important;
            width: 308px !important;
        }
        #main-loading {
widgets/LeftNavigationBar/Widget.html
@@ -18,15 +18,10 @@
    </div>
    <div class="tree-layer-opcity">
        <h3>图层透明度控制</h3>
        <i class="close layui-icon">&#x1006;</i>
        <ul>
            <li>
                <div>
                </div>
                <div>
                </div>
            </li>
        </ul>
        </ul>
    </div>
</div>
widgets/LeftNavigationBar/Widget.js
@@ -101,12 +101,17 @@
                    }
                })
                $(".jimu-widget-LeftNavigationBar .tree-layer-opcity .close").click(function () {
                    $(".jimu-widget-LeftNavigationBar .tree-layer-opcity").stop().hide();
                })
            },
            closeToolBox: function (item) {},
            onOpen: function () {
                //面板打开的时候触发 (when open this panel trigger)
            },
            onClose: function () {
@@ -134,7 +139,7 @@
                    }
                }).then((res) => {
                    if (res.data.code == '200') {
                        // console.log(res, 'open', 898998)
                        console.log(res, 'open', 898998)
                        that.changeData(res.data.data); //重写数据
                    }
                })
@@ -154,8 +159,19 @@
                                field: String(i),
                                src: d[k].serviceUrl,
                                id: d[k].id,
                                serviceName: d[k].serviceName
                                serviceName: d[k].serviceName,
                                alpha: 1
                            }
                            if (d[k].serviceUrl.indexOf('.openrealspace') != -1) {
                                a.model = true
                            }
                            if (d[k].name == '三维倾斜数据') {
                                a.model = true
                            }
                            b.push(a);
                            i++;
                            if (d[k].children.length != 0) {
@@ -195,6 +211,8 @@
                        layer = layui.layer,
                        util = layui.util,
                        $ = layui.$;
                    var slider = layui.slider;
                    tree.render({
                        elem: '#left-tree-list' //默认是点击节点可进行收缩
                            ,
@@ -232,29 +250,77 @@
                                if (obj.checked == true) {
                                    obj.data.children.forEach(item => {
                                        $.ajax({
                                            url: item.src + '/maps.json',
                                            type: 'get',
                                            dataType: 'JSON',
                                            success: function (res) {
                                    if (obj.data.model) {
                                        obj.data.children.forEach(item => {
                                            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);
                                            //定位到场景
                                            Cesium.loadJson(host + partOfUrl + '/scenes.json').then(function (scenes) {
                                                // var sname = scenes[0].name;
                                                // Cesium.loadJson(host + partOfUrl + '/scenes/' + sname + '.json').then(function (jsonData) {
                                                //     var cameraPosition = jsonData.camera;
                                                //     var tilt = Cesium.Math.toRadians(cameraPosition.tilt - 90);
                                                //     Cesium.when(promise, function (layer) {
                                                //         //设置相机位置、视角,便于观察场景
                                                //         scene.camera.setView({
                                                //             destination: new Cesium.Cartesian3.fromDegrees(cameraPosition.longitude, cameraPosition.latitude, cameraPosition.altitude),
                                                //             orientation: {
                                                //                 heading: cameraPosition.heading,
                                                //                 pitch: tilt,
                                                //                 roll: 0
                                                //             }
                                                //         });
                                                //         if (!scene.pickPositionSupported) {
                                                //             alert('不支持深度纹理,无法拾取位置!');
                                                //         }
                                                //     }, function (e) {
                                                //         if (widget._showRenderLoopErrors) {
                                                //             var title = '加载SCP失败,请检查网络连接状态或者url地址是否正确?';
                                                //             widget.showErrorPanel(title, undefined, e);
                                                //         }
                                                //     });
                                                // });
                                            });
                                        });
                                    } else {
                                        obj.data.children.forEach(item => {
                                            $.ajax({
                                                url: item.src + '/maps.json',
                                                type: 'get',
                                                dataType: 'JSON',
                                                success: function (res) {
                                                that[item.id] = that.map.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
                                                    url: res[0].path,
                                                }));
                                                    that[item.id] = that.map.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
                                                        url: res[0].path,
                                                    }));
                                                    that[obj.data.id].alpha = item.alpha
                                                }
                                            })
                                        });
                                            }
                                        })
                                    });
                                    }
                                } else {
                                    obj.data.children.forEach(item => {
                                        if (that[item.id]) that.map.imageryLayers.remove(that[item.id]);
                                    });
                                    if (obj.data.model) {
                                        obj.data.children.forEach(item => {
                                            Cesium.when(that[item.id], function (layer) {
                                                that.map.scene.layers.remove(layer[0].name)
                                            })
                                        });
                                    } else {
                                        obj.data.children.forEach(item => {
                                            if (that[item.id]) that.map.imageryLayers.remove(that[item.id]);
                                        });
                                    }
                                }
@@ -266,26 +332,72 @@
                                if (obj.checked == true) {
                                    $.ajax({
                                        url: obj.data.src + '/maps.json',
                                        type: 'get',
                                        dataType: 'JSON',
                                        success: function (res) {
                                            console.log(res, 123)
                                    if (obj.data.model) {
                                        var host = that.returnStr(obj.data.src).host;
                                        var scene = that.map.scene;
                                        var partOfUrl = that.returnStr(obj.data.src).partOfUrl;
                                        //添加S3M图层服务
                                        that[obj.data.id] = scene.open(host + partOfUrl);
                                        //定位到场景
                                        Cesium.loadJson(host + partOfUrl + '/scenes.json').then(function (scenes) {
                                            // var sname = scenes[0].name;
                                            // Cesium.loadJson(host + partOfUrl + '/scenes/' + sname + '.json').then(function (jsonData) {
                                            //     var cameraPosition = jsonData.camera;
                                            //     var tilt = Cesium.Math.toRadians(cameraPosition.tilt - 90);
                                            //     Cesium.when(promise, function (layer) {
                                            //         //设置相机位置、视角,便于观察场景
                                            //         scene.camera.setView({
                                            //             destination: new Cesium.Cartesian3.fromDegrees(cameraPosition.longitude, cameraPosition.latitude, cameraPosition.altitude),
                                            //             orientation: {
                                            //                 heading: cameraPosition.heading,
                                            //                 pitch: tilt,
                                            //                 roll: 0
                                            //             }
                                            //         });
                                            //         if (!scene.pickPositionSupported) {
                                            //             alert('不支持深度纹理,无法拾取位置!');
                                            //         }
                                            //     }, function (e) {
                                            //         if (widget._showRenderLoopErrors) {
                                            //             var title = '加载SCP失败,请检查网络连接状态或者url地址是否正确?';
                                            //             widget.showErrorPanel(title, undefined, e);
                                            //         }
                                            //     });
                                            // });
                                        });
                                            that[obj.data.id] = that.map.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
                                                url: res[0].path,
                                            }));
                                    } else {
                                        }
                                    })
                                        $.ajax({
                                            url: obj.data.src + '/maps.json',
                                            type: 'get',
                                            dataType: 'JSON',
                                            success: function (res) {
                                                console.log(res, 123)
                                                that[obj.data.id] = that.map.imageryLayers.addImageryProvider(new Cesium.SuperMapImageryProvider({
                                                    url: res[0].path,
                                                }));
                                                that[obj.data.id].alpha = obj.data.alpha
                                            }
                                        })
                                    }
                                } else {
                                    if (obj.data.model) {
                                        Cesium.when(that[obj.data.id], function (layer) {
                                            that.map.scene.layers.remove(layer[0].name)
                                        })
                                    that.map.imageryLayers.remove(that[obj.data.id]);
                                    } else {
                                        that.map.imageryLayers.remove(that[obj.data.id]);
                                    }
                                }
@@ -300,11 +412,94 @@
                            var depId = data.id;
                            var parentId = data.parentId;
                            if (type == 'add') {
                                $(".jimu-widget-LeftNavigationBar .tree-layer-opcity ul").empty();
                                console.log(type, data, elem, depId, parentId)
                                if (data.children) {
                                    data.children.forEach(item => {
                                        var liC = `<li>
                                        <div title="${item.title}">
                                            ${item.title}
                                        </div>
                                        <div id="${item.id + 'Layer'}">
                                        </div>
                                    </li>`;
                                        $(".jimu-widget-LeftNavigationBar .tree-layer-opcity ul").append(liC)
                                        $(".jimu-widget-LeftNavigationBar .tree-layer-opcity").stop().show();
                                        slider.render({
                                            elem: '#' + item.id + 'Layer',
                                            min: 0,
                                            max: 10,
                                            value: item.alpha * 10,
                                            step: 1,
                                            theme: '#1E9FFF',
                                            showstep: true,
                                            change: function (value) {
                                                item.alpha = value / 10
                                                if (that[item.id]) {
                                                    that[item.id].alpha = item.alpha
                                                }
                                            }
                                        });
                                    })
                                } else {
                                    var liC = `<li>
                                        <div title="${data.title}">
                                            ${data.title}
                                        </div>
                                        <div id="${data.id + 'Layer'}">
                                        </div>
                                    </li>`;
                                    $(".jimu-widget-LeftNavigationBar .tree-layer-opcity ul").append(liC)
                                    $(".jimu-widget-LeftNavigationBar .tree-layer-opcity").stop().show();
                                    slider.render({
                                        elem: '#' + data.id + 'Layer',
                                        min: 0,
                                        max: 10,
                                        value: data.alpha * 10,
                                        step: 1,
                                        theme: '#1E9FFF',
                                        showstep: true,
                                        change: function (value) {
                                            data.alpha = value / 10
                                            if (that[data.id]) {
                                                that[data.id].alpha = data.alpha
                                            }
                                        }
                                    });
                                }
                            }
                        }
                    });
                    console.log($("#left-tree-list > .layui-tree > div"))
                    var jqDom = $("#left-tree-list > .layui-tree > div");
                    for (var i = 0; i < jqDom.length; i++) {
                        if ($(jqDom[i]).text().indexOf("三维倾斜数据") != -1) {
                            $(jqDom[i]).find('.layui-btn-group').remove()
                        }
                    }
                    //按钮事件
                    util.event('lay-demo', {
@@ -329,6 +524,14 @@
                    });
                })
            },
            returnStr: function (url) {
                var startIndex = url.indexOf("/iserver");
                var endIndex = url.indexOf("/scenes");
                return {
                    host: url.substring(0, startIndex),
                    partOfUrl: url.substring(startIndex, endIndex)
                }
            },
            changeImg: true,
            father: [],
            data: [{
widgets/LeftNavigationBar/css/style.css
@@ -182,4 +182,43 @@
.jimu-widget-LeftNavigationBar .layui-btn-group .layui-icon:before {
  content: "";
}
.jimu-widget-LeftNavigationBar .tree-layer-opcity {
  display: none;
  position: absolute;
  top: 240px;
  left: 280px;
  width: 260px;
  height: auto;
  background: #Fff;
  border-radius: 5px;
  box-shadow: 0 0 8px #fff;
}
.jimu-widget-LeftNavigationBar .tree-layer-opcity h3 {
  margin: 0;
  height: 36px;
  line-height: 36px;
  text-align: center;
}
.jimu-widget-LeftNavigationBar .tree-layer-opcity .close {
  position: absolute;
  top: 4px;
  right: 4px;
}
.jimu-widget-LeftNavigationBar .tree-layer-opcity li>div:first-child {
  padding: 0 10px;
  line-height: 28px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.jimu-widget-LeftNavigationBar .tree-layer-opcity li>div:last-child {
  margin: 10px 10px;
  width: calc(100% - 20px);
}