Openlayers+EasyUI Tree动态实现图层控制
(编辑:jimmy 日期: 2024/12/24 浏览:3 次 )
本文实例为大家分享了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: '专题图层', 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
图层数据格式
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:JS sort排序详细使用方法示例解析