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 相关文章推荐
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
jquery简单的拖动效果实现原理及示例
Jul 26 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
Jul 10 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
Aug 16 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
原生JS封装拖动验证滑块的实现代码示例
Jun 01 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 cookie的操作实现代码(登录)
2010/12/29 PHP
js和php邮箱地址验证的实现方法
2014/01/09 PHP
Windows下的PHP安装pear教程
2014/10/24 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
jquery.validate使用攻略 第三部
2010/07/01 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
jQuery.each使用详解
2015/07/07 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
微信小程序如何实现radio单选框单击打勾和取消
2020/01/21 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Python入门学习指南分享
2018/04/11 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
python selenium xpath定位操作
2020/09/01 Python
为什么需要版本控制?
2013/08/08 面试题
经济管理专业毕业生推荐信
2013/11/11 职场文书
年终总结会主持词
2014/03/25 职场文书
催款函范文
2015/06/24 职场文书
2016年11月份红领巾广播稿
2015/12/21 职场文书
广播稿:校园广播稿范文
2019/04/17 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
详解Python小数据池和代码块缓存机制
2021/04/07 Python