OL3中结合Jquery UI实现图层拖动并改变图层顺序

概述：

本文讲述OL3中结合Jquery UI实现图层的拖动以及拖动好图层顺序的改变。

效果：

代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>静态图片-加载中国</title><link rel="stylesheet" href="https://openlayers.org/en/v4.1.1/css/ol.css" type="text/css"><link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><style type="text/css">body, #map {border: 0px;margin: 0px;padding: 0px;width: 100%;height: 100%;font-size: 13px;overflow: hidden;}#map{ background: url("../../images/bgImg.gif");background-repeat: inherit;}#sortable {position: absolute;right: 20px;bottom: 20px;z-index: 999; list-style-type: none; margin: 0; padding: 5px; padding-top: 10px; width: 200px; background: #D2E959;border: 1px solid #cccccc;box-shadow: 2px 2px 3px #bbbbbb;border-radius: 4px;}#sortable li { cursor:move; margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }#sortable li span { position: absolute; margin-left: -1.3em; }</style><!-- The line below is only needed for old environments like Internet Explorer and Android 4.x --><script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script><script src="https://openlayers.org/en/v4.1.1/build/ol.js"></script><script type="text/javascript" src="../../../../plugin/jquery/jquery-1.8.3.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><script type="text/javascript">var map, image;function init(){var projection = ol.proj.get("EPSG:3857");var vec_w = getTdtLayer("vec_w");var img_w = getTdtLayer("img_w");var ter_w = getTdtLayer("ter_w");var layers = [vec_w, img_w, ter_w];map = new ol.Map({controls: ol.control.defaults({attribution: false}),target: 'map',layers: layers,view: new ol.View({center: ol.proj.transform([104.214, 35.847], 'EPSG:4326', 'EPSG:3857'),zoom: 4})});var cva_w = getTdtLayer("cva_w");cva_w.setZIndex(100);map.addLayer(cva_w);var _layers = [{name:"矢量图",layer:vec_w},{name:"影像图",layer:img_w},{name:"地形图",layer:ter_w}];_layers = _layers.reverse();var _layerUl = $("#sortable");for(var i=0, len = _layers.length;i<len;i++){var li = $("<li/>").addClass("ui-state-default").html(_layers[i]["name"]);li.data("layer",_layers[i]["layer"]);_layerUl.append(li);}updateLayersIndex();_layerUl.sortable({stop: function(event, ui) {updateLayersIndex();}});function updateLayersIndex(){var _index = [30, 20, 10];for(var i=0,len=_index.length;i<len;i++){var _layer = $(_layerUl.children()[i]).data("layer");_layer.setZIndex(_index[i]);}}}function getTdtLayer(lyr){var url = "http://t0.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}";var layer = new ol.layer.Tile({source: new ol.source.XYZ({url:url})});return layer;}</script>
</head>
<body onLoad="init()">
<div id="map"><ul id="sortable"></ul>
</div>
</body>
</html>

-------------------------------------------------------------------------------------------------------------

技术博客

CSDN：http://blog.csdn.NET/gisshixisheng

博客园：http://www.cnblogs.com/lzugis/

在线教程

http://edu.csdn.Net/course/detail/799

Github

https://github.com/lzugis/

联系方式

q q:1004740957

e-mail:niujp08@qq.com

公众号:lzugis15

Q Q 群:452117357(webgis)

337469080(Android)

OL3中结合Jquery UI实现图层拖动并改变图层顺序相关推荐

jQuery UI sortable()实现拖动排序
Query UI的强大不用多说,今天来看下它的拖动排序功能,jQuery UI使用sortable()实现对元素拖动排序,首先来看下面这个简单的例子: <!DOCTYPE html> &l ...
jQuery UI全教程之一(dialog的使用教程)
jQuery UI目前的版本已经更新到了1.8.7.个人感觉和easyui相比起来,jQuery UI在界面的美观程度和可定制型更强一些.所以再次将一些jQuery UI组件的用法说明一下,方便日后查 ...
通过标准的 ASP.NET 控件来使用 jQuery UI
jQuery UI 提供了强大的前端功能,包括基于脚本和样式表的日历,拖放等等非常酷的特性,但是,这些都是基于 javascript 编程的,对于不太属性这门语言的程序员来说,掌握 jQuery UI ...
关于jQuery UI 使用心得及技巧
最近项目中使用了一些插件来做页面,这里把jQuery UI的使用分享出来,希望对新手有帮助.文章结尾附源码下载. 1 jQuery UI 有时你仅仅是为了实现一个渐变的动画效果而不得不把javasc ...
jQuery UI 使用心得及技巧
最近项目中使用了一些插件来做页面,这里把jQuery UI的使用分享出来,希望对新手有帮助.文章结尾附源码下载. 1 jQuery UI 有时你仅仅是为了实现一个渐变的动画效果而不得不把javasc ...
Jquery UI dialog弹出层插件
必须先下载Jquery UI插件然后再把下载的文档复制到项目中,可以复制你需要的单个插件 --------------------------------------具体代码如下---------- ...
Dijit、ExtJS、jQuery UI 异同浅析
钟思奇是 IBM CDL 的一名软件工程师,主要从事 Dojo 控件库及基于 J2EE 的项目开发,热衷于学习各类新技术. 王修文, 软件工程师, Sungard 王修文是 Sungard SGT ...
html下拉式列表框多选,基于jQuery UI的多项选择下拉列表框组件
jquery.multiselect.js是一款基于jQuery UI的多项选择下拉列表框组件.该下拉列表功能强大,可以实现多选和单选,可制作打开和关闭下拉框时的炫酷动画效果,提供丰富的回调函数和其它 ...
jquery.ui.draggable中文文档jquery 自由拖拽类~study~
为什么80%的码农都做不了架构师?>>> JQuery UI Draggable插件用来使选中的元素可以通过鼠标拖动. Draggable的元素受影响css: ui-dragg ...

OL3中结合Jquery UI实现图层拖动并改变图层顺序

OL3中结合Jquery UI实现图层拖动并改变图层顺序相关推荐

最新文章

热门文章