wangzhibo
2021-09-07 89da62649161571834d3f8df7ce36f9967e6ba04
widgets/manageLayers/view.js
@@ -1,16 +1,16 @@
'use script' //开发环境建议开启严格模式
"use script"; //开发环境建议开启严格模式
//对应widget.js中MyWidget实例化后的对象
var thisWidget
var layers = []
var layersObj = {}
var thisWidget;
var layers = [];
var layersObj = {};
//当前页面业务
function initWidgetView(_thisWidget) {
  thisWidget = _thisWidget
  thisWidget = _thisWidget;
  //右键
  bindRightMenuEvnet()
  bindRightMenuEvnet();
  //初始化树
  var setting = {
@@ -32,28 +32,29 @@
    view: {
      addDiyDom: addOpacityRangeDom,
    },
  }
  };
  var zNodes = []
  layers = thisWidget.getLayers()
  var zNodes = [];
  layers = thisWidget.getLayers();
  for (var i = layers.length - 1; i >= 0; i--) {
    var node = _getNodeConfig(layers[i])
    var node = _getNodeConfig(layers[i]);
    if (node) {
      zNodes.push(node)
      zNodes.push(node);
    }
  }
  $.fn.zTree.init($('#treeOverlays'), setting, zNodes)
  $.fn.zTree.init($("#treeOverlays"), setting, zNodes);
}
function _getNodeConfig(layer) {
  if (layer == null || layer.options.noLayerManage) {
    return
  if (layer == null || !layer.options || layer.options.noLayerManage) {
    return;
  }
  var item = layer.options
  var item = layer.options;
  if (item.name == '未命名') {
    return
  if (!item.name) {
    console.log("未命名图层不加入图层管理", layer);
    return;
  }
  var node = {
@@ -61,146 +62,171 @@
    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
    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
    node.icon = "img/layerGroup.png";
    node.open = item.open == null ? true : item.open;
  } else {
    node.icon = 'img/layer.png'
    node.checked = layer.isAdded && layer.show
    if (item._parent) {
      node._parent = item._parent.uuid
    node.icon = "img/layer.png";
    if (layer.parent) {
      node._parentId = layer.parent.uuid;
    }
    //记录图层
    layersObj[node.uuid] = layer
  }
  return node
  //记录图层
  layersObj[node.uuid] = layer;
  return node;
}
function addNode(item) {
  var treeObj = $.fn.zTree.getZTreeObj('treeOverlays')
  var treeObj = $.fn.zTree.getZTreeObj("treeOverlays");
  var parentNode
  var parentNode;
  if (item.pid && item.pid != -1) {
    parentNode = treeObj.getNodeByParam('id', item.pid, null)
    parentNode = treeObj.getNodeByParam("id", item.pid, null);
  }
  var node = _getNodeConfig(item)
  var node = _getNodeConfig(item);
  if (!node) {
    return
    return;
  }
  treeObj.addNodes(parentNode, 0, [node], true)
  treeObj.addNodes(parentNode, 0, [node], true);
  //更新子节点图层
  if (item.hasChildLayer) {
    item.eachLayer((childLayer) => {
      removeNode(childLayer)
      addNode(childLayer)
    })
      removeNode(childLayer);
      addNode(childLayer);
    });
  }
}
function removeNode(layer) {
  var treeObj = $.fn.zTree.getZTreeObj('treeOverlays')
  var treeObj = $.fn.zTree.getZTreeObj("treeOverlays");
  var node = treeObj.getNodeByParam('uuid', layer.uuid, null)
  var node = treeObj.getNodeByParam("uuid", layer.uuid, null);
  if (node) {
    treeObj.removeNode(node)
    treeObj.removeNode(node);
  }
}
function updateNode(layer) {
  var treeObj = $.fn.zTree.getZTreeObj('treeOverlays')
  var treeObj = $.fn.zTree.getZTreeObj("treeOverlays");
  var node = treeObj.getNodeByParam('uuid', layer.uuid, null)
  var show = layer.isAdded && layer.show
  var node = treeObj.getNodeByParam("uuid", layer.uuid, null);
  var show = layer.isAdded && layer.show;
  if (node) {
    //更新node
    if (node.checked == show) {
      return
      return;
    }
    node.checkedOld = node.checked
    node.checked = show
    node.checkedOld = node.checked;
    node.checked = show;
    treeObj.updateNode(node)
    treeObj.updateNode(node);
  } else {
    addNode(layer, show)
    addNode(layer, show);
  }
}
//===================================双击定位图层====================================
function treeOverlays_onClick(e, treeId, treeNode, clickFlag) {}
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
    return;
  }
  var layer = layersObj[treeNode.uuid]
  var layer = layersObj[treeNode.uuid];
  if (layer == null) {
    return
    return;
  }
  layer.flyTo()
  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)
  var treeObj = $.fn.zTree.getZTreeObj(treeId);
  //获得所有改变check状态的节点
  var changedNodes = treeObj.getChangeCheckedNodes()
  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
    var layer = layersObj[treeNode.uuid]
    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
      continue;
    }
    //显示隐藏透明度设置view
    if (treeNode.checked) {
      $('#' + treeNode.tId + '_range').show()
      $("#" + treeNode.tId + "_range").show();
    } else {
      $('#' + treeNode.tId + '_range').hide()
      $("#" + treeNode.tId + "_range").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
          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].checkedOld = false;
        treeObj.checkNode(nodes[nidx], false, true);
        $('#' + nodes[nidx].tId + '_range').hide()
        $("#" + nodes[nidx].tId + "_range").hide();
        var layertmp = layersObj[nodes[nidx].uuid]
        layertmp.show = false
        var layertmp = layersObj[nodes[nidx].uuid];
        layertmp.show = false;
      }
    }
    //处理图层显示隐藏
    if (treeNode._parent) {
      var parentLayer = layersObj[treeNode._parent]
      thisWidget.updateLayerShow(layer, treeNode.checked, parentLayer)
    } else {
      thisWidget.updateLayerShow(layer, treeNode.checked)
    }
    thisWidget.updateLayerShow(layer, treeNode.checked);
  }
  var layerThis = layersObj[chktreeNode.uuid];
  if (layerThis) {
    thisWidget.checkClickLayer(layerThis, chktreeNode.checked);
  }
}
@@ -210,177 +236,177 @@
function addOpacityRangeDom(treeId, tNode) {
  //if (tNode.icon == "images/folder.png") return;
  var layer = layersObj[tNode.uuid]
  var layer = layersObj[tNode.uuid];
  if (!layer || !layer.hasOpacity) {
    return
    return;
  }
  var view = $('#' + tNode.tId)
  var silder = '<input id="' + tNode.tId + '_range" type="range" style="width: 50px;" />'
  view.append(silder)
  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").hide();
  }
  $('#' + tNode.tId + '_range').range({
  $("#" + 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]
      var opacity = value / 100;
      var layer = layersObj[tNode.uuid];
      //设置图层的透明度
      // thisWidget.udpateLayerOpacity(layer, opacity)
      layer.opacity = opacity
      layer.opacity = opacity;
    },
  })
  });
}
//===================================右键菜单====================================
var lastRightClickTreeId
var lastRightClickTreeNode
var lastRightClickTreeId;
var lastRightClickTreeNode;
function treeOverlays_OnRightClick(event, treeId, treeNode) {
  if (treeNode == null) {
    return
    return;
  }
  var layer = layersObj[treeNode.uuid]
  var layer = layersObj[treeNode.uuid];
  if (!layer || !layer.hasZIndex) {
    return
    return;
  }
  //右击时的节点
  lastRightClickTreeId = treeId
  lastRightClickTreeNode = treeNode
  lastRightClickTreeId = treeId;
  lastRightClickTreeNode = treeNode;
  var top = event.clientY
  var left = event.clientX
  var maxtop = document.body.offsetHeight - 100
  var maxleft = document.body.offsetWidth - 100
  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
    top = maxtop;
  }
  if (left > maxleft) {
    left = maxleft
    left = maxleft;
  }
  $('#content_layer_manager_rMenu')
  $("#content_layer_manager_rMenu")
    .css({
      top: top + 'px',
      left: left + 'px',
      top: top + "px",
      left: left + "px",
    })
    .show()
  $('body').bind('mousedown', onBodyMouseDown)
    .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()
  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()
  $("body").unbind("mousedown", onBodyMouseDown);
  $("#content_layer_manager_rMenu").hide();
}
function bindRightMenuEvnet() {
  $('#content_layer_manager_rMenu li').on('click', function () {
    hideRMenu()
  $("#content_layer_manager_rMenu li").on("click", function () {
    hideRMenu();
    var type = $(this).attr('data-type')
    moveNodeAndLayer(type)
  })
    var type = $(this).attr("data-type");
    moveNodeAndLayer(type);
  });
}
//移动节点及图层位置
function moveNodeAndLayer(type) {
  var treeObj = $.fn.zTree.getZTreeObj(lastRightClickTreeId)
  var treeObj = $.fn.zTree.getZTreeObj(lastRightClickTreeId);
  //获得当前节点的所有同级节点
  var childNodes
  var parent = lastRightClickTreeNode.getParentNode()
  var childNodes;
  var parent = lastRightClickTreeNode.getParentNode();
  if (parent == null) {
    childNodes = treeObj.getNodes()
    childNodes = treeObj.getNodes();
  } else {
    childNodes = parent.children
    childNodes = parent.children;
  }
  var thisNode = lastRightClickTreeNode
  var thisLayer = layersObj[thisNode.uuid]
  var thisNode = lastRightClickTreeNode;
  var thisLayer = layersObj[thisNode.uuid];
  switch (type) {
    default:
      break
    case 'up': //图层上移一层
      break;
    case "up": //图层上移一层
      {
        let moveNode = thisNode.getPreNode()
        let moveNode = thisNode.getPreNode();
        if (moveNode) {
          treeObj.moveNode(moveNode, thisNode, 'prev')
          let moveLayer = layersObj[moveNode.uuid]
          treeObj.moveNode(moveNode, thisNode, "prev");
          let moveLayer = layersObj[moveNode.uuid];
          exchangeLayer(thisLayer, moveLayer)
          exchangeLayer(thisLayer, moveLayer);
        }
      }
      break
      break;
    case 'top': //图层置于顶层
    case "top": //图层置于顶层
      {
        if (thisNode.getIndex() == 0) {
          return
          return;
        }
        while (thisNode.getIndex() > 0) {
          //冒泡交换
          let moveNode = thisNode.getPreNode()
          let moveNode = thisNode.getPreNode();
          if (moveNode) {
            treeObj.moveNode(moveNode, thisNode, 'prev')
            treeObj.moveNode(moveNode, thisNode, "prev");
            let moveLayer = layersObj[moveNode.uuid]
            exchangeLayer(thisLayer, moveLayer)
            let moveLayer = layersObj[moveNode.uuid];
            exchangeLayer(thisLayer, moveLayer);
          }
        }
      }
      break
      break;
    case 'down': //图层下移一层
    case "down": //图层下移一层
      {
        let moveNode = thisNode.getNextNode()
        let moveNode = thisNode.getNextNode();
        if (moveNode) {
          treeObj.moveNode(moveNode, thisNode, 'next')
          treeObj.moveNode(moveNode, thisNode, "next");
          let moveLayer = layersObj[moveNode.uuid]
          exchangeLayer(thisLayer, moveLayer)
          let moveLayer = layersObj[moveNode.uuid];
          exchangeLayer(thisLayer, moveLayer);
        }
      }
      break
    case 'bottom': //图层置于底层
      break;
    case "bottom": //图层置于底层
      {
        if (thisNode.getIndex() == childNodes.length - 1) {
          return
          return;
        }
        while (thisNode.getIndex() < childNodes.length - 1) {
          //冒泡交换
          let moveNode = thisNode.getNextNode()
          let moveNode = thisNode.getNextNode();
          if (moveNode) {
            treeObj.moveNode(moveNode, thisNode, 'next')
            treeObj.moveNode(moveNode, thisNode, "next");
            let moveLayer = layersObj[moveNode.uuid]
            exchangeLayer(thisLayer, moveLayer)
            let moveLayer = layersObj[moveNode.uuid];
            exchangeLayer(thisLayer, moveLayer);
          }
        }
      }
      break
      break;
  }
  //按order重新排序
  layers.sort(function (a, b) {
    return a.zIndex - b.zIndex
  })
    return a.zIndex - b.zIndex;
  });
}
/**
@@ -388,13 +414,13 @@
 */
function exchangeLayer(layer1, layer2) {
  if (layer1 == null || layer2 == null) {
    return
    return;
  }
  var or = layer1.zIndex
  layer1.zIndex = layer2.zIndex //向上移动
  layer2.zIndex = or //向下移动
  var or = layer1.zIndex;
  layer1.zIndex = layer2.zIndex; //向上移动
  layer2.zIndex = or; //向下移动
  console.log(`${layer1.name}:${layer1.zIndex},  ${layer2.name}:${layer2.zIndex}`)
  console.log(`${layer1.name}:${layer1.zIndex},  ${layer2.name}:${layer2.zIndex}`);
  // //向上移动
  // thisWidget.udpateLayerZIndex(layer1, layer1.zIndex)
@@ -406,11 +432,11 @@
//地图图层添加移除监听,自动勾选
function updateCheckd(name, checked) {
  var treeObj = $.fn.zTree.getZTreeObj('treeOverlays')
  var nodes = treeObj.getNodesByParam('name', name, null)
  var treeObj = $.fn.zTree.getZTreeObj("treeOverlays");
  var nodes = treeObj.getNodesByParam("name", name, null);
  if (nodes && nodes.length > 0) {
    treeObj.checkNode(nodes[0], checked, false)
    treeObj.checkNode(nodes[0], checked, false);
  } else {
    console.log('未在图层树上找到图层“' + name + '”,无法自动勾选处理')
    console.log("未在图层树上找到图层“" + name + "”,无法自动勾选处理");
  }
}