From 4d8e4cfbbef3b9fc8004960ae7c922e0be7d506b Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Fri, 18 Jun 2021 15:56:44 +0800
Subject: [PATCH] 底部按钮 移至工具按钮左边
---
config.json | 9 ++
widgets/visualAngle/Widget.html | 12 ++--
widgets/visualAngle/Widget.js | 116 ++++++++++++++++++++++++--------------
widgets/visualAngle/css/style.css | 33 ++++++-----
widgets/Tool/css/style.css | 2
5 files changed, 105 insertions(+), 67 deletions(-)
diff --git a/config.json b/config.json
index 120579c..3e8f3e5 100644
--- a/config.json
+++ b/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": "图例",
diff --git a/widgets/Tool/css/style.css b/widgets/Tool/css/style.css
index 9230563..d1a52a0 100644
--- a/widgets/Tool/css/style.css
+++ b/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
diff --git a/widgets/visualAngle/Widget.html b/widgets/visualAngle/Widget.html
index dbef234..4f0b2e2 100644
--- a/widgets/visualAngle/Widget.html
+++ b/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>
\ No newline at end of file
diff --git a/widgets/visualAngle/Widget.js b/widgets/visualAngle/Widget.js
index 8d32cbb..5438f0e 100644
--- a/widgets/visualAngle/Widget.js
+++ b/widgets/visualAngle/Widget.js
@@ -3,16 +3,16 @@
// 模块描述:显示坐标
///////////////////////////////////////////////////////////////////////////
define([
- 'dojo/_base/declare',
- 'dojo/_base/lang',
- 'dojo/_base/array',
- 'dojo/_base/html',
- 'dojo/topic',
- 'jimu/BaseWidget',
- 'jimu/utils',
- 'jimu/css!libs/zTree_v3/css/zTreeStyle/zTreeStyle.css',
- 'libs/zTree_v3/js/jquery.ztree.all'
- ],
+ 'dojo/_base/declare',
+ 'dojo/_base/lang',
+ 'dojo/_base/array',
+ 'dojo/_base/html',
+ 'dojo/topic',
+ 'jimu/BaseWidget',
+ 'jimu/utils',
+ 'jimu/css!libs/zTree_v3/css/zTreeStyle/zTreeStyle.css',
+ 'libs/zTree_v3/js/jquery.ztree.all'
+],
function (declare,
lang,
array,
@@ -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');
- // 控制视角平移：
- that.map.scene.screenSpaceCameraController.enableRotate = true;
+ 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:禁止视角旋转；
+ };
- // true: 允许左键按下视角平移；
+ // $(".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:禁止视角旋转；
- // 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 () {
- 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
+ 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;
})
},
diff --git a/widgets/visualAngle/css/style.css b/widgets/visualAngle/css/style.css
index 1d0925f..d713e49 100644
--- a/widgets/visualAngle/css/style.css
+++ b/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;
}
\ No newline at end of file
--
Gitblit v1.9.3