openlayers添加按钮_OpenLayers3加载常用控件使用方法详解
本文实例为大家分享了OpenLayers3加载常用控件使用的具体代码,供大家参考,具体内容如下
1. 前言
地图控件就是对地图的缩放、全屏、坐标显示控件等,方便我们对地图进行操作。OpenLayers 3 封装了很多常用的地图控件,例如地图导航、比例尺、鹰眼、测量工具等,这些控件都是基于ol.control.Control虚基类进行封装,ol.control.Control的子类为各类常用的地图控件,可以通过Map对象的Control参数进行设置或者通过addControl方法将控件添加到地图窗口中。
在加载地图时OpenLayers 3 通过ol.control.defaults 默认加载了三个常用的空间:缩放控件(ol.control.Zoom)、旋转控件(ol.control.Roate)、图层数据源属性控件(ol.control.Attribution),因此我们可以通过鼠标在地图容器的左上角的缩放按钮,以及右下角的图层数据源控件来对地图进行操作。
2. 控件
2.1 导航控件
导航控件就是实现对地图的按级缩放,拖动导航条的上的滑块可以实现缩放操作。OpenLayers 3 框架提供的控制地图缩放的相关控件包括地图缩放控件(ol.control.Zoom)、缩放滑块(ol.control.ZoomSlider)、按钮式缩放到特定范围的控件(ol.control.ZoomToExtent),可以自定义这些控件的样式。
下面我们将通过修改地图缩放的相关控件的默认样式,实现一个导航条,效果如下:
实现步骤如下:
(1)新建一个页面,加载OSM瓦片地图,具体可以查看这篇文章OpenLayers3基础教程之实现地图显示功能
(2)地图加载完成后,通过初始化ZoomSlider、ZoomToExtent、控件,并通过addControl方法将控件加载到地图容器中。
代码如下
自定义导航功能
#map {
width: 100%;
height: 100%;
position: absolute;
}
function init() {
//实例化Map对象,用于加载地图
var map = new ol.Map({
target: 'map', //地图容器div的id
//在地图容器中加载的图层
layers: [
//加载瓦片图层数据
new ol.layer.Tile({
source: new ol.source.OSM() //加载osm瓦片
})
],
//地图视图设置
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
//实例化ZoomSlider控件并加载到地图容器中
var zoomslider = new ol.control.ZoomSlider();
map.addControl(zoomslider);
//实例化zoomToExent控件并加载到地图容器中
var zoomToExent = new ol.control.ZoomToExtent({
extend: [13100000, 4290000,
13200000, 5210000
]
});
map.addControl(zoomToExent);
}
代码说明:首先实例化控件对象,然后调用Map的addControl方法加载到地图容器即可,代码中的ZoomToExtent控件的extent参数为地图的缩放范围,就是将当前地图缩放到此范围,在视图中会显示此范围。
2.2 修改缩放控件样式
我们可以通过css样式来设置Zoom、ZoomSlider、ZoomToExtent 的样式,调整他在地图中显示的位置。代码如下:
#map .ol-zoom .ol-zoom-out {
margin-top: 204px;
}
#map .ol-zoomslider {
background-color: transparent;
top: 2.3em;
}
#map .ol-touch .ol-zoom .ol-zoom-out {
margin-top: 212px;
}
#map .ol-touch .ol-zoomslider {
top: 2.75em;
}
#map .ol-zoom-in.ol-has-tooltip:hover [role=tooltip],
#map .ol-zoom-in.ol-has-tooltip:focus [role=tooltip] {
top: 3px;
}
#map .ol-zoom-out.ol-has-tooltip:hover [role=tooltip],
#map .ol-zoom-out.ol-has-tooltip:focus [role=tooltip] {
top: 232px;
}
/*设置缩放控件ZoomToExtent的样式,将其放到导航条下方
*/
#map .ol-zoom-extent {
top: 280px;
}
实现效果如下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
openlayers添加按钮_OpenLayers3加载常用控件使用方法详解相关推荐
- CGContextRef绘图-iOS球形波浪加载进度控件-HcdProcessView详解
简书也有发布:http://www.jianshu.com/p/20d7... <iOS球形波浪加载进度控件-HcdProcessView>这篇文章已经展示了我在项目中编写的一个球形进度加 ...
- togglebutton用法 java_Android中ToggleButton开关状态按钮控件使用方法详解
ToggleButton开关状态按钮控件使用方法,具体内容如下 一.简介 1. 2.ToggleButton类结构 父类是CompoundButton,引包的时候注意下 二.ToggleButton开 ...
- C#:Krypton控件使用方法详解(第八讲) ——kryptonBreadCrumb
今天介绍的Krypton控件中的kryptonBreadCrumb,下面开始介绍这个控件的属性: 首先要介绍的是RootItem属性和外观属性: RootItem属性组中包含属性如下: image属性 ...
- android勾选控件_Android中CheckBox复选框控件使用方法详解
CheckBox复选框控件使用方法,具体内容如下 一.简介 1. 2.类结构图 二.CheckBox复选框控件使用方法 这里是使用java代码在LinearLayout里面添加控件 1.新建Linea ...
- VS2013以上版本加载VisionPro控件的方法
一.新建项目 二.选择工具->工具选项 三.选择".NET Framework Components"->"Browse",注意:本文Vision ...
- C#:Krypton控件使用方法详解(第十七讲) ——kryptonDateTimePicker
今天介绍的Krypton控件中的kryptonDateTimePicker. 下面介绍控件的外观属性: Cursor属性:表示鼠标移动过该控件的时候,鼠标显示的形状.属性值如下图所示: DropDow ...
- wxpython使用方法_python图形界面开发之wxPython树控件使用方法详解
wxPython树控件介绍 树(tree)是一种通过层次结构展示信息的控件,如下图所示是树控件示例,左窗口中是树控件,在wxPython中树控件类是wx.TreeCtrl. wx.TreeCtrl常用 ...
- C#:Krypton控件使用方法详解(第一讲) —— kryptonButton
今天介绍的Krypton控件中的kryptonButton,这个控件和VS中带的Button控件还是不一样的,下面介绍这个控件. 这个控件的属性如下图所示: 首先要介绍这个kryptonButton控 ...
- C#:Krypton控件使用方法详解(第五讲) ——kryptonPanel
今天介绍的Krypton控件中的kryptonPanel,下面开始介绍这个控件的属性: 首先要介绍的是这个控件的外观属性: Cursor属性:表示鼠标移动过这个控件的时候,鼠标的显示状态.具体属性值有 ...
最新文章
- idea创建Struts2 项目并运行
- python广告搞笑_技术入门 | 听说Python的广告刷爆了你的朋友圈?
- 用于WWW传输控制的是HTML,控制传输
- django-admin.py创建项目失败解决方法
- Python变量的复制
- outlook自动保存html,当创建一个新的HTML电子邮件时保持默认的Outlook格式
- 双稳态电路的两个稳定状态是什么_利用SR锁存器实现SPDT开关消抖电路
- Android学习笔记---27_网络通信之通过GET和POST方式提交参数给web应用,以及使用httpClient,来给web项目以post方式发送参数
- 使用API网关构建微服务
- c语言开根号不用math,c语言sqrt求平方根 该函数头文件:math.h;
- AFNetworking 2.0 来了
- Android知识梳理:点击事件分发机制
- python正则表达式快速入门_Python 正则表达式入门
- Image caption领域的研究现状及分析
- java linux路径带括号,java执行linux命令 括号
- 宝德自强AI智能小站 PI300T
- Java 操作 word 文档 (二)初识 WordprocessingML 标签
- 《Web全栈工程师的自我修养》浓缩笔记(上)
- css 网页自适应 @media screen详解
- python通过手机拍摄的视频图片进行人脸头像采集
热门文章
- 盒马申请多个“屁股脸”商标被驳回!其IP盒马先生被网友戏称:“屁股脸”...
- 5G iPhone SE或将在明年一季度推出 明年有望生产3000万部
- 周鸿祎评互联网大佬编程能力:自己可以排前三!是谁排第一?
- 三天内出现多次晃动,华强北最高楼今日起已被封闭了
- 上海新阳半导体收到ASML-1400光刻机 将用于研发193nm ArF光刻胶
- 马云终于露面了!发表千字演讲
- 江淮大众正式更名,今日盘中涨停!
- 支付宝区块链授权专利212件 位居全球第一!
- LV也开启了直播首秀,一个小时吸引超1.5万人观看
- 三大运营商公布11月运营数据:中国移动固网业务表现亮眼