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 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
javascript 中__proto__和prototype详解
Nov 25 Javascript
JavaScript删除指定子元素代码实例
Jan 13 Javascript
使用mouse事件实现简单的鼠标经过特效
Jan 30 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
浅谈Node Inspector 代理实现
Oct 19 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 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
获取URL文件名后缀
2013/10/24 PHP
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
php文件包含的几种方式总结
2019/09/19 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
js实现表格字段排序
2014/02/19 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
Vue实现table上下移动功能示例
2019/02/21 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
2020/09/10 Javascript
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
Python开发编码规范
2006/09/08 Python
使用python删除nginx缓存文件示例(python文件操作)
2014/03/26 Python
Python实现的tab文件操作类分享
2014/11/20 Python
python numpy格式化打印的实例
2018/05/14 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
python图片二值化提高识别率代码实例
2019/08/24 Python
Python配置文件处理的方法教程
2019/08/29 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
html5的canvas实现3d雪花飘舞效果
2013/12/27 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
函授本科个人自我鉴定
2014/03/25 职场文书
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
工程部经理岗位职责
2015/02/02 职场文书
六一亲子活动感想
2015/08/07 职场文书
如何用python绘制雷达图
2021/04/24 Python
比较node.js和Deno
2021/04/27 Javascript