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>
上述代码效果例如以下：
相关课程：
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvR0lTU2hpWGlTaGVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
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对OpenL ...
- （转）OpenLayers3基础教程——OL3之Popup
http://blog.csdn.net/gisshixisheng/article/details/46794813 概述: 本节重点讲述OpenLayers3中Popup的调用时实现,OL3改用O ...
- ActiveMQ基础教程----简单介绍与基础使用
概述 ActiveMQ是由Apache出品的,一款最流行的,能力强劲的开源消息总线.ActiveMQ是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provider实现,它非常快速,支持多 ...
- Embedded Linux Primer----嵌入式Linux基础教程--章节介绍
章节介绍 第一章,“导引”,简要介绍了Linux被迅速应用在嵌入式环境的驱动因素,介绍了与嵌入式Linux相关的几个重要的标准和组织. 第二章,“第一个嵌入式经历”,介绍了与后几章所构建的嵌入式Lin ...
- （转） OpenLayers3基础教程——加载资源
概述: 本节讲述如何在Ol3中加载wms图层并显示到地图中. Ol3下载: 你可以在OL官网去下载,下载地址为http://openlayers.org/download/,也可以去我的百度云盘下载, ...
随机推荐
- getLocationInWindow getLocationOnScreen getLeft , getTop, getBottom,getRight
版权声明:本文为博主原创文章,未经博主允许不得转载. 最近做项目时,发现在activity的onCreate()和onResume()方法里调用View.getLocationInWindow() 时 ...
- EOJ 1113 装箱问题
有一个箱子容量为 V (正整数,0≤V≤20000),同时有 n 个物品(0<n≤30),每个物品有一个体积(正整数).要求从 n 个物品中,任取若干个装入箱内,使箱子的剩余空间为最小. Inp ...
- SpringAop中JoinPoint对象
来自:http://blog.csdn.net/it_zouxiang/article/details/52576917 JoinPoint的用法 JoinPoint 对象 JoinPoint对象封装 ...
- 基于Apache Thrift的公路涵洞数据交互实现原理
基于Apache Thrift的公路涵洞数据交互实现原理 Apache Thrift简介 Apache Thrift(以下简称为“Thrift”) 是 Facebook 实现的一种高效的.支持多种编程 ...
- Spring《八》AOP/代理类定义
Spring通知 Interception Around通知 MethodInterceptor类(方法执行前后通知) Before通知 MethodBeforeAdvice类(方法执行前通知) Af ...
- 详解DevExpress.LookUpEdit控件实现自动搜索定位功能(转)
转载自csdn博客 爱拼才会赢 的博客 地址是详解DevExpress.LookUpEdit控件实现自动搜索定位功能(转)
- os.clock()导致的bug
os.clock () 功能:返回一个程序使用CPU时间的一个近似值 最近做了一个功能,这个功能需要统计时间间隔,例如每隔0.5秒做一次调用. 我用了os.clock()去统计时间,结果在pc机上都没 ...
- ES6变量的解构赋值
变量的解构赋值 1.数组的解构赋值 2.对象的解构赋值 3.字符串的解构赋值 4.数值和布尔值的解构赋值 5.函数参数的解构赋值 6.圆括号问题 7.用途 1.数组的解构赋值 ES6 允许写成下面这样 ...
- HTML与CCS(十一)
1.1 HTML介绍 1.1.1 Web服务本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) s ...
- 开发手机APP过程，不同使用场景APP搜索框的样式及区别
搜索框是 app 内最常见的控件之一,可以帮助用户快速又精准找到期望的内容与功能.不同的使用场景下,根据页面中搜索的重要程度,搜索框也有着不同的样式. 下面就常州开发APP公司和大家聊聊常见的四种样式 ...