'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.noLayerManage) { return } var item = layer.options if (item.name == '未命名'||item.name== undefined) { return } var node = { id: layer.id, pId: layer.pid, name: layer.name, uuid: layer.uuid, } 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' node.checked = layer.isAdded && layer.show if (item._parent) { node._parent = item._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) {} 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 treeOverlays_onCheck(e, treeId, chktreeNode) { var treeObj = $.fn.zTree.getZTreeObj(treeId) //获得所有改变check状态的节点 var changedNodes = treeObj.getChangeCheckedNodes() for (var i = 0; i < changedNodes.length; i++) { var treeNode = changedNodes[i] treeNode.checkedOld = treeNode.checked var layer = layersObj[treeNode.uuid] if (layer == null) { continue } //显示隐藏透明度设置view if (treeNode.checked) { $('#' + treeNode.tId + '_range').show() if(treeNode.name == "土地利用现状"){ console.log(thisWidget.tuliDiv); } } else { $('#' + 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 }, 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 } } //处理图层显示隐藏 if (treeNode._parent) { var parentLayer = layersObj[treeNode._parent] thisWidget.updateLayerShow(layer, treeNode.checked, parentLayer) } else { thisWidget.updateLayerShow(layer, treeNode.checked) } } } //===================================透明度设置==================================== //在节点后添加自定义控件 function addOpacityRangeDom(treeId, tNode) { //if (tNode.icon == "images/folder.png") return; var layer = layersObj[tNode.uuid] if (!layer || !layer.hasOpacity) { return } var view = $('#' + tNode.tId) var silder = '' 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 }, }) } //===================================右键菜单==================================== 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 + '”,无法自动勾选处理') } }