如何用Openlayers EasyUI Tree实现动态长尾词图层控制？

本文共计967个文字，预计阅读时间需要4分钟。

本文以Openlayers、EasyUI和Tree组件为基础，分享了一个动态实现图层控制的实例代码。以下为整体内容概述：

功能介绍- 实现基于Openlayers3.0和EasyUI+Tree的图层控制功能。

主要功能- 图层显示与隐藏控制。- 树形结构展示图层信息。

实现步骤

1.初始化Openlayers地图。

2.创建EasyUI的Tree组件，用于展示图层信息。

3.根据Tree组件的选中状态，控制图层的显示与隐藏。

代码示例

javascript// 初始化地图var map=new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([0, 0]), zoom: 2 })});

// 创建Tree组件$('#tree').tree({ data: [ { id: '1', text: '图层1', state: { checked: true } }, { id: '2', text: '图层2', state: { checked: false } } ], onCheck: function(node) { var layerId=node.id; var layer=map.getLayers().getArray().find(layer=> layer.getId()===layerId); layer.setVisible(node.state.checked); }});

本文实例为大家分享了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" ></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: '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: '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

图层数据格式

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