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判断是否为数字的4种方法及效率比较
Apr 01 Javascript
Yii2使用Bootbox插件实现自定义弹窗
Apr 02 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
Js的Array数组对象详解
Feb 22 Javascript
DWR3 访问WEB元素的两种方法实例详解
Jan 03 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
vue+koa2实现session、token登陆状态验证的示例
Aug 30 Javascript
vue 组件内获取actions的response方式
Nov 08 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 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连接Oracle数据库
2006/10/09 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
2014/10/10 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
js实现拉幕效果的广告代码
2015/09/02 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
Python模拟登录验证码(代码简单)
2016/02/06 Python
CentOS7.3编译安装Python3.6.2的方法
2018/01/22 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
python爬取youtube视频的示例代码
2021/03/03 Python
详解如何用canvas画一个微笑的表情
2019/03/14 HTML / CSS
eBay美国官网:eBay.com
2020/10/24 全球购物
编码转换,怎样实现将GB2312编码的字符串转换为ISO-8859-1编码的字符串
2014/01/07 面试题
编写strcpy函数
2014/06/24 面试题
机械化及自动化毕业生的自我评价分享
2013/11/06 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
社区健康教育工作方案
2014/06/03 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
先进个人材料怎么写
2014/12/30 职场文书
秦始皇兵马俑导游词
2015/02/02 职场文书
文化大革命观后感
2015/06/17 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers
Python自动化之批量处理工作簿和工作表
2021/06/03 Python
详细了解MVC+proxy
2021/07/09 Java/Android