Openlayers+EasyUI Tree動態(tài)實現(xiàn)圖層控制

更新時間：2020年09月28日 11:56:49 作者：零零圈圈

這篇文章主要為大家詳細(xì)介紹了Openlayers+EasyUI Tree動態(tài)實現(xiàn)圖層控制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Openlayers+EasyUI Tree動態(tài)實現(xiàn)圖層控制的具體代碼，供大家參考，具體內(nèi)容如下

功能介紹

主要功能

根據(jù)openlayers3.0與easyUI tree 功能實現(xiàn)圖層顯隱控制功能，達(dá)到子節(jié)點選擇實現(xiàn)單個圖層的顯隱，父節(jié)點選擇實現(xiàn)所有圖層的顯隱。

頁面展示

主要代碼

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); //創(chuàng)建樹
 AddLayers(dataArr); //添加圖層
 },
 });
 TCKZguanlian(); //樹與圖層控制關(guān)聯(lián)
 })

//-----------創(chuàng)建圖層控制樹----------
 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: '衛(wèi)星影像',
 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
 });
 }
 }
//-----------樹與圖層控制關(guān)聯(lián)------------
 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=='') { //如果為子節(jié)點
  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 {    //如果為父節(jié)點
  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([
 //定義鼠標(biāo)獲取坐標(biāo)控件
 new ol.control.MousePosition({
 projection: 'EPSG:4326',
 coordinateFormat: ol.coordinate.createStringXY(5)//坐標(biāo)精確度
 }),
 new ol.control.OverviewMap(),//縮略圖控件
 new ol.control.ScaleLine(),// 比例尺控件
 new ol.control.ZoomSlider(),// 縮放刻度控件
 ]),
 target: 'map',
 layers: [
 //鐵路線
 new ol.layer.Tile({
 title: '鐵路線', // 定義鐵路線wms地圖，geoserver發(fā)布
 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

圖層數(shù)據(jù)格式