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

图层数据格式