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学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
javascript生成不重复的随机数
Jul 17 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
详解Vue中localstorage和sessionstorage的使用
Dec 22 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
JS实现的碰撞检测与周期移动完整示例
Sep 02 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 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读取RSS feed的代码
2008/08/01 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
VUE实现一个分页组件的示例
2017/09/13 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
使用C语言来扩展Python程序和Zope服务器的教程
2015/04/14 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
python日志记录模块实例及改进
2017/02/12 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
使用OpenCV实现仿射变换—旋转功能
2019/08/29 Python
python根据时间获取周数代码实例
2019/09/30 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
详解Html5 Canvas画线有毛边解决方法
2018/03/01 HTML / CSS
庆元旦广播稿
2014/02/10 职场文书
党校学习心得体会范文
2014/09/09 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
街道社区活动报告
2015/02/05 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电