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/,也可以去我的百度云盘下载, ...
随机推荐
- php连接符
php连接符 很多时候我们需要将几个字符串连接起来显示,在PHP中,字符串之间使用 “点” 来连接,也就是英文中的半角句号 " . " ." . " 是字符串连 ...
- 排序系列 之 冒泡排序及其改进算法 —— Java实现
冒泡排序算法 冒泡排序算法 改进一 冒泡排序算法 改进二 冒泡排序算法 改进三 冒泡排序算法 基本思想: 在要排序的一组数中,对当前还未排好序的范围内的全部数据,自上而下对相邻的两个数依次进行比较和调 ...
- IP与以太网的包收发操作
你好,这是<网络是怎样连接的>的第3篇读书笔记,第二章<用电信号传输TCP/IP>后半部分:IP与以太网的包收发操作. 先看下经典的TCP/IP四层模型: 通常,下层模块支撑上 ...
- Keras简单使用
Keras简单使用在keras中建立模型测试自己的图片一些有用的函数(持续更新) Keras简单使用 在keras中建立模型 相对于自己写机器学习相关的函数,keras更能快速搭建模型,流程如下: 通 ...
- js判读周末以及节假日
两个链接,搞定! http://bbs.csdn.net/topics/10417668 http://www.jb51.net/article/131660.htm
- Hadoop MapReduce编程 API入门系列之二次排序（十六）
不多说,直接上代码. -- ::, INFO [org.apache.hadoop.metrics.jvm.JvmMetrics] - Initializing JVM Metrics with pr ...
- C# DataTable常用方法总结
https://blog.csdn.net/wangzhen209/article/details/51743118
- Spring学习笔记之基础、IOC、DI（1）
0.0 Spring基本特性 Spring是一个开源框架:是基于Core来架构多层JavaEE系统 1.0 IOC 控制反转:把对象的创建过程交给spring容器来做. 1.1 application ...
- IDEA导入个性化主题的方法
IDEA的主题可以自定义,也可从网上下载 http://www.riaway.com/theme.php 喜欢的主题,保存到本地. 主题是一个jar的包.导入到idea的方法如下: file –> ...
- LINUX的signal
linux的信号来源 1.由一个进程发给另一个进程(或本身) 2.内核发给进程 信号的特征 异步的,分为可靠信号和不可靠信号. 进程收到信号时怎么处理 1.执行信号处理程序 2.如果收到信号时处在一个 ...