• 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;
    			 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)

  • 相关阅读:
    jsonp原理
    Mysql FUNCTION 示例
    数据库设计心得
    《杀死一只知更鸟》读后感
    《必然》读后感
    承接各种字牌算法
    关于麻将的算法构想
    十三水最优组合问题快速运算求解方案
    如何表示扑克牌?
    如何比较牌大小?
  • 原文地址:https://www.cnblogs.com/lzugis/p/7224360.html
Copyright © 2020-2023  润新知