skyline二次开发之工程树渲染

开发手册sgworld->projecttree->具体方法
shyline开发手册里面提供了对工程树的开发接口，一般用到的就是获取工程树的id（通过接口可以获取该节点对象的子节点对象id和兄弟节点对象id），然后通过id获取到名字，最后再渲染到页面树形展示。

(在重写工程树之前，应该关闭默认的工程树标签)

上代码

// 初始化sgworld，加载fly文件
window.onload = function POpen() {
    try {
        sgworld = new CreateSGObj();
        sgworld.Project.Open("D:\\GIS\\file\\old-file\\3-24.FLY", true, "", "");
    } catch (e) {}
}

function CreateSGObj() {
    try {
        var obj = document.getElementById("sgworld");
        if (obj == null) {
            obj = document.createElement('object');
            obj.setAttribute("id", "sgworld");
            obj.setAttribute("classid", "CLSID:3A4F919C-65A8-11D5-85C1-0001023952C1");
            document.body.appendChild(obj);
        }
        return obj;
    } catch (e) {
        alert(e);
    }
}

加载fly工程文件之后，操作工程树：

// 递归创建项目树和项目树功能实现
/**存储结构
 * {c1b:{
 * 		c1b:true
 * },
 * dain:true,
 * }
 */
function ScanTree() {
    document.getElementById("container").innerHTML = ""
    try {
        var id = sgworld.ProjectTree.FindItem("c1b");
        if (id)
            console.log("已经找到节点,该节点的id是" + id);
        else
        // alert("节点不存在项目树中");
            var root = sgworld.ProjectTree.GetNextItem("", 18 /* 18表示项目树的根节点*/ );

        root = sgworld.ProjectTree.GetNextItem(root, 13 /* 13表示当前节点的下一个节点*/ );
        BuildTreeRecursive(root, 1, tree);
        generate(tree, document.getElementById('container'));
    } catch (ex) {
        alert("发生错误: " + ex.description);
    }
}

function BuildTreeRecursive(current, indent, t) {
    // 当前节点不为空时循环建树
    while (current) {
        var obj = new Object
        var currentName = sgworld.ProjectTree.GetItemName(current)
            // indent == 1,时为对象赋初始值
        console.dir(currentName)
        if (indent == 1)
            t[currentName] = true
            //若当前节点是组，则可能有子节点
        if (sgworld.ProjectTree.IsGroup(current)) {
            var child = sgworld.ProjectTree.GetNextItem(current, 11 /* 11表示当前节点的子节点*/ );
            // 当有子节点时时循环建树
            if (child) {
                var childName = sgworld.ProjectTree.GetItemName(child)
                obj[childName] = true
                t[currentName] = obj
            }
            // 递归建树
            BuildTreeRecursive(child, indent + 1, t[currentName]);
        }
        // 对下一个节点做相同操作
        current = sgworld.ProjectTree.GetNextItem(current, 13 /* 13表示当前节点的下一个节点*/ );
    }
}

将得到的树形对象渲染出来

{
	q:{w:{e:True}
		},
	t:{
		y:{g:True}，
			.....	
		},
		.......
}

//这里生成DOM
function generate(tree, par) {
    for (var attr in tree) {
        var ele = document.createElement('li');
        if (!tree[attr])
            ele.innerHTML = ' <input type="checkbox"></input>' + attr;
        else {
            ele.innerHTML = '<span><span class="open" οnclick="toshow(this)">0</span><input type="checkbox" checked="checked" οnclick="checkChange(this)"></input><span class="Tree" οndblclick="flyToWhere(this)">' + attr + '</span></span>';
            var nextpar = document.createElement('ul');
            ele.appendChild(nextpar);
            generate(tree[attr], nextpar);
        }
        par.appendChild(ele);
    }
}
//###############################################
这部分函数是上面DOM的触发函数
// 定位到项目树的元素，页面上的表现就是视角飞到该对象处
function flyToWhere(eve) {
    var id = sgworld.ProjectTree.FindItem(eve.textContent)
    if (id)
        sgworld.Navigate.FlyTo(id)
}
// //树形展开和收起
function toshow(eve) {
    var par = eve.parentNode.nextElementSibling;
    if (par.style.display == 'none') {
        par.style.display = 'block';
        eve.className = 'open';
    } else {
        par.style.display = 'none';
        eve.className = 'close';
    }
}

渲染之后，html页面可以看到树形组件。