Openlayers+EasyUI Tree动态实现图层控制

本文实例为大家分享了Openlayers+EasyUI Tree动态实现图层控制的具体代码,供大家参考,具体内容如下

功能介绍

主要功能

根据openlayers3.0与easyUI tree 功能实现图层显隐控制功能,达到子节点选择实现单个图层的显隐,父节点选择实现所有图层的显隐。

页面展示

Openlayers+EasyUI Tree动态实现图层控制

主要代码

HTML+CSS

#xuanfu1 {
 position: absolute;
 top: 50px;
 right: 40px;
 background-color: rgba(134,149,237,0.7);
 width: 170px;
 height: 300px;
 z-index: 1;
 }
<div id="main">
 <div id="xuanfu1">
 <ul id="tt" class="easyui-tree" data-options="checkbox:true"></ul> 
 </div>

 <div id="map" style="height: 100%;width:100%;position:relative;background:#ffffff"></div>
</div>

JS

$(document).ready(function () {
 $.ajax({
  url: "TCKZDataQuery",
  success: function (data) {
  var datatrans= JSON.parse(data);
  var dataArr = datatrans.rows;
  CreatTree(dataArr); //创建树
  AddLayers(dataArr); //添加图层
  },
 });
 TCKZguanlian(); //树与图层控制关联
 })

//-----------创建图层控制树----------
 function CreatTree(dataArr) {
 $('#tt').tree({
  data: [{
  id: 1,
  text: '功能图层',
  state: 'open',

  }, {
  id: 2,
  text: '专题图层',
  state: 'open',
  children: [{
   id: 21,
   text: '铁路线',
   checked: true,
  }, {
   id: 22,
   text: '车站',
   checked: true,
  }]
  }, {
  id: 3,
  text: '卫星影像',
  checked: true,
  }
  ]
 });
 
 var node = $('#tt').tree('find', 1);
 var nodes = [{ id: '11', text: '绘制图层', checked: true }];
 if (node) {
  for (i = 0; i < dataArr.length; i++) {
  var kejian;
  if (dataArr[i].VISIBLE == 'true') {
   kejian = true;
  } else {
   kejian = false;
  }
  nodes.push({ id: dataArr[i].ID, text: dataArr[i].TCM, checked: kejian });
  }
  $('#tt').tree('append', {
  parent: node.target,
  data: nodes
  });
 }
 }
//-----------树与图层控制关联------------
 function TCKZguanlian(){
 $("#tt").tree({
 >
#region 图层控制
 public ActionResult TCKZDataQuery()
 {
  string sql = " select * from TUCENG_DIC t ";
  string jsonData = http://www.cppcns.com/wangluo/javascript/GetJeJsonData(db.Database.Connection.ConnectionString, sql, Request);
  return Content(jsonData);
 }
 #endregion

图层数据格式

Openlayers+EasyUI Tree动态实现图层控制

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

Openlayers+EasyUI Tree动态实现图层控制

扫一扫手机访问