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/,也可以去我的百度云盘下载, ...
随机推荐
- SQL SEVER 元年是1900年
用SQL语句求 本月第一天,怎么写? 可以这样写: SELECT DATEADD(mm,DATEDIFF(mm,0,GETDATE()),0); 按照日期函数DATEDIFF的定义,第二个参数是开始日 ...
- 轻快的vim（四）：修改
我想每个Coder都深刻的明白,修改这一操作在代码的世界里是多么重要 与其说修改,无非就是删除了再插入,但VIM把这两者结合的很有效率 闲话少说,让我们再次使用这轻快的VIM在code上起舞 字符替换 ...
- Gridview表格控件
Gridview表格控件 效果图: 分析: 使用和ListvVew很像,都是经过适配器将数据绑定到控件上 具体步骤如下: 1.创建GridView控件,并指定列数 android:numColumns ...
- php模版静态化技术
PHP页面的静态化很有必要,尤其是在CMS系统中,一些内容一旦生成,基本上不会有变化,这时如果用html将页面静态化,无疑会减少服务其解析PHP页面的负担.以下是看书学来的PHP静态化技术,记录之以备 ...
- AJAX复习笔记
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可况下更新以使网页实现异步更新. 工作原理: AJAX是基于现有的Internet ...
- Nginx实现负载均衡 + Keepalived实现Nginx的高可用
前言 使用集群是大中型网站解决高并发.海量数据问题的常用手段.当一台服务器的处理能力.存储空间不足时,不要企图去换更强大的服务器,对大型网站而言,不管多么强大的服务器,都满足不了网站持续增长的业务需求 ...
- 使用Android ADT最新开发工具后，新建项目出现appcompat v7 他是什么？
做Android开发的朋友最近会发现,更新ADT至22.6.0版本之后,创建新的安装项目,会出现appcompat_v7的内容.并且是创建一个新的内容就会出现.这到底是怎么回事呢?原来appcompa ...
- Android应用优化之代码检测优化
在网络层,互联网提供所有应用程序都要使用的两种类型的服务,尽管目前理解这些服务的细节并不重要,但在所有TCP/IP概述中,都不能忽略他们: 无连接分组交付服务(Connectionless Packe ...
- Fragment_动态加载
1.新建Fragment的XML布局文件. 2.在activity.xml中添加需要加载Fragment.列如: <?xml version="1.0" encoding=& ...
- hdu2112 HDU Today 基础最短路
这题的关键是把车站的名字转化为点的编号.我用的是map.声明一个map<string,int> st,然后按照字符串出现的次序给st赋值.例如:st[s1]=2;代表这字符串s1出现的次序 ...