伟景行 citymaker 从入门到精通（2）——工程图层树加载

工程树是指explorer左边这棵树

本例子实现了图层树加载，点击节点切换可视状态

树控件使用easyui的树

---

• html部分

onCheck:treeProjectTreeOnCheck是指树节点的onCheck是js函数treeProjectTreeOnCheck

     <div data-options="region:'center',fit:true">
         <object id="__g" type="application/x-cm-3d" style="width: 100%; height: 100%;"></object>
     </div>
     <div data-options="region:'west',split:true" style="width: 300px;">
         <!-- 工程的树 -->
         <ul id="treeProjectTree" class="easyui-tree" data-options="checkbox:true,animate:true,onCheck:treeProjectTreeOnCheck" style="width: 100%; height: 100%;">
         </ul>
     </div>

---

• script部分

        // 空项的itemid
        var emptyItemId = "00000000-0000-0000-0000-000000000000";

        // 获取树节点（循环）
        function addProjectTreeNodeLoop(parentId, nodes) {
            var projecrTree = __g.objectManager.getProjectTree();
            // 获取父节点的第一个子节点
            var itemId = projecrTree.getNextItem(parentId, 11);

            // 当当前节点不等于空节点
            while (itemId != emptyItemId) {
                // 组节点
                if (projecrTree.isGroup(itemId) == true) {
                    var node = {};
                    // 项的名称
                    node.text = projecrTree.getItemName(itemId);
                    // 可视：0不可见，1可见，2部分可见
                    var visibility = projecrTree.getVisibility(itemId);
                    node.checked = visibility == 1 ? true : false;
                    node.itemId = itemId;
                    node.children = [];
                    nodes.push(node);

                    // 继续遍历子项
                    addProjectTreeNodeLoop(itemId, node.children);
                } else {
                    var node = {};
                    node.text = projecrTree.getItemName(itemId);
                    var visibility = projecrTree.getVisibility(itemId);
                    node.checked = visibility == 1 ? true : false;

                    node.itemId = itemId;

                    nodes.push(node);
                }

                // 获取当前项的同级的下一项
                itemId = projecrTree.getNextItem(itemId, 13);
            }
        }

        // 工程树的节点check事件
        function treeProjectTreeOnCheck(node, checked) {
            var projecrTree = __g.objectManager.getProjectTree();
            // 控制工程树的可视
            projecrTree.setVisibility(node.itemId, checked == true ? 1 : 0);
        }

        //初始化工程树
        function initProjectTree() {
            var nodes = [];
            // 根节点ItemId
            var rootId = __g.objectManager.getProjectTree().rootID;
            // 获取树所有节点
            addProjectTreeNodeLoop(rootId, nodes);

            //填充节点数据到树控件
            $('#treeProjectTree').tree({
                data: nodes
            });
        }

        $(function ($) {
            // 初始化三维控件
            initAxControl();
            //cep文件路径，本地路径也行
            var cepPath = "http://192.168.15.53:32555/default.cep";
            //打开cep
            __g.project.open(cepPath, false, "");

            //初始化工程树
            initProjectTree();
        });

---

• 最终效果：

代码下载：

链接：http://pan.baidu.com/s/1ge9yLLT 密码：39g1

---

全系列链接：

伟景行 citymaker 从入门到精通系列