地图相关控件按钮的样式调整

shuishen

2021-06-08 599f0458111446d39b250e8abc2e71b3f7fc213b

地图相关控件按钮的样式调整

 config.json

@@ -50,19 +50,12 @@
        }
      },

      {
        "uri": "widgets/HelpButton/Widget",
        "position": {
          "right": 10,
          "bottom": 40,
          "relativeTo": "map"
        }
      },
    
      {
        "uri": "widgets/HomeButton/Widget",
        "position": {
          "right": 10,
          "bottom": 120,
          "bottom": 196,
          "relativeTo": "map"
        }
      },
@@ -70,7 +63,31 @@
        "uri": "widgets/FullScreen/Widget",
        "position": {
          "right": 10,
          "bottom": 80,
          "bottom": 156,
          "relativeTo": "map"
        }
      },
      {
        "uri": "widgets/VrButton/Widget",
        "position": {
          "right": 10,
          "bottom": 116,
          "relativeTo": "map"
        }
      },
      {
        "uri": "widgets/SceneMode/Widget",
        "position": {
          "right": 10,
          "bottom": 76,
          "relativeTo": "map"
        }
      },
      {
        "uri": "widgets/HelpButton/Widget",
        "position": {
          "right": 10,
          "bottom": 36,
          "relativeTo": "map"
        }
      },
@@ -274,6 +291,7 @@
      "baseLayerPicker": true,
      "fullscreenButton": false,
      "geocoder": false,
      "vrButton": false,
      "homeButton": false,
      "infoBox": false,
      "sceneModePicker": false,

 images/关闭VR.png

 images/收缩.png

 widgets/Basemap/Widget.html

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


 widgets/FullScreen/Widget.js

@@ -22,15 +22,31 @@
      this.inherited(arguments);
      new Cesium.FullscreenButton(this.domNode, null);

      $('.cesium-fullscreenButton').attr('title','全屏视角');
      $('.cesium-fullscreenButton').attr('title', '全屏视角');
      $(".jimu-widget-fullScreen button.cesium-button").html("<img src='../../../images/全屏.png' alt=''>");

      $('.jimu-widget-fullScreen button.cesium-button').click(function () {
        var title = $(this).attr('title');

        if (title == "Exit full screen") {

          $(".jimu-widget-fullScreen button.cesium-button").html("<img src='../../../images/全屏.png' alt=''>");

        } else {
          
          $(".jimu-widget-fullScreen button.cesium-button").html("<img src='../../../images/收缩.png' alt=''>");

        }
      })

    },

    setPosition: function (/*position*/) {
    setPosition: function ( /*position*/ ) {
      this.inherited(arguments);

    },

    

  });

  return clazz;

 widgets/FullScreen/css/style.css

@@ -2,4 +2,16 @@
    width: 32px!important;
    height:32px!important;
    margin:2px;
}

.jimu-widget-fullScreen button.cesium-button {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 8px #fff;
    width: 32px;
    height: 32px;
    border-radius: 14%;
    padding: 0;
    vertical-align: middle;
    z-index: 0;
}

 widgets/HelpButton/Widget.js

@@ -33,6 +33,7 @@
        this.inherited(arguments);
        $('.cesium-navigation-help').css('top',-112);

        
        var NavigationHelpButton = new Cesium.NavigationHelpButton({ container: this.domNode });
        if (NavigationHelpButton) {
          NavigationHelpButton.viewModel.tooltip = "操作指南";
@@ -76,6 +77,9 @@
          touch_help_rotate.parentNode.getElementsByClassName("cesium-navigation-help-details")[0].innerHTML = "双指反向拖动";
        }

        $(".jimu-widget-helpbutton  button.cesium-button").html("<img src='../../../images/问题指引.png' alt=''>");


      }

    });

 widgets/HelpButton/css/style.css

@@ -10,6 +10,18 @@
    width: 163px;
}

.jimu-widget-helpbutton button.cesium-button {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 8px #fff;
    width: 32px;
    height: 32px;
    border-radius: 14%;
    padding: 0;
    vertical-align: middle;
    z-index: 0;
}

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

/* .cesium-button {

 widgets/HomeButton/Widget.js

@@ -32,6 +32,9 @@
        this.inherited(arguments);

        var homeButton = new Cesium.HomeButton(this.domNode, this.map.scene);

        $(".jimu-widget-homebutton button.cesium-button").html("<img src='../../../images/回到原来的视角.png' alt=''>");

        // Subscribe to the home button beforeExecute event so that we can clear the trackedEntity.
        this.map._eventHelper.add(homeButton.viewModel.command.beforeExecute, Cesium.Viewer.prototype._clearTrackedObject, this.map);


 widgets/HomeButton/css/style.css

@@ -1,3 +1,10 @@
.jimu-widget-homebutton {
    
}


.jimu-widget-homebutton button.cesium-button {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 8px #fff;
}

 widgets/LeftNavigationBar/Widget.html

@@ -14,6 +14,6 @@
            <button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">勾选指定节点</button>
            <button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重载实例</button>
        </div> -->
        <div id="test1" class="demo-tree demo-tree-box"></div>
        <div id="left-tree-list" class="demo-tree demo-tree-box"></div>
    </div>
</div>

 widgets/LeftNavigationBar/Widget.js

@@ -196,7 +196,7 @@
                        util = layui.util,
                        $ = layui.$;
                    tree.render({
                        elem: '#test1' //默认是点击节点可进行收缩
                        elem: '#left-tree-list' //默认是点击节点可进行收缩
                            ,
                        data: data,
                        id: 'demoId1',

 widgets/SceneMode/Widget.html

New file
@@ -0,0 +1,4 @@
<div>
    <button>
    </button>
</div>

 widgets/SceneMode/Widget.js

@@ -1,42 +1,80 @@
///////////////////////////////////////////////////////////////////////////
// Copyright © 2018 NarutoGIS. All Rights Reserved.
// 模块描述:控制地图二三维模式切换
// Copyright © 2019 zhongsong. All Rights Reserved.
// 模块描述:显示坐标
///////////////////////////////////////////////////////////////////////////
define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'jimu/BaseWidget',
    'dojo/_base/html',
    'dojo/dom-construct',
    'dojo/topic',
    'dojo/on'
  ],
  function(
    declare,
    lang,
    BaseWidget,
    html,
    domConstruct,
    topic,
    on) {
    var clazz = declare([BaseWidget], {
        '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-SceneMode',
            name: 'SceneMode',
            layers: {},
            startup: function () {
                var that = this;
                console.log(that.map, 213)
                $(".jimu-widget-SceneMode button").html("<img src='../../../images/2D.png' alt='' title='2D'>");

      name: 'SceneMode',
      baseClass: 'jimu-widget-SceneMode',
                $(".jimu-widget-SceneMode button").click(function () {
                    if ($(".jimu-widget-SceneMode button img").attr('title') == "2D") {
                        $(".jimu-widget-SceneMode button").html("<img src='../../../images/3D.png' alt='' title='3D'>");
                        that.map.scene.morphTo2D(0);
                    } else {
                        $(".jimu-widget-SceneMode button").html("<img src='../../../images/2D.png' alt='' title='2D'>");
                        that.map.scene.morphTo3D(0);

      postCreate: function() {
          this.inherited(arguments);
      },
                    }
                })
            },

      startup: function() {
        this.inherited(arguments);
        new Cesium.SceneModePicker(this.domNode, this.map.scene);
            closeToolBox: function (item) {
				
            },

        $('.cesium-sceneModePicker-button3D').next().next().next().css({'right': 95, 'bottom': 75})
            onOpen: function () {
                //面板打开的时候触发 （when open this panel trigger）
            },

        $('.cesium-sceneModePicker-button3D').attr('title','三维视图');
      }
            onClose: function () {
                //面板关闭的时候触发 （when this panel is closed trigger）
            },

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

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

            resize: function () {

            },


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

        });
    });

 widgets/SceneMode/css/style.css

@@ -1,8 +1,29 @@
.jimu-widget-SceneMode {
.jimu-widget-SceneMode {}


.jimu-widget-SceneMode button {
  background: #fff;
  box-shadow: 0 0 8px #fff;
  width: 32px;
  height: 32px;
  border-radius: 14%;
  padding: 0;
  vertical-align: middle;
  z-index: 0;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
  border: 1px solid #444;
  border-color: #fff;
  color: #edffff;
  fill: #edffff;
  margin: 1px 2px;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
}

.cesium-sceneModePicker-dropDown-icon {
    right: 50px;
    bottom: 37px;
}
.jimu-widget-SceneMode button:focus {

  outline: none !important;
}

 widgets/SceneMode/manifest.json

@@ -1,15 +1,17 @@
{
  "name": "SceneMode",
  "2D": true,
  "3D": true,
  "platform": "HTML",
  "version": "2.10",
  "wabVersion": "2.10",
  "author": "yuanjy",
  "description": "",
  "copyright": "",
  "license": "",
  "properties": {
    "inPanel": false,
    "hasUIFile": false,
    "hasConfig": false,
    "supportMultiInstance": false
    "inPanel": false,
    "hasVersionManager": false
  }
}
}

 widgets/SceneMode/nls/es/strings.js

@@ -1,3 +1,5 @@
define({
  "_widgetLabel": "SceneMode"
});
define(
   ({
    _widgetLabel: "SceneMode"
  })
);

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

@@ -1,3 +1,5 @@
define({
  "_widgetLabel": "模式切换"
});
define(
   ({
    _widgetLabel: "模式切换"
  })
);

 widgets/SceneMode123/Widget.js

New file
@@ -0,0 +1,42 @@
///////////////////////////////////////////////////////////////////////////
// Copyright © 2018 NarutoGIS. All Rights Reserved.
// 模块描述:控制地图二三维模式切换
///////////////////////////////////////////////////////////////////////////
define([
    'dojo/_base/declare',
    'dojo/_base/lang',
    'jimu/BaseWidget',
    'dojo/_base/html',
    'dojo/dom-construct',
    'dojo/topic',
    'dojo/on'
  ],
  function(
    declare,
    lang,
    BaseWidget,
    html,
    domConstruct,
    topic,
    on) {
    var clazz = declare([BaseWidget], {

      name: 'SceneMode',
      baseClass: 'jimu-widget-SceneMode',

      postCreate: function() {
          this.inherited(arguments);
      },

      startup: function() {
        this.inherited(arguments);
        // new Cesium.SceneModePicker(this.domNode, this.map.scene);

        // $('.cesium-sceneModePicker-button3D').next().next().next().css({'right': 95, 'bottom': 75})

        // $('.cesium-sceneModePicker-button3D').attr('title','三维视图');
      }

    });
    return clazz;
  });

 widgets/SceneMode123/css/style.css

New file
@@ -0,0 +1,8 @@
.jimu-widget-SceneMode {

}

.cesium-sceneModePicker-dropDown-icon {
    right: 50px;
    bottom: 37px;
}

 widgets/SceneMode123/images/icon.png

 widgets/SceneMode123/manifest.json

New file
@@ -0,0 +1,15 @@
{
  "name": "SceneMode",
  "platform": "HTML",
  "version": "2.10",
  "wabVersion": "2.10",
  "description": "",
  "copyright": "",
  "license": "",
  "properties": {
    "inPanel": false,
    "hasUIFile": false,
    "hasConfig": false,
    "supportMultiInstance": false
  }
}

 widgets/SceneMode123/nls/es/strings.js

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

 widgets/SceneMode123/nls/strings.js

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

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

New file
@@ -0,0 +1,3 @@
define({
  "_widgetLabel": "模式切换"
});

 widgets/VrButton/Widget.js

New file
@@ -0,0 +1,57 @@
///////////////////////////////////////////////////////////////////////////
// Copyright © 2018 NarutoGIS. All Rights Reserved.
// 模块描述:按钮恢复全图视角
///////////////////////////////////////////////////////////////////////////
define([
  'dojo/_base/declare',
  'dojo/_base/lang',
  'jimu/BaseWidget',
  'dojo/_base/html',
  'dojo/dom-construct',
  'dojo/topic',
  'dojo/on'
],
  function (
    declare,
    lang,
    BaseWidget,
    html,
    domConstruct,
    topic,
    on) {
    var clazz = declare([BaseWidget], {

      name: 'VrButton',
      baseClass: 'jimu-widget-vrbutton',

      postCreate: function () {
        this.inherited(arguments);
      },

      startup: function () {
        this.inherited(arguments);
        new Cesium.VRButton(this.domNode, this.map.scene)
        
        $('.cesium-vrButton').attr('title','VR模式');

        $(".jimu-widget-vrbutton button.cesium-button").html("<img src='../../../images/VR.png' alt=''>");

        $('.jimu-widget-vrbutton button.cesium-button').click(function () {
          var title = $(this).attr('title');
  
          if (title == "Exit VR mode") {
  
            $(".jimu-widget-vrbutton button.cesium-button").html("<img src='../../../images/关闭VR.png' alt=''>");
  
          } else {
            
            $(".jimu-widget-vrbutton button.cesium-button").html("<img src='../../../images/VR.png' alt=''>");
  
          }
        })
        
      }

    });
    return clazz;
  });

 widgets/VrButton/css/style.css

New file
@@ -0,0 +1,21 @@
.jimu-widget-vrbutton {
    width : 32px !important;
    height: 32px !important;
    margin: 2px;
}

.cesium-toolbar-button:hover {
    cursor: pointer;
}

.jimu-widget-vrbutton button.cesium-button {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 8px #fff;
    width: 32px;
    height: 32px;
    border-radius: 14%;
    padding: 0;
    vertical-align: middle;
    z-index: 0;
}

 widgets/VrButton/images/icon.png

 widgets/VrButton/manifest.json

New file
@@ -0,0 +1,15 @@
{
  "name": "VrButton",
  "platform": "HTML",
  "version": "2.10",
  "wabVersion": "2.10",
  "description": "",
  "copyright": "",
  "license": "",
  "properties": {
    "inPanel": false,
    "hasUIFile": false,
    "hasConfig": false,
    "supportMultiInstance": false
  }
}

 widgets/VrButton/nls/es/strings.js

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

 widgets/VrButton/nls/strings.js

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

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

New file
@@ -0,0 +1,3 @@
define({
  "_widgetLabel": "虚拟"
});