分屏相关的完善

shuishen

2021-06-04 022acc43fee86a64020fff06f9bb6ea9f78a6785

分屏相关的完善

 widgets/SplitScreen/Widget.html

@@ -10,8 +10,10 @@

        

        <button id="viewportType">
            不使用分屏
        <button id="viewportType" value="NONE">
            <span>
                不使用分屏
            </span>
            <i class="layui-icon">
                &#xe625;
            </i>

 widgets/SplitScreen/Widget.js

@@ -20,74 +20,89 @@
                var that = this;
                // 点击x隐藏面板
                $('#viewportType').change(function () {
                    var value = $(this).val();
                    switch (value) {
                        case "NONE":
                            $("#split_up").css("display", "none");
                            $("#split_bottom").css("display", "none");
                            $("#split_left").css("display", "none");
                            $("#split_right").css("display", "none");
                            $("#split_vertical_trisection_left").css("display", "none");
                            $("#split_vertical_trisection_right").css("display", "none");
                            $('#pannel').hide();
                            break;
                        case "HORIZONTAL":
                            $("#split_up").css("display", "block");
                            $("#split_bottom").css("display", "block");
                            $("#split_left").css("display", "none");
                            $("#split_right").css("display", "none");
                            $("#split_vertical_trisection_left").css("display", "none");
                            $("#split_vertical_trisection_right").css("display", "none");
                            $('#pannel').show();
                            $('#b_one,#b_two,#g_one,#g_two').show();
                            $('#b_three,#g_three,#b_four,#g_four').hide();
                            break;
                        case "VERTICAL":
                            $("#split_up").css("display", "none");
                            $("#split_bottom").css("display", "none");
                            $("#split_left").css("display", "block");
                            $("#split_right").css("display", "block");
                            $("#split_vertical_trisection_left").css("display", "none");
                            $("#split_vertical_trisection_right").css("display", "none");
                            $('#pannel').show();
                            $('#b_one,#b_two,#g_one,#g_two').show();
                            $('#b_three,#g_three,#b_four,#g_four').hide();
                            break;
                        case "TRIPLE":
                            $("#split_up").css("display", "block");
                            $("#split_bottom").css("display", "none");
                            $("#split_left").css("display", "block");
                            $("#split_right").css("display", "block");
                            $("#split_vertical_trisection_left").css("display", "none");
                            $("#split_vertical_trisection_right").css("display", "none");
                            $('#pannel').show();
                            $('#b_one,#b_two,#g_one,#g_two,#b_three,#g_three').show();
                            $('#b_four,#g_four').hide();
                            break;
                        case "VerticalTrisection":
                            $("#split_up").css("display", "none");
                            $("#split_bottom").css("display", "none");
                            $("#split_left").css("display", "none");
                            $("#split_right").css("display", "none");
                            $("#split_vertical_trisection_left").css("display", "block");
                            $("#split_vertical_trisection_right").css("display", "block");
                            $('#b_one,#b_two,#g_one,#g_two,#b_three,#g_three').show();
                            $('#b_four,#g_four').hide();
                            $('#pannel').show();
                            break;
                        default:
                            $("#split_up").css("display", "block");
                            $("#split_bottom").css("display", "block");
                            $("#split_left").css("display", "block");
                            $("#split_right").css("display", "block");
                            $("#split_vertical_trisection_left").css("display", "none");
                            $("#split_vertical_trisection_right").css("display", "none");
                            $('#pannel').show();
                            $('#b_one,#b_two,#g_one,#g_two,#b_three,#g_three,#b_four,#g_four').show();
                            break;
                    }
                    that.map.scene.multiViewportMode = Cesium.MultiViewportMode[value];

                });

                $('#viewportType').click(function () {
                    $(".split-select .split-select-option").toggle();
                })

                $(".split-select .split-select-option li").click(function () {

                    if ($(this).text() != $('#viewportType span').text()) {
                        $('#viewportType span').text($(this).text())
                        var value = $(this).attr('label');
                        switch (value) {
                            case "NONE":
                                $("#split_up").css("display", "none");
                                $("#split_bottom").css("display", "none");
                                $("#split_left").css("display", "none");
                                $("#split_right").css("display", "none");
                                $("#split_vertical_trisection_left").css("display", "none");
                                $("#split_vertical_trisection_right").css("display", "none");
                                $('#pannel').hide();
                                break;
                            case "HORIZONTAL":
                                $("#split_up").css("display", "block");
                                $("#split_bottom").css("display", "block");
                                $("#split_left").css("display", "none");
                                $("#split_right").css("display", "none");
                                $("#split_vertical_trisection_left").css("display", "none");
                                $("#split_vertical_trisection_right").css("display", "none");
                                $('#pannel').show();
                                $('#b_one,#b_two,#g_one,#g_two').show();
                                $('#b_three,#g_three,#b_four,#g_four').hide();
                                break;
                            case "VERTICAL":
                                $("#split_up").css("display", "none");
                                $("#split_bottom").css("display", "none");
                                $("#split_left").css("display", "block");
                                $("#split_right").css("display", "block");
                                $("#split_vertical_trisection_left").css("display", "none");
                                $("#split_vertical_trisection_right").css("display", "none");
                                $('#pannel').show();
                                $('#b_one,#b_two,#g_one,#g_two').show();
                                $('#b_three,#g_three,#b_four,#g_four').hide();
                                break;
                            case "TRIPLE":
                                $("#split_up").css("display", "block");
                                $("#split_bottom").css("display", "none");
                                $("#split_left").css("display", "block");
                                $("#split_right").css("display", "block");
                                $("#split_vertical_trisection_left").css("display", "none");
                                $("#split_vertical_trisection_right").css("display", "none");
                                $('#pannel').show();
                                $('#b_one,#b_two,#g_one,#g_two,#b_three,#g_three').show();
                                $('#b_four,#g_four').hide();
                                break;
                            case "VerticalTrisection":
                                $("#split_up").css("display", "none");
                                $("#split_bottom").css("display", "none");
                                $("#split_left").css("display", "none");
                                $("#split_right").css("display", "none");
                                $("#split_vertical_trisection_left").css("display", "block");
                                $("#split_vertical_trisection_right").css("display", "block");
                                $('#b_one,#b_two,#g_one,#g_two,#b_three,#g_three').show();
                                $('#b_four,#g_four').hide();
                                $('#pannel').show();
                                break;
                            default:
                                $("#split_up").css("display", "block");
                                $("#split_bottom").css("display", "block");
                                $("#split_left").css("display", "block");
                                $("#split_right").css("display", "block");
                                $("#split_vertical_trisection_left").css("display", "none");
                                $("#split_vertical_trisection_right").css("display", "none");
                                $('#pannel').show();
                                $('#b_one,#b_two,#g_one,#g_two,#b_three,#g_three,#b_four,#g_four').show();
                                break;
                        }
                        that.map.scene.multiViewportMode = Cesium.MultiViewportMode[value];

                        $(".split-select .split-select-option").stop().hide();
                    }
                })

            },

            onOpen: function () {

 widgets/SplitScreen/css/style.css

@@ -40,7 +40,7 @@
  width: 160px;
  height: 30px;
  background: #fff;
  border-radius: 10px;
  border-radius: 5px;
  font-size: 14px;
  padding: 0 6px;
  text-align: left;