Openlayers+EasyUI Tree动态实现图层控制


Posted in Javascript onSeptember 28, 2020

本文实例为大家分享了Openlayers+EasyUI Tree动态实现图层控制的具体代码,供大家参考,具体内容如下

功能介绍

主要功能

根据openlayers3.0与easyUI tree 功能实现图层显隐控制功能,达到子节点选择实现单个图层的显隐,父节点选择实现所有图层的显隐。

页面展示

Openlayers+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

图层数据格式

Openlayers+EasyUI Tree动态实现图层控制

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网页自动刷新,不产生嗒嗒声的一个解决方法
Mar 27 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
Three.js基础部分学习
Jan 08 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
vue+axios+promise实际开发用法详解
Oct 15 Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
Javascript中的解构赋值语法详解
Apr 02 Javascript
JS sort排序详细使用方法示例解析
Sep 27 #Javascript
vue中实现点击变成全屏的多种方法
Sep 27 #Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 #Javascript
React 条件渲染最佳实践小结(7种)
Sep 27 #Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 #Javascript
react-intl实现React国际化多语言的方法
Sep 27 #Javascript
Javascript异步流程控制之串行执行详解
Sep 27 #Javascript
You might like
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
移除AngularJS下URL中的#字符的方法
2015/06/19 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
详解Javacript和AngularJS中的Promises
2016/02/09 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
基于angular实现三级联动的生日插件
2017/05/12 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
2017/10/31 Javascript
Angular中使用MathJax遇到的一些问题
2017/12/15 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
微信小程序使用map组件实现解析经纬度功能示例
2019/01/22 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
python使用Geany编辑器配置方法
2020/02/21 Python
在python tkinter界面中添加按钮的实例
2020/03/04 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
秘书专业自荐信范文
2013/12/26 职场文书
英语专业学生个人求职信范文
2014/01/06 职场文书
2014年社区庆元旦活动方案
2014/03/08 职场文书
《风筝》教学反思
2014/04/10 职场文书
三八红旗集体先进事迹材料
2014/05/22 职场文书
幼儿园爱国卫生月活动总结
2014/06/30 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
如何利用js在两个html窗口间通信
2021/04/27 Javascript
Django项目如何正确配置日志(logging)
2021/04/29 Python
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL