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/,也可以去我的百度云盘下载, ...
随机推荐
- Windows下Go语言LiteIDE下载及安装
下载地址为 https://www.golangtc.com/download/liteide 我下载的是liteidex32.1windows-qt4.zip,下载之后解压,并将liteide文件 ...
- Working with macro signatures
https://docs.kentico.com/k11/macro-expressions/troubleshooting-macros/working-with-macro-signatures ...
- SQL Server的自动备份设置及排错记事
1.启动 SQL Server Management Studio管理器,登录进去. 2.在左侧可以看到这个,我们展开“管理”. 3.展开“管理”后,我们在“维护计划”项目上单击右键,在弹出菜单里选择 ...
- python print 显示不同的字体
显示格式: print('\033[显示方式;字体颜色;背景色m.....\033[0m') ------------------------------- 显示方式 | 效果 ----------- ...
- HBase编程 API入门系列之scan（客户端而言）（5）
心得,写在前面的话,也许,中间会要多次执行,连接超时,多试试就好了. package zhouls.bigdata.HbaseProject.Test1; import javax.xml.trans ...
- SQL使用总结——集合操作函数
Oracle中集合操作符专门用于合并多条select 语句的结果,包括:UNION, UNION ALL, INTERSECT, MINUS.当使用集合操作符时,必须确保不同查询的列个数和数据类型匹配 ...
- 5个对话框和FileStream:文件流
1.private void button1_Click(object sender, EventArgs e) { colorDialog1.ShowDialog();//显示颜色选择器 panel ...
- 图片全屏轮播插件poposlides
jQuery轻量级全屏自适应焦点图插件poposlides 在线演示本地下载
- vuex的状态管理模式
1.store.js Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需调用 Vue.use(Vuex)) state:存放数据. mutations:提交状态 ...
- android系统源码下载
ubuntu 安装git curl python 确保主目录下有一个 bin/ 目录,并且该目录包含在路径中: mkdir ~/bin PATH=~/bin:$PATH 下载 Repo 工具,并确 ...