OpenLayers3实现地图鹰眼以及地图比例尺的添加


Posted in Javascript onSeptember 25, 2020

本文实例为大家分享了OpenLayers3实现地图鹰眼以及地图比例尺的添加的具体代码,供大家参考,具体内容如下

1. 前言

地图鹰眼就是地图的鸟瞰图,就是通常所说的小地图,我们可以通过鹰眼得到当前地图的显示位置,也可以在鹰眼上单击、拖动或移动到想要查看的位置,鹰眼的可见区域比我们所看的主视区的范围要大,鹰眼的中心框就是主视区的可视范围, Openlayers 3 封装的鹰眼控件为 ol.control.OverviewMap ,可以自定义其显示的样式。

2. 实现思路

(1)新建一个网页,并参考前面的文章实现地图显示功能,加载 OSM 瓦片图层。
(2)实例化一个鹰眼控件(ol.control.OverviewMap),跟前面的一样,可以实例化一个默认的鹰眼控件,也可以根据需要设置其参数。
(3)将实例化的鹰眼控件加载到地图容器中。可以在实例化地图容器 Map 的代码中,通过设置 controls 参数加载鹰眼控件,也可以调用 map 对象的 addControl 方法加载控件。

3. 实现代码

HTML:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <title>加载鹰眼控件以及实现地图比例尺</title>
 <link rel="stylesheet" href="css/bootstrap.min.css" >
 <link rel="stylesheet" href="css/ol.css" >
 <link rel="stylesheet" href="css/ZoomSlider.css" >
 <script src="js/ol.js"></script>
 <script src="js/OverviewMap.js"></script>
 <style>
 #map {
  width: 100%;
  height: 100%;
 }
 /* 自定义样式控件 */

 .ol-custom-overviewmap,
 .ol-custom-overviewmap.ol-uncollapsible {
  bottom: auto;
  left: auto;
  right: 0;
  /*右侧显示*/
  top: 0;
  /*顶部显示*/
 }
 /* 鹰眼控件展开时控件外框的样式 */

 .ol-custom-overviewmap:not(.ol-collapsed) {
  border: 1px solid black;
 }
 /* 鹰眼控件中地图容器的样式 */

 .ol-custom-overviewmap .ol-overviewmap-map {
  border: none;
  width: 300px;
 }
 /* 在鹰眼控件中显示当前窗口中主图区域的边框 */

 .ol-custom-overviewmap .ol-overviewmap-box {
  border: 2px solid red;
 }
 /* 在鹰眼控件张开时其控件按钮图标的样式 */

 .ol-custom-overviewmap:not(.ol-collapsed) button {
  bottom: auto;
  left: auto;
  right: 1px;
  top: 1px;
 }
 </style>
</head>

<body onload="init()">
 <div id="map"></div>
</body>

</html>

代码解析

上面的代码主要是用于定义鹰眼的样式,,通过 ol-custom-overviewmap 将鹰眼控件设置为右侧顶部显示,并设置鹰眼控件外框,鹰眼中地图容器以及鹰眼按钮的样式。

js代码:

function init() {
 // 实例化鹰眼控件(OverviewMap),自定义其样式
 var overviewMapControl = new ol.control.OverviewMap({
 className: 'ol-overviewmap ol-custom-overviewmap', //鹰眼控件样式
 // 在鹰眼中加载相同坐标系下不同数据源的图层
 layers: [
  new ol.layer.Tile({
  source: new ol.source.OSM({
   'url': 'http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg'
  })
  })
 ],
 collapseLabel: '\u00BB', //鹰眼控件展开时功能按钮上的标识
 label: '\u00AB', //鹰眼控件折叠时功能按钮上的标识
 collapsed: false //初始为展开方式
 });
 // 实例化map对象,用于加载地图
 var map = new ol.Map({
 target: 'map', //地图容器的div
 // 在地图容器中加载的图层
 layers: [
  new ol.layer.Tile({ //加载瓦片图层数据
  source: new ol.source.OSM() //加载OSM瓦片图层数据
  })
 ],
 // 地图视图设置
 view: new ol.View({
  center: [12000000, 4000000], //设置初始中心
  zoom: 8 //地图初始显示中心
 }),
 // 加载控件到地图容器中
 // 加载鹰眼控件
 controls: ol.control.defaults().extend([overviewMapControl])
 });
}

代码解析

上面代码实例化了一个鹰眼控件,并通过设置控件的相关参数。

(1)layers:鹰眼容器内加载的图层,鹰眼容器与地图容器类似,可以根据需要加载不同于主图的图层数据,但是要主图与鹰眼的缩略图在同一个坐标系下。
(2)collapseLabel:将鹰眼控件展开时功能按钮上的标识。
(3)label:鹰眼控件折叠时功能按钮上的标识,与collapseLabel相对。
(4)collapsed:鹰眼控件初始加载时是否展开显示,false为展开状态。
(5)className:为鹰眼控件的类名,根据此类名来定义整个鹰眼控件的样式。

4. 实现效果

OpenLayers3实现地图鹰眼以及地图比例尺的添加

5. 比例尺的添加

添加比例尺的方法,只要是通过实例化一个比例尺控件(ol.control.ScaleLine),可以根据应用需求进行设置参数,比如可以设置比例尺的单位(units)等。然后通过地图容器 Map 设置其controls 参数进行加载比例尺控件,也可以通过调用 map 对象的 addControl 方法加载控件。

主要代码如下

// 实例化比例尺控件
var scaleLineControl = new ol.control.ScaleLine({
 // 设置比例尺单位为degrees、imperial、us、nautical或metric(度量单位)
 units: "metric"
 });

map.addControl(scaleLineControl);

实现效果

OpenLayers3实现地图鹰眼以及地图比例尺的添加

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
详解javascript表单的Ajax提交插件的使用
Dec 29 Javascript
js实现漫天星星效果
Jan 19 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
Jul 24 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 Javascript
js实现随机点名
Jan 19 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 #Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 #Javascript
OpenLayers3实现图层控件功能
Sep 25 #Javascript
OpenLayers实现图层切换控件
Sep 25 #Javascript
OpenLayers3实现对地图的基本操作
Sep 28 #Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 #Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 #Javascript
You might like
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
解析PHP 5.5 新特性
2013/07/02 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
javascript 触发事件列表 比较不错
2009/09/03 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
分数霸榜! python助你微信跳一跳拿高分
2018/01/08 Python
Python日期时间对象转换为字符串的实例
2018/06/22 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
python-地图可视化组件folium的操作
2020/12/14 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
实习期自我鉴定
2013/10/11 职场文书
就业协议书样本
2014/08/20 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python
Android开发手册自定义Switch开关按钮控件
2022/06/10 Java/Android