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下拉菜单语言选项简单实现
Sep 23 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
Jan 19 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
12个非常有用的JavaScript技巧
May 17 Javascript
node.js连接MongoDB数据库的2种方法教程
May 17 Javascript
vue实现全选、反选功能
Nov 17 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
express.js中间件说明详解
Mar 19 Javascript
vue实现路由懒加载及组件懒加载的方式
Jun 11 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 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
Array of country list in PHP with Zend Framework
2011/10/17 PHP
分享PHP header函数使用教程
2013/09/05 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
node.js适合游戏后台开发吗?
2014/09/03 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
javascript基于DOM实现权限选择实例分析
2015/05/14 Javascript
基于jQuery实现的菜单切换效果
2015/10/16 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
详解nodejs通过代理(proxy)发送http请求(request)
2017/09/22 NodeJs
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
[51:53]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第二场 11.01
2020/11/02 DOTA
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
python中pyplot基础图标函数整理
2020/11/10 Python
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
酒店销售主管岗位职责
2014/01/04 职场文书
小学生获奖感言范文
2014/02/02 职场文书
中式婚礼主持词
2014/03/13 职场文书
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
新学期国旗下演讲稿
2014/05/08 职场文书
2015年暑期见闻
2015/07/14 职场文书
Python如何使用循环结构和分支结构
2022/04/13 Python
nginx 配置指令之location使用详解
2022/05/25 Servers