OL3中结合Jquery UI实现图层拖动并改变图层顺序
来源:互联网 发布:亚思捷软件 编辑:程序博客网 时间:2024/06/06 14:11
概述:
本文讲述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)
阅读全文
0 0
- OL3中结合Jquery UI实现图层拖动并改变图层顺序
- jquery 拖动图层
- Photoshop脚本 > 复制图层并改变图层顺序
- JQUERY实现拖动层
- jquery ui 实现弹层,无遮罩,可拖动,可缩放
- jQuery 实现拖动浮动层
- 可拖动图层
- 拖动图层
- jquery-拖动层(五)
- js实现拖动改变层的大小(宽度)
- 信息对话框弹窗口,弹出层并可拖拽,图层弹出拖动
- javascript中拖动层
- 拖动层并播放动画
- 拖动层并播放动画
- JQuery特效,拖动窗口,层
- jquery,div层拖动,排序
- jquery 可以拖动div层
- jquery插件:拖动任意层
- Hbase整合hive
- 远程开机的原理与代码实现
- Python双线程使用
- 树莓派3安装openCV
- John (尼姆博弈)
- OL3中结合Jquery UI实现图层拖动并改变图层顺序
- 头文件集锦
- selenium抓取四六级成绩
- activiti报错:no deployed process definition found with id
- ios xcode7 兼容问题
- 计算几何基础知识
- 格式化时间startTime和endTime的 时间差
- linux驱动开发之字符设备--内核和用户空间数据的交换(read write)
- 常见对象-StringBuffer的两个小面试题