add custom layer manager

wangzhibo

2021-09-15 7bd57c68259f3e47cf4b396fefb1abb3d12a71f5

add custom layer manager

 config/config.json

@@ -41,7 +41,7 @@
      "vrButton": false,
      "fullscreenButton": true,
      "navigationHelpButton": false,
      "animation": true,
      "animation": false,
      "timeline": false,
      "infoBox": false,
      "geocoder": false,
@@ -55,7 +55,7 @@
        "fps": false,
        "crs": "CGCS2000_GK_Zone_3",
        "crsDecimal": 0,
        "template": "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div>横{crsx}  纵{crsy}</div> <div>海拔：{alt}米</div> <div>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div>视高：{cameraHeight}米</div>"
        "template": "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div>海拔：{alt}米</div> <div>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div>视高：{cameraHeight}米</div>"
      }
    },
    "terrain": {

 config/widget.json

@@ -46,6 +46,12 @@
      "name": "出租车图层",
      "uri": "widgetsTS/taxi_layer/widget.js"
    }
    ,
    {
      "name": "时间日期",
      "uri": "widgetsTS/dataTime/widget.js",
      "noTitle": true
    }
  ],
  "widgets": [
    {
@@ -104,6 +110,24 @@
      "disableOther": false
    },
    {
      "name": "图层管理New",
      "uri": "widgets/manageLayers_style/widget.js",
      "group": "forlayer",
      "autoCenter": true,
      "windowOptions": {
        "position": {
          "top": 80,
          "bottom": 30,
          "right": 50
        }
      },
      "css": {
        "max-width": "300px"
      },
      "autoDisable": false,
      "disableOther": false
    },
    {
      "name": "剖面分析图表",
      "uri": "widgets/measureChars/widget.js",
      "windowOptions": {

 index.html

@@ -27,7 +27,7 @@
      type="text/javascript"
      src="lib/include-lib.js?time=20210803"
      libpath="lib/"
      include="jquery,jquery.range,bootstrap,bootstrap-checkbox,font-awesome,web-icons,layer,haoutil,localforage,nprogress,toastr,admui,turf,mars3d,mars3d-widget,mars3d-wind"
      include="jquery,jquery.range,jedate,bootstrap,bootstrap-checkbox,font-awesome,web-icons,layer,haoutil,localforage,nprogress,toastr,admui,turf,mars3d,mars3d-widget,mars3d-wind"
    ></script>
    <link href="css/style.css?time=20210803" rel="stylesheet" />
  </head>

 js/function.js

@@ -59,7 +59,9 @@
  layer_1001_guokong = new mars3d.layer.DivLayer({
    name: '国控点',
    pid: 99, //图层管理 中使用，父节点id
    show: false
    show: false,
    selectedMapStyleOptions:'pm25',
    hasMapStyleOptions:['pm25','pm10','no','no2','nox','co']
  });
  map.addLayer(layer_1001_guokong);

@@ -205,36 +207,22 @@
      "format": "image/png",
      "sld": "http://127.0.0.1:8080/geoserver/styles/vis_grid1000_5000_co.sld"
    },
    center: { "lat": 31.162801, "lng": 121.543277, "alt": 50000, "heading": 359.2, "pitch": -39.5 },
    getFeatureInfoParameters: {
      feature_count: 10
    },
    //单击高亮及其样式
    highlight: {
      type: "wallP",
      diffHeight: 300,
      material: mars3d.MaterialUtil.createMaterial(mars3d.MaterialType.LineFlow, {
        image: "img/textures/fence.png",
        color: "#ffff00",
        speed: 10, //速度，建议取值范围1-100
        axisY: true,
      }),
    },
    popup: "all",
    show: false,
    flyTo: true,
    minimumLevel: 6, // load level
    maximumLevel: 16,
    minimumTerrainLevel: 5, // show level
    maximumTerrainLevel: 18,
  });
  map.addLayer(layer_grid_5000);

  layer_grid_5000.reloadLayers = function (){
    layer_grid_5000.options.layers ="konglu_58:vis_grid1000_day";
    layer_grid_5000.options.parameters.sld ="http://127.0.0.1:8080/geoserver/styles/"+layer_grid_5000.options.selectedMapStyleOptions+".sld";
    layer_grid_5000.options.parameters.viewparams="id1:0;id2:10";
    console.log(layer_grid_5000);
    layer_grid_5000.reload();
  }

  //单击事件
  layer_grid_5000.on(mars3d.EventType.click, function (event) {
    console.log("单击了矢量数据，共" + event.features.length + "条", event);
  });

  map.addLayer(layer_grid_5000);

}


 widgets/manageLayers_style/img/folder.png

 widgets/manageLayers_style/img/layer.png

 widgets/manageLayers_style/img/layerGroup.png

 widgets/manageLayers_style/view.css

New file
@@ -0,0 +1,32 @@
.layersctl_rMenu {
  position: absolute;
  z-index: 999999;
  display: none;
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.4);
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 4px 0;
  background-color: #fff;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.layersctl_rMenu ul {
  margin: 0px;
  padding: 0px;
}

.layersctl_rMenu ul li {
  display: block;
  color: #222;
  font-size: 12px;
  line-height: 20px;
  text-decoration: none;
  padding: 0 12px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  cursor: default;
  outline: none;
}

 widgets/manageLayers_style/view.html

New file
@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html class="no-js css-menubar" lang="zh-cn">
  <head>
    <title>弹窗子页面</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 移动设备 viewport -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" />
    <meta name="author" content="火星科技 http://mars3d.cn " />
    <!-- 360浏览器默认使用Webkit内核 -->
    <meta name="renderer" content="webkit" />
    <!-- Chrome浏览器添加桌面快捷方式（安卓） -->
    <link rel="icon" type="image/png" href="../../img/favicon/favicon.png" />
    <meta name="mobile-web-app-capable" content="yes" />
    <!-- Safari浏览器添加到主屏幕（IOS） -->
    <link rel="icon" sizes="192x192" href="img/favicon/apple-touch-icon.png" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-title" content="火星科技MarsGIS" />
    <!-- Win8标题栏及ICON图标 -->
    <link rel="apple-touch-icon-precomposed" href="../../img/favicon/apple-touch-icon.png" />
    <meta name="msapplication-TileImage" content="../../img/favicon/app-icon72x72@2x.png" />
    <meta name="msapplication-TileColor" content="#62a8ea" />

    <!-- 第3方lib引入 -->
    <script
      type="text/javascript"
      src="../../lib/include-lib.js?time=20210803"
      libpath="../../lib/"
      include="jquery,ztree,font-awesome,bootstrap,jquery.range,admui-frame"
    ></script>

    <link href="../../css/widget-win.css" rel="stylesheet" />
    <link href="view.css?time=20210803" rel="stylesheet" />
  </head>

  <body>
    <div id="view" style="width: 100%; height: calc(100% - 40px); overflow: auto">
      <ul id="treeOverlays" class="ztree"></ul>
    </div>
    <div style="position: absolute; bottom: 0; padding: 5px; color: #a59d9d">提示：双击可定位视域至其所在位置</div>

    <div id="content_layer_manager_rMenu" class="layersctl_rMenu">
      <ul>
        <li data-type="top">图层置为顶层</li>
        <li data-type="up">图层上移一层</li>
        <li data-type="down">图层下移一层</li>
        <li data-type="bottom">图层置为底层</li>
      </ul>
    </div>

    <!--页面js-->
    <script src="view.js?time=20210803"></script>
  </body>
</html>

 widgets/manageLayers_style/view.js

New file
@@ -0,0 +1,479 @@
"use script"; //开发环境建议开启严格模式

//对应widget.js中MyWidget实例化后的对象
var thisWidget;
var layers = [];
var layersObj = {};

//当前页面业务
function initWidgetView(_thisWidget) {
  thisWidget = _thisWidget;

  //右键
  bindRightMenuEvnet();

  //初始化树
  var setting = {
    check: {
      enable: true,
    },
    data: {
      simpleData: {
        enable: true,
      },
    },
    callback: {
      onCheck: treeOverlays_onCheck,
      onRightClick: treeOverlays_OnRightClick,
      onDblClick: treeOverlays_onDblClick,
      onClick: treeOverlays_onClick,
    },

    view: {
      addDiyDom: addOpacityRangeDom,
    },
  };

  var zNodes = [];
  layers = thisWidget.getLayers();
  for (var i = layers.length - 1; i >= 0; i--) {
    var node = _getNodeConfig(layers[i]);
    if (node) {
      zNodes.push(node);
    }
  }
  $.fn.zTree.init($("#treeOverlays"), setting, zNodes);
}

function _getNodeConfig(layer) {
  if (layer == null || !layer.options || layer.options.noLayerManage) {
    return;
  }

  var item = layer.options;

  if (!item.name) {
    console.log("未命名图层不加入图层管理", layer);
    return;
  }

  var node = {
    id: layer.id,
    pId: layer.pid,
    name: layer.name,
    uuid: layer.uuid,
    checked: layer.isAdded && layer.show,
  };

  if (layer.hasEmptyGroup) {
    //空数组
    node.icon = "img/folder.png";
    node.open = item.open == null ? true : item.open;
  } else if (layer.hasChildLayer) {
    //有子节点的数组
    node.icon = "img/layerGroup.png";
    node.open = item.open == null ? true : item.open;
  } else {
    node.icon = "img/layer.png";
    if (layer.parent) {
      node._parentId = layer.parent.uuid;
    }
  }
  //记录图层
  layersObj[node.uuid] = layer;
  return node;
}

function addNode(item) {
  var treeObj = $.fn.zTree.getZTreeObj("treeOverlays");

  var parentNode;
  if (item.pid && item.pid != -1) {
    parentNode = treeObj.getNodeByParam("id", item.pid, null);
  }

  var node = _getNodeConfig(item);
  if (!node) {
    return;
  }

  treeObj.addNodes(parentNode, 0, [node], true);

  //更新子节点图层
  if (item.hasChildLayer) {
    item.eachLayer((childLayer) => {
      removeNode(childLayer);
      addNode(childLayer);
    });
  }
}

function removeNode(layer) {
  var treeObj = $.fn.zTree.getZTreeObj("treeOverlays");

  var node = treeObj.getNodeByParam("uuid", layer.uuid, null);
  if (node) {
    treeObj.removeNode(node);
  }
}

function updateNode(layer) {
  var treeObj = $.fn.zTree.getZTreeObj("treeOverlays");

  var node = treeObj.getNodeByParam("uuid", layer.uuid, null);
  var show = layer.isAdded && layer.show;
  if (node) {
    //更新node
    if (node.checked == show) {
      return;
    }

    node.checkedOld = node.checked;
    node.checked = show;

    treeObj.updateNode(node);
  } else {
    addNode(layer, show);
  }
}

//===================================双击定位图层====================================
function treeOverlays_onClick(e, treeId, treeNode, clickFlag) {
  // if (treeNode == null || treeNode.uuid == null) {
  //   return
  // }
  // var layer = layersObj[treeNode.uuid]
  // if (layer) {
  //   thisWidget.checkClickLayer(layer, treeNode.checked)
  // }
}

function treeOverlays_onDblClick(event, treeId, treeNode) {
  if (treeNode == null || treeNode.uuid == null) {
    return;
  }
  var layer = layersObj[treeNode.uuid];
  if (layer == null) {
    return;
  }
  layer.flyTo();
}

//===================================勾选显示隐藏图层====================================
function removeArrayItem(arr, val) {
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] == val) {
      arr.splice(i, 1);
      return true;
    }
  }
  return false;
}

function treeOverlays_onCheck(e, treeId, chktreeNode) {
  var treeObj = $.fn.zTree.getZTreeObj(treeId);
  //获得所有改变check状态的节点
  var changedNodes = treeObj.getChangeCheckedNodes();

  removeArrayItem(changedNodes, chktreeNode);
  changedNodes.push(chktreeNode);

  for (var i = 0; i < changedNodes.length; i++) {
    var treeNode = changedNodes[i];
    treeNode.checkedOld = treeNode.checked;

    if (treeNode.check_Child_State == 1) {
      // 0:无子节点被勾选,  1:部分子节点被勾选,  2:全部子节点被勾选, -1:不存在子节点 或 子节点全部设置为 nocheck = true
      continue;
    }

    var layer = layersObj[treeNode.uuid];
    if (layer == null) {
      continue;
    }

    //显示隐藏透明度设置view
    if (treeNode.checked) {
      $("#" + treeNode.tId + "_range").show();
      $("#" + treeNode.tId + "_style").show();
    } else {
      $("#" + treeNode.tId + "_range").hide();
      $("#" + treeNode.tId + "_style").hide();

    }

    //特殊处理同目录下的单选的互斥的节点，可在config对应图层节点中配置"radio":true即可
    if (layer.options.radio && treeNode.checked) {
      var nodes = treeObj.getNodesByFilter(
        function (node) {
          var item = layersObj[node.uuid];
          return item.options.radio && item.pid == layer.pid && node.uuid != treeNode.uuid;
        },
        false,
        treeNode.getParentNode()
      );
      for (var nidx = 0; nidx < nodes.length; nidx++) {
        nodes[nidx].checkedOld = false;
        treeObj.checkNode(nodes[nidx], false, true);

        $("#" + nodes[nidx].tId + "_range").hide();

        var layertmp = layersObj[nodes[nidx].uuid];
        layertmp.show = false;
      }
    }

    //处理图层显示隐藏
    thisWidget.updateLayerShow(layer, treeNode.checked);
  }

  var layerThis = layersObj[chktreeNode.uuid];
  if (layerThis) {
    thisWidget.checkClickLayer(layerThis, chktreeNode.checked);
  }
}

//===================================透明度设置====================================

//在节点后添加自定义控件
function addOpacityRangeDom(treeId, tNode) {
  //if (tNode.icon == "images/folder.png") return;

  var layer = layersObj[tNode.uuid];

  // add map style selection radio

  if (!layer.hasOpacity && !layer.options.hasMapStyleOptions) {
    return;
  }


  if (layer.hasOpacity) {
    var view = $("#" + tNode.tId);
    var silder = '<input id="' + tNode.tId + '_range" type="range" style="width: 50px;" />';
    view.append(silder);

    if (!tNode.checked) {
      $("#" + tNode.tId + "_range").hide();
    }

    $("#" + tNode.tId + "_range").range({
      min: 0,
      max: 100,
      step: 1,
      value: (layer.opacity || 1) * 100,
      onChange: function (value) {
        var opacity = value / 100;
        var layer = layersObj[tNode.uuid];
        //设置图层的透明度
        // thisWidget.udpateLayerOpacity(layer, opacity)
        layer.opacity = opacity;
      },
    });
  }
  if (layer.options.hasMapStyleOptions) {
    var view = $("#" + tNode.tId);
    var radio_html = '<div id="'+tNode.tId+'_style" style="color: white;">';

    let item = layer.options.hasMapStyleOptions;

    for (var i = 0, len = item.length; i < len; i++) {

      radio_html += '<span class="button level1 switch center_docu" ></span><label><input type="radio" name="' + tNode.tId + '_style" value="" '+(item[i]==layer.options.selectedMapStyleOptions?"checked":"")+'/>'+item[i].toUpperCase()+'</label></br>';

    }
    radio_html +='</div>';

    view.append(radio_html);

    if (!tNode.checked) {
      $("#" + tNode.tId + "_style").hide();
    }

    $('input[type=radio][name='+ tNode.tId + '_style]').change(function() {
      var layer = layersObj[tNode.uuid];
        layer.options.selectedMapStyleOptions = this.value;
        mars3d.reloadLayers(layer.id);
      
      });
  }


}

//===================================右键菜单====================================
var lastRightClickTreeId;
var lastRightClickTreeNode;

function treeOverlays_OnRightClick(event, treeId, treeNode) {
  if (treeNode == null) {
    return;
  }

  var layer = layersObj[treeNode.uuid];
  if (!layer || !layer.hasZIndex) {
    return;
  }

  //右击时的节点
  lastRightClickTreeId = treeId;
  lastRightClickTreeNode = treeNode;

  var top = event.clientY;
  var left = event.clientX;
  var maxtop = document.body.offsetHeight - 100;
  var maxleft = document.body.offsetWidth - 100;

  if (top > maxtop) {
    top = maxtop;
  }
  if (left > maxleft) {
    left = maxleft;
  }

  $("#content_layer_manager_rMenu")
    .css({
      top: top + "px",
      left: left + "px",
    })
    .show();
  $("body").bind("mousedown", onBodyMouseDown);
}

function onBodyMouseDown(event) {
  if (!(event.target.id == "content_layer_manager_rMenu" || $(event.target).parents("#content_layer_manager_rMenu").length > 0)) {
    hideRMenu();
  }
}

function hideRMenu() {
  $("body").unbind("mousedown", onBodyMouseDown);
  $("#content_layer_manager_rMenu").hide();
}

function bindRightMenuEvnet() {
  $("#content_layer_manager_rMenu li").on("click", function () {
    hideRMenu();

    var type = $(this).attr("data-type");
    moveNodeAndLayer(type);
  });
}

//移动节点及图层位置
function moveNodeAndLayer(type) {
  var treeObj = $.fn.zTree.getZTreeObj(lastRightClickTreeId);

  //获得当前节点的所有同级节点
  var childNodes;
  var parent = lastRightClickTreeNode.getParentNode();
  if (parent == null) {
    childNodes = treeObj.getNodes();
  } else {
    childNodes = parent.children;
  }

  var thisNode = lastRightClickTreeNode;
  var thisLayer = layersObj[thisNode.uuid];

  switch (type) {
    default:
      break;
    case "up": //图层上移一层
      {
        let moveNode = thisNode.getPreNode();
        if (moveNode) {
          treeObj.moveNode(moveNode, thisNode, "prev");
          let moveLayer = layersObj[moveNode.uuid];

          exchangeLayer(thisLayer, moveLayer);
        }
      }
      break;

    case "top": //图层置于顶层
      {
        if (thisNode.getIndex() == 0) {
          return;
        }
        while (thisNode.getIndex() > 0) {
          //冒泡交换
          let moveNode = thisNode.getPreNode();
          if (moveNode) {
            treeObj.moveNode(moveNode, thisNode, "prev");

            let moveLayer = layersObj[moveNode.uuid];
            exchangeLayer(thisLayer, moveLayer);
          }
        }
      }
      break;

    case "down": //图层下移一层
      {
        let moveNode = thisNode.getNextNode();
        if (moveNode) {
          treeObj.moveNode(moveNode, thisNode, "next");

          let moveLayer = layersObj[moveNode.uuid];
          exchangeLayer(thisLayer, moveLayer);
        }
      }
      break;
    case "bottom": //图层置于底层
      {
        if (thisNode.getIndex() == childNodes.length - 1) {
          return;
        }

        while (thisNode.getIndex() < childNodes.length - 1) {
          //冒泡交换
          let moveNode = thisNode.getNextNode();
          if (moveNode) {
            treeObj.moveNode(moveNode, thisNode, "next");

            let moveLayer = layersObj[moveNode.uuid];
            exchangeLayer(thisLayer, moveLayer);
          }
        }
      }
      break;
  }

  //按order重新排序
  layers.sort(function (a, b) {
    return a.zIndex - b.zIndex;
  });
}

/**
 * 交换相邻的图层 ： layer1 待移动图层 ，layer2 移动目标图层
 */
function exchangeLayer(layer1, layer2) {
  if (layer1 == null || layer2 == null) {
    return;
  }
  var or = layer1.zIndex;
  layer1.zIndex = layer2.zIndex; //向上移动
  layer2.zIndex = or; //向下移动

  console.log(`${layer1.name}:${layer1.zIndex},  ${layer2.name}:${layer2.zIndex}`);

  // //向上移动
  // thisWidget.udpateLayerZIndex(layer1, layer1.zIndex)
  // //向下移动
  // thisWidget.udpateLayerZIndex(layer2, layer2.zIndex)
}

//===================================其他====================================

//地图图层添加移除监听，自动勾选
function updateCheckd(name, checked) {
  var treeObj = $.fn.zTree.getZTreeObj("treeOverlays");
  var nodes = treeObj.getNodesByParam("name", name, null);
  if (nodes && nodes.length > 0) {
    treeObj.checkNode(nodes[0], checked, false);
  } else {
    console.log("未在图层树上找到图层“" + name + "”，无法自动勾选处理");
  }
}

 widgets/manageLayers_style/widget.js

New file
@@ -0,0 +1,122 @@
"use script"; //开发环境建议开启严格模式
(function (window, mars3d) {
  //创建widget类，需要继承BaseWidget
  class MyWidget extends mars3d.widget.BaseWidget {
    //弹窗配置
    get view() {
      return {
        type: "window",
        url: "view.html",
        windowOptions: {
          // noTitle: true,
          // closeBtn: 0,
          width: 250,
          height: 600,
        },
      };
    }
    //是否可以控制basemaps，因为有底图控制了，具体项目中可以按需改为false
    get hasManagerBaseMaps() {
      return true;
    }

    //初始化[仅执行1次]
    create() {}
    //每个窗口创建完成后调用
    winCreateOK(opt, result) {
      this.viewWindow = result;
    }
    //打开激活
    activate() {
      //监听事件，联动勾选状态
      this.map.on(mars3d.EventType.addLayer, this._onAddLayerHandler, this);
      this.map.on(mars3d.EventType.removeLayer, this._onRemoveLayerHandler, this);
    }
    //关闭释放
    disable() {
      this.viewWindow = null;

      this.map.off(mars3d.EventType.addLayer, this._onAddLayerHandler, this);
      this.map.off(mars3d.EventType.removeLayer, this._onRemoveLayerHandler, this);
    }
    _onAddLayerHandler(e) {
      if (!this.isActivate || !this.viewWindow) {
        return;
      }
      console.log("添加了图层", e);

      this.viewWindow.updateNode(e.layer);
    }
    _onRemoveLayerHandler(e) {
      if (!this.isActivate || !this.viewWindow) {
        return;
      }
      console.log("移除了图层", e);

      this.viewWindow.removeNode(e.layer);
    }

    getLayers() {
      return this.map.getLayers({
        basemaps: true, //是否取config.json中的basempas
        layers: true, //是否取config.json中的layers
      });
    }
    //对单击的图层做处理（单个）
    checkClickLayer(layer, show) {
      if (show) {
        if (this.config.autoCenter && !layer.options.noCenter) {
          //在对应config.json图层节点配置 noCenter:true 可以不定位
          layer.flyTo();
        }

        //存在关联widget时
        let item = layer.options;
        if (item.onWidget) {
          if (this._lastWidget) {
            mars3d.widget.disable(this._lastWidget);
            this._lastWidget = null;
          }

          mars3d.widget.activate({
            uri: item.onWidget,
            layerItem: item,
            disableOther: false,
          });
          this._lastWidget = item.onWidget;
        }
      } else {
        //存在关联widget时
        let item = layer.options;
        if (item.onWidget) {
          mars3d.widget.disable(item.onWidget);
          if (this._lastWidget == item.onWidget) {
            this._lastWidget = null;
          }
        }
      }
    }

    //更新图层:显示隐藏状态（勾选后的图层及其子级图层，多个）
    updateLayerShow(layer, show) {
      layer.show = show;

      if (show) {
        if (!layer.isAdded) {
          this.map.off(mars3d.EventType.addLayer, this._onAddLayerHandler, this);
          this.map.addLayer(layer);
          this.map.on(mars3d.EventType.addLayer, this._onAddLayerHandler, this);
        }
      } else {
        // if (layer.isAdded) {
        //   this.map.removeLayer(layer)
        // }
      }
    }
  }

  //注册到widget管理器中。
  mars3d.widget.bindClass(MyWidget);

  //每个widet之间都是直接引入到index.html中，会存在彼此命名冲突，所以闭包处理下。
})(window, mars3d);

 widgets/toolBarRight/view.css

@@ -1,5 +1,3 @@
/* 2017-12-5 14:44:06 | 修改 木遥（微信:  http://marsgis.cn/weixin.html ） */

.toolBarRight {
  position: absolute;
  top: 10px;

 widgetsTS/dataTime/view.css

@@ -1,6 +1,6 @@
.append_test {
    position: absolute;
    top: 50px;
    right:100px;
    top: 15px;
    right:500px;
    z-index: 999;
}

 widgetsTS/dataTime/view.html

@@ -3,8 +3,8 @@
        <span class="fa fa-globe" id="current">小时：2020-01-01 09:00:00</span>
    </button>
    <ul class="dropdown-menu">
        <input type="radio" name="datatype" value="hour" title="小时数据" checked>
        <input type="radio" name="datatype" value="day" title="天数据" >
    <input type="radio" name="datatype" value="hour" title="小时数据" checked>小时
    <input type="radio" name="datatype" value="day" title="天数据">天

        <div class="layui-form">
            <div class="layui-form-item">
@@ -15,7 +15,7 @@
              </div>
              <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test5" placeholder="yyyy-MM-dd HH">
            <input type="text" class="layui-input" id="datatype_hour" placeholder="yyyy-MM-dd HH">
                </div>
              </div>
            </div>

 widgetsTS/dataTime/widget.js

@@ -16,10 +16,7 @@
    }
    //页面配置， append是添加DOM节点到html中的方式
    get view() {
      return {
        type: 'append',
        url: 'view.html',
      }
      return { type: "append", url: "view.html", parent: "body" };
    }

    //初始化[仅执行1次]
@@ -30,12 +27,28 @@
      if (window.top) {
        request = $.extend(request, haoutil.system.getRequest(window.top));
      }
      mars3d.globel_variables.userid = request.userid || 2;
      mars3d.globel_variables.queryDataType = "hour";
      mars3d.globel_variables = {userid:request.userid || 2,queryDataType:'hour'};

      mars3d.globel_variables.queryDataTStart = getDefaultDateTime();
      mars3d.globel_variables.queryDataTEnd = getDefaultDateTime();

      
      $('input[type=radio][name=datatype]').change(function() {
        mars3d.globel_variables.queryDataType = this.value ; 
        console.log( mars3d.globel_variables.queryDataType);      
      });

      $('#current').val(mars3d.globel_variables.queryDataType=='hour'?'小时':'天'+mars3d.globel_variables.queryDataTStart);
      $('#current').val(mars3d.globel_variables.queryDataType=='hour'?'小时':'天'+mars3d.globel_variables.queryDataTStart);

      //$('#datatype_day').datepicker();
      jeDate("#datatype_day",{
        format:"YYYY-MM-DD",
        isTime:true,
        minDate:"2014-09-19 00:00:00"
    })

      


    }