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动态设置样式实现代码(2)
Jan 25 Javascript
js编写trim()函数及正则表达式的运用
Oct 24 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
简述JS控制台的使用
Jul 15 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 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
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
javascript 动态添加表格行
2006/06/22 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
2014/11/06 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
使用Vuex实现一个笔记应用的方法
2018/03/13 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
Python 列表list使用介绍
2014/11/30 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python中几种操作字符串的方法的介绍
2015/04/09 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
Python hashlib模块用法实例分析
2018/06/12 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
七一党建活动方案
2014/01/28 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
质量承诺书格式范文
2015/04/28 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
推广普通话主题班会
2015/08/17 职场文书
基于Python实现将列表数据生成折线图
2022/03/23 Python
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python