OpenLayers3基础教程——OL3 介绍control
概述:
本文讲述的是Ol3中的control的介绍和应用。
OL2和OL3 control比较:
相比较Ol2的control,OL3显得特别少,下图分别为Ol2和Ol3的control:
Ol2的control
Ol3的control
相比较Ol2,OL3保留了mouseposition,scaleline,zoom,zoomslider,而将很多东西例如draw等转移到了interaction下面,下图为Ol3的interaction:
OL3中control的常用操作:
Ol3中control的常用操作包括获取control集,添加,删除。
获取control集
var controls = map.getControls();
添加
map.addControl(ctrl);
删除
map.removeControl(ctrl);
OL3添加control示例:
下面是一个比较完成的OL3的Control的示例,
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>control</title><link rel="stylesheet" type="text/css" href="http://localhost/ol3/css/ol.css"/><style type="text/css">body, #map {border: 0px;margin: 0px;padding: 0px;width: 100%;height: 100%;font-size: 13px;}#location{position: absolute;bottom: 10px;left: 45%;font-weight: bold;z-index: 99;}#switch{position:absolute;right:20pt;top:40pt;z-index:999;}#rotation{position: absolute;top: 10px;left: 45%;font-weight: bold;z-index: 99;}.ol-zoomslider{background: #d0e5f5;width: 20px;}.zoom-to-extent{position: absolute;top: 5pt;left: 28pt;}.map-rotate{position: absolute;top: 5pt;left: 45%;}</style><script type="text/javascript" src="http://localhost/ol3/build/ol.js"></script><script type="text/javascript" src="http://localhost/jquery/jquery-1.8.3.js"></script><script type="text/javascript">function init(){var format = 'image/png';var bounds = [73.4510046356223, 18.1632471876417,134.976797646506, 53.5319431522236];var controls = new Array();//鼠标位置var mousePositionControl = new ol.control.MousePosition({className: 'custom-mouse-position',target: document.getElementById('location'),coordinateFormat: ol.coordinate.createStringXY(5),//保留5位小数undefinedHTML: ' '});controls.push(mousePositionControl);//缩放至范围var zoomToExtentControl = new ol.control.ZoomToExtent({extent: bounds,className: 'zoom-to-extent',tipLabel:"全图"});controls.push(zoomToExtentControl);//比例尺var scaleLineControl = new ol.control.ScaleLine({});controls.push(scaleLineControl);//全图var fullScreenControl = new ol.control.FullScreen({});controls.push(fullScreenControl);//缩放控件var zoomSliderControl = new ol.control.ZoomSlider({});controls.push(zoomSliderControl);var rotate = new ol.control.Rotate({
// label:"↑",tipLabel:"重置",target:document.getElementById('rotation'),autoHide:false});controls.push(rotate);var untiled = new ol.layer.Image({source: new ol.source.ImageWMS({ratio: 1,url: 'http://localhost:8081/geoserver/lzugis/wms',params: {'FORMAT': format,'VERSION': '1.1.1',LAYERS: 'lzugis:province',STYLES: ''}})});var projection = new ol.proj.Projection({code: 'EPSG:4326',units: 'degrees'});var map = new ol.Map({controls: ol.control.defaults({attribution: false}).extend(controls),interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotateAndZoom()]),target: 'map',layers: [untiled],view: new ol.View({projection: projection,rotation:-45})});map.getView().fitExtent(bounds, map.getSize());$("#setRotate").on("click",function(){var angle = $("#rotate").val();map.getView().setRotation(angle);});}</script>
</head>
<body onLoad="init()">
<div class="layer-change-switch" id="switch"><div id="slider"><input id="rotate" type="text" value="-45" maxlength="10" style="width: 50px;" /><button id="setRotate">旋转</button></div>
</div>
<div id="map"><div id="rotation"></div><div id="location"></div>
</div>
</body>
</html>
上述代码效果如下:
相关课程:
OpenLayers3基础教程——OL3基本概念
OpenLayers3基础教程——加载资源
OpenLayers3基础教程——OL3 介绍control相关推荐
- (转) OpenLayers3基础教程——OL3 介绍control
http://blog.csdn.net/gisshixisheng/article/details/46761535 概述: 本文讲述的是Ol3中的control的介绍和应用. OL2和OL3 co ...
- (转)OpenLayers3基础教程——OL3 介绍interaction
http://blog.csdn.net/gisshixisheng/article/details/46808647 概述: 本节主要讲述OL3的交互操作interaction,重点介绍draw,s ...
- OpenLayers3基础教程——OL3之Popup
概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用Overlay取代OL2的Popup功能. 接口简单介绍: overlay跟ol.control.Control一样,是一 ...
- (转)OpenLayers3基础教程——OL3基本概念
http://blog.csdn.net/gisshixisheng/article/details/46756275 OpenLayers3基础教程--OL3基本概念 从本节开始,我会陆陆续续的更新 ...
- OpenLayers3基础教程——OL3基本概念
从本节开始,我会陆陆续续的更新有关OL3的相关文章--OpenLayers3基础教程,欢迎大家关注我的博客,同时也希望我的博客能够给大家带来一点帮助. 概述: OpenLayers 3对OpenLay ...
- (转)OpenLayers3基础教程——OL3之Popup
http://blog.csdn.net/gisshixisheng/article/details/46794813 概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用O ...
- (转) OpenLayers3基础教程——加载资源
概述: 本节讲述如何在Ol3中加载wms图层并显示到地图中. Ol3下载: 你可以在OL官网去下载,下载地址为http://openlayers.org/download/,也可以去我的百度云盘下载, ...
- Easy-x的基础教程使用介绍
文章目录 前言 一.绘制 边框绘制 图形绘制 批量绘图 二.输出 三.输入 四.事件响应 鼠标事件响应 键盘事件响应 五.多媒体 图片 音频 六.其他 读写应用 ...
- ppt python 爬虫_python基础教程 PPT-python为什么叫爬虫
看过了Python基础教程,接下来应该怎么做 看完基础教程代表你已经入门了,接下来就需要你做一下项目,把书本上的知识转化为自己的,活学活用,之后再进行中高级的学习! Python基础教程的介绍 本书包 ...
最新文章
- 2020-09-18
- CreateDirectory GetCurrentDirectory 和SetCurrentDirectory
- ubuntu首次给root用户设置密码和root用户登录设置
- Pyhton基础篇(2)-变量、用户输入及条件语句(已更新)
- 服务器数据库怎么添加计划维护,服务器数据库怎么添加计划维护
- android 服务端 导入工程,如何导入与配置从网上下载的android源代码及服务器端源代码...
- Docker for windows 容器内网通过独立IP直接访问的方法
- [OpenGL ES 02]OpenGL ES渲染管线与着色器
- 超2亿学生集体上线 在线教育概念股齐飞
- 一个html文件创造多个页面,使页眉和页脚文件包含在多个html页面中。
- pythonwhile循环love_while循环简介
- OpenGL纹理贴图流程
- 汽车诊断协议 - CAN BUS协议
- 盘点python socket 中recv函数的坑
- 8款主流Scrum敏捷开发工具评测,建议先马后看!
- jquery - How can I recurse up a DOM tree? - Stack Overflow
- 【此后无良辰】实验13 FAT12文件系统
- HBuilderX 插件下载失败 解决
- android单点触摸事件,Android多点触控详解
- 交互式电子杂志_HUAWEI Magazine电子杂志阅读平台上线