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 相关文章推荐
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
vue生命周期的探索
Apr 03 Javascript
详解如何理解vue的key属性
Apr 14 Javascript
jQuery实现评论模块
Aug 19 jQuery
详解JavaScript中的执行上下文及调用堆栈
Apr 29 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
在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
自动分页的不完整解决方案
2007/01/12 PHP
php中设置多级目录session的问题
2011/08/08 PHP
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
php微信公众平台开发类实例
2015/04/01 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
PHP进阶学习之依赖注入与Ioc容器详解
2019/06/19 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
Express + Session 实现登录验证功能
2017/09/08 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
python防止随意修改类属性的实现方法
2019/08/21 Python
python同时替换多个字符串方法示例
2019/09/17 Python
Python绘制二维曲线的日常应用详解
2019/12/04 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
python实现AdaBoost算法的示例
2020/10/03 Python
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
幼儿园评语大全
2014/04/17 职场文书
小班评语大全
2014/05/04 职场文书
美容院合作经营协议书
2014/10/10 职场文书
文明单位申报材料
2014/12/23 职场文书
先进个人自荐书
2015/03/06 职场文书
《山中访友》教学反思
2016/02/24 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
JPA如何使用entityManager执行SQL并指定返回类型
2021/06/15 Java/Android
图文详解matlab原始处理图像几何变换
2021/07/09 Python