概述:
本文讲述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; 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; 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)