本文例項為大家分享了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;
 }

<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: '專題圖層',children: [{
   id: 21,text: '鐵路線',checked: true,{
   id: 22,text: '車站',}]
  },{
  id: 3,text: '衛星影像',}
  ]
 });
 
 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,"LAYERS": 'lzjgjt:chezhan_point',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

圖層資料格式

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。