页面布局

liuyg

2021-06-03 c4c31a66bb4a6c3a814712b333a924d2dc8b4a2c

页面布局

 config.json

@@ -32,10 +32,10 @@
      {
        "uri": "widgets/Tool/Widget",
        "position": {
          "right": 82,
          "right": 96,
          "top": 20,
          "height": "32px",
          "width": "96px",
          "width": "86px",
          "relativeTo": "map"
        }
      },
@@ -45,7 +45,7 @@
          "right": 10,
          "top": 20,
          "height": "32px",
          "width": "72px",
          "width": "86px",
          "relativeTo": "map"
        }
      },
@@ -155,6 +155,15 @@
      }, {
        "name": "搜索栏",
        "uri": "widgets/searchL/Widget"
      }, {
        "name": "视角底部按钮",
        "uri": "widgets/visualAngle/Widget"
      }, {
        "name": "图例",
        "uri": "widgets/legends/Widget"
      }, {
        "name": "左侧信息指示器",
        "uri": "widgets/instructions/Widget"
      }
    ],
    "groups": [],

 images/addL/bquanqiu.png

 images/addL/bshijiao.png

 images/addL/btiyan.png

 images/addL/dwblue.png

 images/addL/dworgin.png

 images/addL/fblue.png

 images/addL/forgin.png

 images/addL/fred.png

 images/addL/leftdidian.png

 images/addL/wquanqiu.png

 images/addL/wshijiao.png

 images/addL/wtiyan.png

 images/ditu.png

 images/gongju.png

 images/toolback1.png

 images/toolbottom1.png

 images/toolbox1.png

 libs/Cesium/Widgets/NavigationHelpButton/NavigationHelpButton.css

@@ -1 +1,112 @@
.cesium-navigationHelpButton-wrapper{position:relative;display:inline-block;}.cesium-navigation-help{visibility:hidden;position:absolute;top:38px;right:2px;width:250px;border-radius:10px;transform:scale(0.01);transform-origin:234px -10px;transition:visibility 0s 0.25s,transform 0.25s ease-in;}.cesium-navigation-help-visible{visibility:visible;transform:scale(1);transition:transform 0.25s ease-out;}.cesium-navigation-help-instructions{border:1px solid #444;background-color:rgba(38,38,38,0.75);padding-bottom:5px;border-radius:0 0 10px 10px;}.cesium-click-navigation-help{display:none;}.cesium-touch-navigation-help{display:none;padding-top:5px;}.cesium-click-navigation-help-visible{display:block;}.cesium-touch-navigation-help-visible{display:block;}.cesium-navigation-help-pan{color:#66ccff;font-weight:bold;}.cesium-navigation-help-zoom{color:#65fd00;font-weight:bold;}.cesium-navigation-help-rotate{color:#ffd800;font-weight:bold;}.cesium-navigation-help-tilt{color:#d800d8;font-weight:bold;}.cesium-navigation-help-details{color:#ffffff;}.cesium-navigation-button{color:#fff;background-color:transparent;border-bottom:none;border-top:1px solid #444;border-right:1px solid #444;margin:0;width:50%;cursor:pointer;}.cesium-navigation-button-icon{vertical-align:middle;padding:5px 1px;}.cesium-navigation-button:focus{outline:none;}.cesium-navigation-button-left{border-radius:10px 0 0 0;border-left:1px solid #444;}.cesium-navigation-button-right{border-radius:0 10px 0 0;border-left:none;}.cesium-navigation-button-selected{background-color:rgba(38,38,38,0.75);}.cesium-navigation-button-unselected{background-color:rgba(0,0,0,0.75);}.cesium-navigation-button-unselected:hover{background-color:rgba(76,76,76,0.75);}
.cesium-navigationHelpButton-wrapper {
    position: relative;
    display: inline-block;
}

.cesium-navigation-help {
    visibility: hidden;
    position: absolute;
    top: 38px;
    right: 2px;
    width: 250px;
    border-radius: 10px;
    transform: scale(0.01);
    transform-origin: 234px -10px;
    transition: visibility 0s 0.25s, transform 0.25s ease-in;
}

.cesium-navigation-help-visible {
    visibility: visible;
    transform: scale(1);
    transition: transform 0.25s ease-out;
}

.cesium-navigation-help-instructions {
    border: 1px solid #444;
    background-color: rgba(38, 38, 38, 0.75);
    padding-bottom: 5px;
    border-radius: 0 0 10px 10px;
}

.cesium-click-navigation-help {
    display: none;
}

.cesium-touch-navigation-help {
    display: none;
    padding-top: 5px;
}

.cesium-click-navigation-help-visible {
    display: block;
}

.cesium-touch-navigation-help-visible {
    display: block;
}

.cesium-navigation-help-pan {
    color: #66ccff;
    font-weight: bold;
}

.cesium-navigation-help-zoom {
    color: #65fd00;
    font-weight: bold;
}

.cesium-navigation-help-rotate {
    color: #ffd800;
    font-weight: bold;
}

.cesium-navigation-help-tilt {
    color: #d800d8;
    font-weight: bold;
}

.cesium-navigation-help-details {
    color: #ffffff;
}

.cesium-navigation-button {
    color: #fff;
    background-color: transparent;
    border-bottom: none;
    border-top: 1px solid #444;
    border-right: 1px solid #444;
    margin: 0;
    width: 50%;
    cursor: pointer;
}

.cesium-navigation-button-icon {
    vertical-align: middle;
    padding: 5px 1px;
}

.cesium-navigation-button:focus {
    outline: none;
}

.cesium-navigation-button-left {
    border-radius: 10px 0 0 0;
    border-left: 1px solid #444;
}

.cesium-navigation-button-right {
    border-radius: 0 10px 0 0;
    border-left: none;
}

.cesium-navigation-button-selected {
    background-color: rgba(38, 38, 38, 0.75);
}

.cesium-navigation-button-unselected {
    background-color: rgba(0, 0, 0, 0.75);
}

.cesium-navigation-button-unselected:hover {
    background-color: rgba(76, 76, 76, 0.75);
}

 widgets/Basemap/Widget.html

@@ -1,3 +1,3 @@
<div>
    <div class="base-map"><i></i> <span>底图</span></div>
    <div class="base-map"><i></i> <span>底图</span><del></del> </div>
</div>

 widgets/Basemap/css/style.css

@@ -3,9 +3,9 @@
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  width: 100%;   
  background: rgba(44, 46, 46, 0.75);
  color: #fff;
  width: 100%;
  background: rgba(255, 255, 255, 0.75);
  color: #000;
  border-radius: 0 6px 6px 0;
  text-align: center;
  cursor: pointer;
@@ -14,15 +14,42 @@

.jimu-widget-Basemap .base-map {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.jimu-widget-Basemap .base-map i {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../../../images/baseMapSmall.png) no-repeat;
  background-size: 16px;
  width: 22px;
  height: 22px;
  background: url(../../../images/ditu.png) no-repeat;
  background-size: 22px;
  vertical-align: middle;
}

.jimu-widget-Basemap .base-map del {
  display: inline-block;
  width: 10px;
  height: 6px;
  background: url(../../../images/toolbottom1.png) no-repeat;
  background-size: 10px 6px;
  /* vertical-align: / */
}

.jimu-widget-Basemap .base-map span:hover {
  text-decoration: underline;
}

/* 弹窗样式 */

.cesium-baseLayerPicker-dropDown {
  background-color: rgba(255, 255, 255, 0.7);
}

.cesium-baseLayerPicker-sectionTitle, .cesium-baseLayerPicker-itemLabel {
  color: #000;
}
.cesium-baseLayerPicker-selectedItem .cesium-baseLayerPicker-itemLabel{
  color: rgb(16, 120, 218);
}

 widgets/HelpButton/css/style.css

@@ -1,12 +1,33 @@
.jimu-widget-helpbutton {
    width : 35px !important;
    width: 35px !important;
    height: 35px !important;
    margin: 2px;
}

.cesium-navigation-help {
    top  : -112px;
    top: -112px;
    right: 42px;
    width: 163px;
}

/* 右下角浮动窗口样式合集 */

/* .cesium-button {
    background-color: rgba(255, 255, 255, .75);
    fill: #389FF9;
    border: rgba(56, 159, 249, 0.75);
}

.cesium-button:hover {
    color: transparent;
    fill: #389FF9 !important;
} */

/* 操作指南inthere样式 */

/* .cesium-navigation-button{
    color: #000;
}
.cesium-navigation-button{
    background-color: rgba(255, 255, 255, .75);
} */

 widgets/Tool/css/style.css

@@ -5,9 +5,9 @@
  line-height  : 32px;
  width        : 100%;
  /* 240px */
  background   : rgba(44, 46, 46, 0.7);
  color        : #fff;
  border-right : 1px solid #000;
  background   : rgba(255, 255, 255, 0.7);
  color        : #000;
  border-right : 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 6px 0 0 6px;
  text-align   : center;
  cursor       : pointer;
@@ -17,13 +17,17 @@
.jimu-widget-Tool .tool-bar {
  width: 100%;
}

.jimu-widget-Tool .tool-bar .tool-btn{
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.jimu-widget-Tool .tool-bar .tool-btn i {
  display        : inline-block;
  width          : 16px;
  height         : 16px;
  background     : url(../../../images/toolback.png) no-repeat;
  background-size: 16px;
  width          : 22px;
  height         : 22px;
  background     : url(../../../images/gongju.png) no-repeat;
  background-size: 22px;
  vertical-align : middle;
}

@@ -35,7 +39,7 @@
  display          : inline-block;
  width            : 10px;
  height           : 6px;
  background       : url(../../../images/toolbottom.png) no-repeat;
  background       : url(../../../images/toolbottom1.png) no-repeat;
  background-size  : 10px 6px;
  /* vertical-align: / */
}
@@ -44,7 +48,7 @@
  display  : none;
  position : absolute;
  top      : 36px;
  right    : 0;
  right    : -5px;
  width    : 110px;
  /* height: 505px; */
  height   : 38px;
@@ -66,11 +70,11 @@
  height     : 34px;
  line-height: 34px;
  width      : 102px;
  background : rgba(95, 94, 94, .7);
  background : rgba(255, 255, 255, 0.7);
}

.jimu-widget-Tool .tool-bar .tool-y-box li:hover {
  background: rgb(5, 42, 90);
  background: rgba(61,159,250, .7);
}

.jimu-widget-Tool .tool-bar .tool-y-box li i {
@@ -82,42 +86,46 @@
  vertical-align : middle;
}


.jimu-widget-Tool .tool-bar .tool-y-box li:nth-child(1) {
  border-radius: 5px 5px 0 0;
}

.jimu-widget-Tool .tool-bar .tool-y-box li:nth-child(1) i {
  background: url(../../../images/toolbox.png ) no-repeat 0 0;
  background: url(../../../images/toolbox1.png ) no-repeat 0 0;
}

.jimu-widget-Tool .tool-bar .tool-y-box li:nth-child(2) i {
  background: url(../../../images/toolbox.png ) no-repeat 0 -141px;
  background: url(../../../images/toolbox1.png ) no-repeat 0 -141px;
}

.jimu-widget-Tool .tool-bar .tool-y-box li:nth-child(3) i {
  background: url(../../../images/toolbox.png ) no-repeat 0 -63px;
  background: url(../../../images/toolbox1.png ) no-repeat 0 -63px;
}

.jimu-widget-Tool .tool-bar .tool-y-box li:nth-child(4) i {
  background: url(../../../images/toolbox.png ) no-repeat 0 -110px;
  background: url(../../../images/toolbox1.png ) no-repeat 0 -110px;
}

.jimu-widget-Tool .tool-bar .tool-y-box li:nth-child(5) i {
  background: url(../../../images/toolbox.png ) no-repeat 0 -32px;
  background: url(../../../images/toolbox1.png ) no-repeat 0 -32px;
}

.jimu-widget-Tool .tool-bar .tool-y-box li:nth-child(6) i {
  background: url(../../../images/toolbox.png ) no-repeat 0 -126px;
  background: url(../../../images/toolbox1.png ) no-repeat 0 -126px;
}
.jimu-widget-Tool .tool-bar .tool-y-box li:nth-child(7) i {
  background: url(../../../images/toolbox.png ) no-repeat 0 -173px;
  background: url(../../../images/toolbox1.png ) no-repeat 0 -173px;
}

.jimu-widget-Tool .tool-bar .tool-y-box li:nth-child(8) i {
  background: url(../../../images/toolbox.png ) no-repeat 0 -16px;
  background: url(../../../images/toolbox1.png ) no-repeat 0 -16px;
}
.jimu-widget-Tool .tool-bar .tool-y-box li:nth-child(9) i {
  background: url(../../../images/toolbox.png ) no-repeat 0 -159px;
  background: url(../../../images/toolbox1.png ) no-repeat 0 -156px;
}

.jimu-widget-Tool .tool-bar .tool-y-box li:nth-child(9) {
  border-radius: 0 0 5px 5px;
}

/* .jimu-widget-Tool .tool-bar .tool-y-box li:nth-child(2) i {
  background: url(../../../images/toolbox.png ) no-repeat 0 -16px;

 widgets/instructions/Widget.html

New file
@@ -0,0 +1,4 @@
<div>
    <img src="../../images/addL/leftdidian.png" alt="">
    <div class="instructions-title">鄱阳湖保护区</div>
</div>

 widgets/instructions/Widget.js

New file
@@ -0,0 +1,68 @@
///////////////////////////////////////////////////////////////////////////
// Copyright © 2019 zhongsong. All Rights Reserved.
// 模块描述:显示坐标
///////////////////////////////////////////////////////////////////////////
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'
],
    function (declare,
        lang,
        array,
        html,
        topic,
        BaseWidget,
        aspect,
        string,
        utils
    ) {
        return declare([BaseWidget], {
            baseClass: 'jimu-widget-instructions',
            name: 'instructions',
            layers: {},
            startup: function () {
                // 暴露在外的接口

            },

            closeToolBox: function (item) {
            },

            onOpen: function () {
                //面板打开的时候触发 （when open this panel trigger）
            },

            onClose: function () {
                //面板关闭的时候触发 （when this panel is closed trigger）
            },

            onMinimize: function () {
                this.resize();
            },

            onMaximize: function () {
                this.resize();
            },

            resize: function () {

            },
            begin: function () {
            },

            destroy: function () {
                //销毁的时候触发
                //todo
                //do something before this func
                this.inherited(arguments);
            }

        });
    });

 widgets/instructions/css/style.css

New file
@@ -0,0 +1,35 @@
.jimu-widget-instructions {
  position: absolute !important;
  font-size: 14px;
  height: 50px !important;
  line-height: 32px;
  width: 200px !important;
  right: auto !important;
  bottom: auto !important;
  left: calc(10%) !important;
  top: 20px !important;
  /* 240px */
  background: rgba(255, 255, 255, 1);
  color: #fff;
  /* border : 1px solid rgba(0, 0, 0, 0.3); */
  border-radius: 6px 6px 6px 6px;
  /* text-align   : center; */
  /* cursor       : pointer; */
  z-index: 15 !important;
  box-sizing: border-box;
  /* padding: 0 20px 0 20px!important; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.jimu-widget-instructions img {
  width: 35px;
}

.jimu-widget-instructions .instructions-title {
  color: #5AA9FB;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing:1.5px;
}

 widgets/instructions/manifest.json

New file
@@ -0,0 +1,17 @@
{
  "name": "instructions",
  "2D": true,
  "3D": true,
  "platform": "HTML",
  "version": "2.10",
  "wabVersion": "2.10",
  "author": "yuanjy",
  "description": "",
  "copyright": "",
  "license": "",
  "properties": {
    "hasConfig": false,
    "inPanel": false,
    "hasVersionManager": false
  }
}

 widgets/instructions/nls/es/strings.js

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "instructions"
  })
);

 widgets/instructions/nls/strings.js

New file
@@ -0,0 +1,7 @@
define({
  root: ({
    _widgetLabel: "instructions"
  }),
  "es": 1,
  "zh-cn": 1
});

 widgets/instructions/nls/zh-cn/strings.js

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "左侧信息指示器"
  })
);

 widgets/legends/Widget.html

New file
@@ -0,0 +1,13 @@
<div>
    <div class="title">图层列表</div>
    <div class="main">
        <div class="m-init"> <i><img src="../../images/addL/dwblue.png"/></i> 全景站点 <i>(20个)</i> </div>
        <div class="m-init m-i-child"> <i></i> 大湖池<i>(1个)</i> </div>
        <div class="m-init m-i-child"> <i></i> 战备胡 <i>(1个)</i> </div>
        <div class="m-init"> <i><img src="../../images/addL/dworgin.png"/></i> 监控站点 <i>(50个)</i> </div>
        <div class="m-init m-i-child"> <i></i> 大湖池 <i>(1个)</i> </div>
        <div class="m-init"> <i><img src="../../images/addL/forgin.png"/></i> 鄱阳湖面积 <i>(3253.52公顷)</i> </div>
        <div class="m-init"> <i><img src="../../images/addL/fred.png"/></i> 鄱阳湖范围 <i></i> </div>
        <div class="m-init"> <i><img src="../../images/addL/fblue.png"/></i> 其他 <i></i> </div>
    </div>
</div>

 widgets/legends/Widget.js

New file
@@ -0,0 +1,68 @@
///////////////////////////////////////////////////////////////////////////
// Copyright © 2019 zhongsong. All Rights Reserved.
// 模块描述:显示坐标
///////////////////////////////////////////////////////////////////////////
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'
],
    function (declare,
        lang,
        array,
        html,
        topic,
        BaseWidget,
        aspect,
        string,
        utils
    ) {
        return declare([BaseWidget], {
            baseClass: 'jimu-widget-legends',
            name: 'legends',
            layers: {},
            startup: function () {
                // 暴露在外的接口

            },

            closeToolBox: function (item) {
            },

            onOpen: function () {
                //面板打开的时候触发 （when open this panel trigger）
            },

            onClose: function () {
                //面板关闭的时候触发 （when this panel is closed trigger）
            },

            onMinimize: function () {
                this.resize();
            },

            onMaximize: function () {
                this.resize();
            },

            resize: function () {

            },
            begin: function () {
            },

            destroy: function () {
                //销毁的时候触发
                //todo
                //do something before this func
                this.inherited(arguments);
            }

        });
    });

 widgets/legends/css/style.css

New file
@@ -0,0 +1,59 @@
.jimu-widget-legends {
  position: absolute !important;
  font-size: 14px;
  height: 320px !important;
  line-height: 32px;
  width: 280px !important;
  right: 60px !important;
  bottom: 40px !important;
  left: auto !important;
  top: auto !important;
  /* 240px */
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  /* border-right : 1px solid rgba(0, 0, 0, 0.3); */
  border-radius: 6px 6px 6px 6px;
  /* text-align   : center; */
  /* cursor       : pointer; */
  z-index: 15 !important;
  box-sizing: border-box;
  padding: 0 20px 0 20px!important;
}

.jimu-widget-legends .title {
  margin: 10px 0 7px 0;
  font-size: 1.1rem;
}

.jimu-widget-legends .main .m-init {
  width: 100%;
  height: 2rem;
  flex-direction: row;
  display: flex;
  align-items: center;
  font-size: 1.1rem;
}

.jimu-widget-legends .main .m-init i {
  display: inline-block;
  font-style: normal;
}

.jimu-widget-legends .main .m-init i:nth-child(1) {
  display: inline-block;
  width: 20px;
  height: 1.5rem;
  /* border: 1px solid springgreen; */
  background-size: 100%;
  margin-right: 15px;
}

.jimu-widget-legends .main .m-init img {
  width: 30px;
  position: relative;
  top: -5.5px;
}

.jimu-widget-legends .main .m-i-child i:nth-child(1) {
  margin-right: 31px !important;
}

 widgets/legends/manifest.json

New file
@@ -0,0 +1,17 @@
{
  "name": "legends",
  "2D": true,
  "3D": true,
  "platform": "HTML",
  "version": "2.10",
  "wabVersion": "2.10",
  "author": "yuanjy",
  "description": "",
  "copyright": "",
  "license": "",
  "properties": {
    "hasConfig": false,
    "inPanel": false,
    "hasVersionManager": false
  }
}

 widgets/legends/nls/es/strings.js

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "legends"
  })
);

 widgets/legends/nls/strings.js

New file
@@ -0,0 +1,7 @@
define({
  root: ({
    _widgetLabel: "legends"
  }),
  "es": 1,
  "zh-cn": 1
});

 widgets/legends/nls/zh-cn/strings.js

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "图例"
  })
);

 widgets/searchL/Widget.js

@@ -31,7 +31,7 @@

                //关键词&&坐标
                $("#i-f-gjz").click(function () {
                    console.log("gjz");
                    // console.log("gjz");
                    $("#i-f-zb").css({ 'backgroundColor': '#fff', 'color': '#000' });
                    $("#i-f-gjz").css({ 'backgroundColor': '#3E9FFC', 'color': '#fff' });
                    // $("#inputTwo").css({ 'display': 'none' });
@@ -40,7 +40,7 @@
                    $("#local_data").show();
                })
                $("#i-f-zb").click(function () {
                    console.log("zb");
                    // console.log("zb");
                    $("#i-f-gjz").css({ 'backgroundColor': '#fff', 'color': '#000' });
                    $("#i-f-zb").css({ 'backgroundColor': '#3E9FFC', 'color': '#fff' });
                    // $("#local_data").css({ 'display': 'none' });

 widgets/searchL/css/style.css

@@ -10,7 +10,7 @@
  /* 240px */
  background: rgba(255, 255, 255, 1);
  color: #000;
  border-right: 1px solid #000;
  /* border-right: 1px solid #000; */
  border-radius: 6px 6px 6px 6px;
  text-align: center;
  /* cursor: pointer; */

 widgets/visualAngle/Widget.html

New file
@@ -0,0 +1,14 @@
<div>
    <div class="visualAngleOnce v-a-One">
        <img class="v-a-o-img" src="../../../images/addL/wtiyan.png" alt="">
        <div class="v-a-o-title">自主体验</div>
    </div>
    <div class="visualAngleOnce v-a-Two">
        <img class="v-a-o-img" src="../../../images/addL/bquanqiu.png" alt="">
        <div class="v-a-o-title">漫游体验</div>
    </div>
    <div class="visualAngleOnce v-a-Three">
        <img class="v-a-o-img" src="../../../images/addL/bshijiao.png" alt="">
        <div class="v-a-o-title">固定视角</div>
    </div>
</div>

 widgets/visualAngle/Widget.js

New file
@@ -0,0 +1,102 @@
///////////////////////////////////////////////////////////////////////////
// Copyright © 2019 zhongsong. All Rights Reserved.
// 模块描述:显示坐标
///////////////////////////////////////////////////////////////////////////
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'
],
    function (declare,
        lang,
        array,
        html,
        topic,
        BaseWidget,
        aspect,
        string,
        utils
    ) {
        return declare([BaseWidget], {
            baseClass: 'jimu-widget-visualAngle',
            name: 'visualAngle',
            layers: {},
            startup: function () {
                // 暴露在外的接口
                var that = this;
                $(".v-a-One").click(function () {
                    that.clearColor();
                    $(".v-a-One").css({ 'backgroundColor': '#3F9DFD', 'color': '#fff' });
                    $(this).find('.v-a-o-img').attr("src", "../../../images/addL/wtiyan.png");
                    // .attr("src", src_value);
                })
                $(".v-a-Two").click(function () {
                    that.clearColor();
                    $(".v-a-Two").css({ 'backgroundColor': '#3F9DFD', 'color': '#fff' });
                    $(this).find('.v-a-o-img').attr("src", "../../../images/addL/wquanqiu.png");
                })
                $(".v-a-Three").click(function () {
                    that.clearColor();
                    $(".v-a-Three").css({ 'backgroundColor': '#3F9DFD', 'color': '#fff' });
                    $(this).find('.v-a-o-img').attr("src", "../../../images/addL/wshijiao.png");
                })

                // $('.RouteNavigate-tool').click(function () {
                //     $('.jimu-widget-RouteNavigate').show();
                //     $('.jimu-widget-MapPrinting').hide();
                //     $('.jimu-widget-CoorPosition').hide();
                //     $('.jimu-widget-Measurement').hide();
                //     $('.jimu-widget-Sign').hide();
                //     $('.jimu-widget-FlyRoute').hide();
                //     $('.jimu-widget-DynamicRiver').hide();
                //     $('.tool-y-box').toggle()
                // })
            },

            closeToolBox: function (item) {
                // if (item != this.name) {
                //     $('.tool-y-box').hide();
                // }
            },

            onOpen: function () {
                //面板打开的时候触发 （when open this panel trigger）
            },

            onClose: function () {
                //面板关闭的时候触发 （when this panel is closed trigger）
            },

            onMinimize: function () {
                this.resize();
            },

            onMaximize: function () {
                this.resize();
            },

            resize: function () {

            },
            clearColor: function () {
                $(".visualAngleOnce").css({ 'backgroundColor': '#fff', 'color': '#000' });
                $('.v-a-One').find('.v-a-o-img').attr("src", "../../../images/addL/btiyan.png")
                $('.v-a-Two').find('.v-a-o-img').attr("src", "../../../images/addL/bquanqiu.png")
                $('.v-a-Three').find('.v-a-o-img').attr("src", "../../../images/addL/bshijiao.png")
            },

            destroy: function () {
                //销毁的时候触发
                //todo
                //do something before this func
                this.inherited(arguments);
            }

        });
    });

 widgets/visualAngle/css/style.css

New file
@@ -0,0 +1,54 @@
.jimu-widget-visualAngle {
  position     : fixed;
  font-size    : 14px;
  height       : 60px !important;
  /* line-height  : 32px; */
  width        : 179px !important;
  right: auto !important;
  top: auto !important;
  bottom: 100px !important;
  left: calc(50% - 90px) !important;
  /* 240px */
  background   : rgba(255, 255, 255, 1);
  color        : #fff;
  /* border : 1px solid #000; */
  border-radius: 6px;
  text-align   : center;
  /* cursor       : pointer; */
  z-index      : 10 !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.jimu-widget-visualAngle .visualAngleOnce{
  width: 60px;
  box-sizing: border-box;
  /* border: 1px solid springgreen; */
  height: 60px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 13px;

}
.jimu-widget-visualAngle .visualAngleOnce:nth-child(1){
  border-radius: 6px 0 0 6px;
  border-right: 1px solid rgba(155, 155, 155, 0.2);
  background-color: #3F9DFD;
}
.jimu-widget-visualAngle .visualAngleOnce:nth-child(2){
  color: #000;
}
.jimu-widget-visualAngle .visualAngleOnce:nth-child(3){
  border-radius: 0 6px 6px 0;
  border-left: 1px solid rgba(155, 155, 155, 0.2);
  color: #000;
}
.jimu-widget-visualAngle .v-a-o-img{
  width: 30px;

}

 widgets/visualAngle/manifest.json

New file
@@ -0,0 +1,17 @@
{
  "name": "visualAngle",
  "2D": true,
  "3D": true,
  "platform": "HTML",
  "version": "2.10",
  "wabVersion": "2.10",
  "author": "yuanjy",
  "description": "",
  "copyright": "",
  "license": "",
  "properties": {
    "hasConfig": false,
    "inPanel": false,
    "hasVersionManager": false
  }
}

 widgets/visualAngle/nls/es/strings.js

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "visualAngle"
  })
);

 widgets/visualAngle/nls/strings.js

New file
@@ -0,0 +1,7 @@
define({
  root: ({
    _widgetLabel: "visualAngle"
  }),
  "es": 1,
  "zh-cn": 1
});

 widgets/visualAngle/nls/zh-cn/strings.js

New file
@@ -0,0 +1,5 @@
define(
   ({
    _widgetLabel: "视角底部按钮"
  })
);