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

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

功能介绍

主要功能

根据openlayers3.0与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;
 }

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({
  onCheck: function (node) {
  var nodechi = $('#tt').tree('find', node.id);
  var nodechildren = $('#tt').tree("getChildren", nodechi.target);

  var AllLayers = map.getLayers().a;
  if (nodechildren == null || nodechildren=='') { //如果为子节点
   for (i = 0; i < AllLayers.length; i++) {
   var tcname1 = node.text;
   var tcname2 = AllLayers[i].get('title');
   if (tcname1 == tcname2) {
    AllLayers[i].setVisible(node.checked);
   }
   }
  } else {        //如果为父节点
   for (j = 0; j < nodechildren.length; j++) {
   var tcname1 = nodechildren[j].text;
   for (i = 0; i < AllLayers.length; i++) {
    var tcname2 = AllLayers[i].get('title');
    if (tcname1 == tcname2) {
    AllLayers[i].setVisible(node.checked);
    }
   }
   }
  }
  }
 })
 }

//定义地图
 var map = new ol.Map({
 controls: ol.control.defaults({
  attribution: false
 }).extend([
  //定义鼠标获取坐标控件
  new ol.control.MousePosition({
  projection: 'EPSG:4326',
  coordinateFormat: ol.coordinate.createStringXY(5)//坐标精确度
  }),
  new ol.control.OverviewMap(),//缩略图控件
  new ol.control.ScaleLine(),// 比例尺控件
  new ol.control.ZoomSlider(),// 缩放刻度控件
 ]),
 target: 'map',
 layers: [
  //铁路线
  new ol.layer.Tile({
  title: '铁路线', // 定义铁路线wms地图，geoserver发布
  visible: true,
  source: new ol.source.TileWMS({
   url: 'http://127.0.0.1:8085/geoserver/lzjgjt/wms',
   params: {
   'FORMAT': 'image/png',
   'VERSION': '1.1.1',
   tiled: true,
   "LAYERS": 'lzjgjt:xianlu_polyline',
   "exceptions": 'application/vnd.ogc.se_inimage',
   tilesOrigin: 93.408493 + "," + 32.439911
   }
  })
  }),
  //车站
  new ol.layer.Tile({
  title: '车站',
  visible: true,
  source: new ol.source.TileWMS({
   url: 'http://127.0.0.1:8085/geoserver/lzjgjt/wms',
   params: {
   'FORMAT': 'image/png',
   'VERSION': '1.1.1',
   tiled: true,
   "LAYERS": 'lzjgjt:chezhan_point',
   "exceptions": 'application/vnd.ogc.se_inimage',
   tilesOrigin: 93.487889 + "," + 32.441091
   }
  })
  }),
  
 ],
 view: new ol.View({
  center: ol.proj.fromLonLat([104.06684, 34.39373]),
  zoom: 6,
  //限制地图缩放级别
  minZoom: 4,
  maxZoom: 16,
 })
 });

C#

#region 图层控制
 public ActionResult TCKZDataQuery()
 {
  string sql = " select * from TUCENG_DIC t ";
  string jsonData = GetJeJsonData(db.Database.Connection.ConnectionString, sql, Request);
  return Content(jsonData);
 }
 #endregion

图层数据格式

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