底部按钮 移至工具按钮左边

liuyg

2021-06-18 4d8e4cfbbef3b9fc8004960ae7c922e0be7d506b

底部按钮 移至工具按钮左边

 config.json

@@ -189,7 +189,14 @@
      },
      {
        "name": "视角底部按钮",
        "uri": "widgets/visualAngle/Widget"
        "uri": "widgets/visualAngle/Widget",
        "position": {
          "right": 168,
          "top": 20,
          "height": "36px",
          "width": "142px",
          "relativeTo": "map"
        }
      },
      {
        "name": "图例",

 widgets/Tool/css/style.css

@@ -6,7 +6,7 @@
  /* 240px */
  background: rgb(254, 254, 254);
  color: #838383;
  border-radius: 6px 0 0 6px;
  /* border-radius: 6px 0 0 6px; */
  text-align: center;
  cursor: pointer;
  z-index: 13 !important

 widgets/visualAngle/Widget.html

@@ -1,14 +1,14 @@
<div>
    <div class="visualAngleOnce v-a-One on">
    <!-- <div class="visualAngleOnce v-a-One on" >
        <img class="v-a-o-img" src="./images/自主体验-1.png" alt="">
        <div class="v-a-o-title">自主体验</div>
    </div>
        <div class="v-a-o-title">自主</div>
    </div> -->
    <div class="visualAngleOnce v-a-Two">
        <img class="v-a-o-img" src="./images/漫游体验.png" alt="">
        <div class="v-a-o-title">漫游体验</div>
        <div class="v-a-o-title">漫游</div>
    </div>
    <div class="visualAngleOnce v-a-Three">
    <div class="visualAngleOnce v-a-Three" style="border-right: 1px solid #DDDDDD;">
        <img class="v-a-o-img" src="./images/固定视角.png" alt="">
        <div class="v-a-o-title">固定视角</div>
        <div class="v-a-o-title">固定</div>
    </div>
</div>

 widgets/visualAngle/Widget.js

@@ -29,34 +29,44 @@
            layers: {},
            startup: function () {
                // 暴露在外的接口
                var that = this;
                $(".v-a-One").click(function () {
                    topic.publish('closeFlyRoute', 'FlyRoute');
                    $(this).addClass('on').siblings().removeClass('on');
                var that = this,
                    isFixed = false,
                    isFly = false
                    , noFixed = () => {
                        // $(this).addClass('on').siblings().removeClass('on');
                    // 控制视角平移：
                    that.map.scene.screenSpaceCameraController.enableRotate = true;

                    // true: 允许左键按下视角平移；

                    // false: 禁止左键按下视角平移；

                    // 控制视角缩放：
                    that.map.scene.screenSpaceCameraController.enableZoom = true;

                    // true: 允许中键缩放视角；

                    // false:禁止中键缩放视角；

                    // 控制视角旋转：
                    that.map.scene.screenSpaceCameraController.enableTilt = true;

                    // true:允许视角旋转；

                    // false:禁止视角旋转；
                    };

                })
                // $(".v-a-One").click(function () {
                //     topic.publish('closeFlyRoute', 'FlyRoute');
                //     $(this).addClass('on').siblings().removeClass('on');
                //     // 控制视角平移：
                //     that.map.scene.screenSpaceCameraController.enableRotate = true;
                //     // true: 允许左键按下视角平移；
                //     // false: 禁止左键按下视角平移；
                //     // 控制视角缩放：
                //     that.map.scene.screenSpaceCameraController.enableZoom = true;
                //     // true: 允许中键缩放视角；
                //     // false:禁止中键缩放视角；
                //     // 控制视角旋转：
                //     that.map.scene.screenSpaceCameraController.enableTilt = true;
                //     // true:允许视角旋转；
                //     // false:禁止视角旋转；

                // })
                $(".v-a-Two").click(function () {
                    $(this).addClass('on').siblings().removeClass('on');

                    // 关闭量算
                    topic.publish('closeMeasurement', 'Measurement');
                    // 关闭卷帘
@@ -68,18 +78,36 @@
                    // 飞行路线
                    $('.jimu-widget-CoorPosition').hide();
                    $('.jimu-widget-MapPrinting').hide();

                    topic.publish('openFlyRoute', 'FlyRoute');

                    $('.tool-y-box').stop().hide();

                    noFixed();
                    if (isFly) {
                        $(this).removeClass('on');
                        console.log('关闭飞行')
                        topic.publish('closeFlyRoute', 'FlyRoute');
                    } else {
                        $(this).addClass('on').siblings().removeClass('on');
                        console.log('开启飞行')
                        topic.publish('openFlyRoute', 'FlyRoute');
                    }
                    isFixed = false;
                    isFly = !isFly;
                })
                $(".v-a-Three").click(function () {
                    if (isFixed) {
                        $(this).removeClass('on');
                        topic.publish('closeFlyRoute', 'FlyRoute');
                        noFixed();
                        console.log('关闭固定')
                    } else {
                        console.log('开启固定')
                    topic.publish('closeFlyRoute', 'FlyRoute');
                    $(this).addClass('on').siblings().removeClass('on');
                    that.map.scene.screenSpaceCameraController.enableRotate = false
                    that.map.scene.screenSpaceCameraController.enableZoom = true
                    that.map.scene.screenSpaceCameraController.enableTilt = false
                    }
                    isFly = false;
                    isFixed = !isFixed;
                })

            },

 widgets/visualAngle/css/style.css

@@ -1,20 +1,20 @@
.jimu-widget-visualAngle {
  position: fixed;
  font-size: 14px;
  height: 72px !important;
  /* height: 72px !important; */
  /* line-height  : 32px; */
  width: 216px !important;
  right: auto !important;
  top: auto !important;
  bottom: 30px !important;
  left: calc(50% - 90px) !important;
  /* width: 216px !important; */
  /* right: auto !important; */
  /* top: auto !important; */
  /* bottom: 30px !important; */
  /* left: calc(50% - 90px) !important; */
  /* 240px */
  background: rgba(255, 255, 255, 1);
  background: rgba(254, 254, 254, 1);
  /* border : 1px solid #000; */
  border-radius: 6px;
  border-radius: 6px 0 0 6px;
  text-align: center;
  /* cursor       : pointer; */
  z-index: 10 !important;
  z-index: 13 !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
@@ -25,26 +25,26 @@
  width: 72px;
  box-sizing: border-box;
  /* border: 1px solid springgreen; */
  height: 72px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* flex-direction: column; */
  font-size: 13px;

}

.jimu-widget-visualAngle .visualAngleOnce .v-a-o-title {
  color: #969696 !important;
  position: relative;
  left: 3px;
}

.jimu-widget-visualAngle .visualAngleOnce.on {
  background-color: #3F9DFD;
}

.jimu-widget-visualAngle .visualAngleOnce.on img,
.jimu-widget-visualAngle .visualAngleOnce.on div {
.jimu-widget-visualAngle .visualAngleOnce.on img, .jimu-widget-visualAngle .visualAngleOnce.on div {
  filter: grayscale(100%) brightness(200%);
}

@@ -54,11 +54,14 @@
}

.jimu-widget-visualAngle .visualAngleOnce:nth-child(3) {
  border-radius: 0 6px 6px 0;
  /* border-radius: 0 6px 6px 0; */
  border-left: 1px solid rgba(155, 155, 155, 0.2);
}

.jimu-widget-visualAngle .v-a-o-img {
  position: relative;
  top: 5px;
  left: -2px;
  width: 20px;
  margin-bottom: 8px;
}