| | |
| | | '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 = { |
| | |
| | | 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 = { |
| | |
| | | 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); |
| | | } |
| | | } |
| | | |
| | |
| | | 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; |
| | | }); |
| | | } |
| | | |
| | | /** |
| | |
| | | */ |
| | | 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) |
| | |
| | | |
| | | //地图图层添加移除监听,自动勾选 |
| | | 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 + "”,无法自动勾选处理"); |
| | | } |
| | | } |