逻辑:
Ztree是树形选择器,下载地址
上代码(不会加载Cesium的看这里):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="Build/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<style>
@import url(Build/Cesium/Widgets/widgets.css);
.cesium-widget-credits {
display: none !important; /*去除Cesium默认版权信息*/
}
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<ul id="treeDemo" class="ztree" style="width: 230px; overflow: auto"></ul>
<div id="cesiumContainer"></div>
//加载Cesium的必要js
<script src="Build/Cesium/Cesium.js"></script>
//加载ztree的必要js
<script type="text/javascript" src="Build/zTree_v3/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="Build/zTree_v3/js/jquery.ztree.core.min.js"></script>
<script type="text/javascript" src="Build/zTree_v3/js/jquery.ztree.excheck.min.js"></script>
//Cesium的初始化
<script>
var viewer = new Cesium.Viewer("cesiumContainer", {
animation: false, //是否显示动画控件
timeline: false, //是否显示时间线控件
</script>
//zTree 树的功能代码
<script>
var setting = {
check: {
enable: true,
chkDisabledInherit: true
},
data: {
simpleData: {
enable: true
}
},
callback:{
onCheck:addd
}
};
var opp;
//这里是判断树里的选择框的状态,如果是未选中点击添加图层
function addd(event,treeId,treeNode){
if(treeNode.checked==true){
//添加的夜景地球
opp = window.viewer.imageryLayers.addImageryProvider(
new Cesium.IonImageryProvider({ assetId: 3812 })
);
}else{
window.viewer.imageryLayers.remove(opp);
}
}
var zNodes =[
{ id:1, pId:0, name:"图层", open:true},
{ id:11, pId:1, name:"Night Earth", open:true},
];
function disabledNode(e) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
disabled = e.data.disabled,
nodes = zTree.getSelectedNodes(),
inheritParent = false, inheritChildren = false;
if (nodes.length == 0) {
alert("请先选择一个节点");
}
if (disabled) {
inheritParent = $("#py").attr("checked");
inheritChildren = $("#sy").attr("checked");
} else {
inheritParent = $("#pn").attr("checked");
inheritChildren = $("#sn").attr("checked");
}
for (var i=0, l=nodes.length; i<l; i++) {
zTree.setChkDisabled(nodes[i], disabled, inheritParent, inheritChildren);
}
}
$.fn.zTree.init($("#treeDemo"), setting, zNodes);//初始化树
//-->
</script>
</body>
</html>
效果图
未打开图层时
打开图层后
这里选择的是Cesium提供的夜景地球,其他同理。代码都有注释,放心食用。