赣州市洪水风险预警系统三维版本
xiebin
2023-02-17 f46809e0c7b8d78f681f17deec7c3bd8b472575a
修改系统切换样式
2 files modified
122 ■■■■■ changed files
index.html 117 ●●●●● patch | view | raw | blame | history
widgets/Layermanagement/Widget.js 5 ●●●●● patch | view | raw | blame | history
index.html
@@ -127,84 +127,50 @@
    <body class="claro jimu-main-font">
        <style>
            .qhdiv {
                z-index:10000;
                position: fixed;
                top: calc(40% - 90px);
                transform: translate(0, -50%);
                right: 20px;
                display: flex;
                flex-direction: column;margin: 0;
                width: 55px;
                height: 100px;
                text-align: center
            }
            .qhbtn {
                border: 0;
                width: 50px;
                height: 50px;
                background: url('images/qh001.jpg');
                background-size: 100%;
                border-radius: 50%;
                cursor: pointer;
            }
            .qhbtn:before, .qhbtn:after {
                opacity: 0; /*透明度为完全透明*/
            .ss {
                border-radius: 5px;
                height: 32px;
                width: 32px;
                position: absolute;
                z-index: 100000; /*设为最上层*/
                /*鼠标放上元素上时的动画,鼠标放上后效果在.tip-*:hover:before, .tip-*:hover:after中设置;
                0.3s:规定完成过渡效果需要多少秒或毫秒,ease:规定慢速开始,然后变快,然后慢速结束的过渡效果*/
                transition: 0.3s ease;
                -webkit-transition: 0.3s ease;
                -moz-transition: 0.3s ease;
            }
            .qhbtn:before {
                content: '切换2D';
                border: 6px solid transparent;
                white-space: nowrap; /*强制不换行*/
                background-color: #000000;
                color: #ffffff;
            .map3d-system {
                background: #303336 url('images/3d-2-03.png');
                border: 1px solid #303336;
                background-size: cover;
                z-index:6;
                cursor:pointer;
                right: 0.7%;
                bottom: 25%;
            }
            .qhbtn:after {
                content: '切换2D'; /*获取要提示的文本*/
                padding: 5px;
                white-space: nowrap; /*强制不换行*/
                background-color: #000000;
                color: #ffffff;
            .map3d-system:hover{
                color: #fff;
                fill: #fff;
                background: #48b url('images/3d-2-03.png');
                background-size: cover;
                border-color: #aef;
                box-shadow: 0 0 8px #fff;
            }
            .qhbtn:hover:before, .tip:hover:after {
                opacity: 1; /*鼠标放上时透明度为完全显示*/
                z-index: 1000;
            .map3d-2d {
                background: #303336 url('images/2d-2-02.png');
                border: 1px solid #303336;
                background-size: cover;
                z-index:6;
                cursor:pointer;
                right: 3.5%;
                bottom: 25%;
            }
            .tip-left:before {
                top: 50%;
                left: 0%;
                border-left-color: rgba(0, 0, 0, 0.8);
                margin-left: 0px;
                margin-top: -3px;
            }
            .tip-left:after {
                top: 50%;
                right: 100%;
                margin-right: 0px;
                margin-top: -6px;
            }
            .tip-left:hover:before {
                margin-left: -6px;
            }
            .tip-left:hover:after {
                margin-right: 6px;
            .map3d-2d:hover{
                color: #fff;
                fill: #fff;
                background: #48b url('images/2d-2-02.png');
                background-size: cover;
                border-color: #aef;
                box-shadow: 0 0 8px #fff;
            }
        </style>
        <div class="qhdiv" onclick="javascript:window.location='http://localhost:63342/hsyj/index.html'">
            <button type="button" class="qhbtn tip-left" data-tip="我是上边提示"><span style="color:dodgerblue;"></span></button>
        </div>
        <div class="map3d-system ss" id="map3d" title="系统切换" onclick="map3dClick()"></div>
        <div class="map3d-2d ss" id="map2d" title="切换2D"></div>
        <div id="main-loading">
            <div id="app-loading"></div>
            <div id="loading-gif"></div>
@@ -233,6 +199,7 @@
          </script> -->
        <script type="text/javascript" src="init.js"></script>
        <script>
            $('#map2d').hide();
            function runWidget(name) {
                require(['dojo/topic'],
                    function(topic) {
@@ -240,6 +207,14 @@
                });
            }
            function map3dClick() {
                if($('#map2d').is(':hidden')){  //如果node是隐藏的则显示node元素,否则隐藏
                    $('#map2d').show();
                }else{
                    $('#map2d').hide();
                }
            }
        </script>
    </body>
</html>
widgets/Layermanagement/Widget.js
@@ -62,7 +62,7 @@
            onOpen: function () {
                var self = this;
                // this.map.scene.globe.depthTestAgainstTerrain = false;
                // this.map.scene.globe.depthTestAgainstTerrain = false;
                $.ajax({
                    url: 'http://localhost:82/blade-ycreal/layer/list',
                    dataType: 'json',
@@ -86,7 +86,7 @@
                                var result = null;
                                // 存储url最后面数字的
                                var layersNumber = null;
                                // 存储 true, false
                                // 存储 true, false
                                var layerShow = null;
                                // 存储除数字外的URL
                                var layersUrl = null;
@@ -236,6 +236,7 @@
            },
            // 注册鼠标左键单击事件
            clickHandLayer: function (movement) {
                $('#map2d').hide();
                var self = this;
                var pickRay = this.map.camera.getPickRay(movement.position);
                var featuresPromise = this.map.imageryLayers.pickImageryLayerFeatures(pickRay, this.map.scene);