OpenLayers3加载常用控件使用方法详解


Posted in Javascript onSeptember 25, 2020

本文实例为大家分享了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),因此我们可以通过鼠标在地图容器的左上角的缩放按钮,以及右下角的图层数据源控件来对地图进行操作。

OpenLayers3加载常用控件使用方法详解

2. 控件

2.1 导航控件

导航控件就是实现对地图的按级缩放,拖动导航条的上的滑块可以实现缩放操作。OpenLayers 3 框架提供的控制地图缩放的相关控件包括地图缩放控件(ol.control.Zoom)、缩放滑块(ol.control.ZoomSlider)、按钮式缩放到特定范围的控件(ol.control.ZoomToExtent),可以自定义这些控件的样式。
下面我们将通过修改地图缩放的相关控件的默认样式,实现一个导航条,效果如下:

OpenLayers3加载常用控件使用方法详解

实现步骤如下:

(1)新建一个页面,加载OSM瓦片地图,具体可以查看这篇文章OpenLayers3基础教程之实现地图显示功能
(2)地图加载完成后,通过初始化ZoomSlider、ZoomToExtent、控件,并通过addControl方法将控件加载到地图容器中。

代码如下

<!DOCTYPE html>
<html>

<head>
 <meta charset="utf-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title>自定义导航功能</title>
 <!-- 引入ol.css,以及ol.css -->
 <link rel="stylesheet" href="css/ol.css" rel="external nofollow" >
 <script src="js/ol.js"></script>
 <style>
 #map {
 width: 100%;
 height: 100%;
 position: absolute;
 }
 </style>
 <script>
 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);
 }
 </script>
</head>

<body onload="init()">
 <div id="map"></div>
</body>

</html>

代码说明:首先实例化控件对象,然后调用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;
}

实现效果如下

OpenLayers3加载常用控件使用方法详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
JQuery实现Ajax加载图片的方法
Dec 24 Javascript
Angularjs material 实现搜索框功能
Mar 08 Javascript
javascript获取wx.config内部字段解决微信分享
Mar 09 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
在webstorm中配置less的方法详解
Sep 25 #Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 #Javascript
Javascript confirm多种使用方法解析
Sep 25 #Javascript
OpenLayers3实现地图显示功能
Sep 25 #Javascript
openlayers实现图标拖动获取坐标
Sep 25 #Javascript
openlayers实现地图弹窗
Sep 25 #Javascript
openlayers实现地图测距测面
Sep 25 #Javascript
You might like
用PHP制作静态网站的模板框架
2006/10/09 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
js 控制图片大小核心讲解
2013/10/09 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
跟老齐学Python之Python安装
2014/09/12 Python
python django事务transaction源码分析详解
2017/03/17 Python
python使用Turtle库绘制动态钟表
2018/11/19 Python
Python3简单实现串口通信的方法
2019/06/12 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
如何导出python安装的所有模块名称和版本号到文件中
2020/06/05 Python
python实现移动木板小游戏
2020/10/09 Python
小程序canvas中文字设置居中锚点
2019/04/16 HTML / CSS
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
物流合作计划书
2014/01/10 职场文书
求职信模板怎么做
2014/01/26 职场文书
自强之星事迹材料
2014/05/12 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
地雷战观后感
2015/06/09 职场文书
繁星春水读书笔记
2015/06/30 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书