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 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
javascript英文日期(有时间)选择器
May 02 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
纯javascript实现四方向文本无缝滚动效果
Jun 16 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
js模糊查询实例分享
Dec 26 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
Ajax实现局部刷新的方法实例
Mar 31 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
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
javascript使用闭包模拟对象的私有属性和方法
2016/10/05 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
Vue.js用法详解
2017/11/13 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
nuxt中使用路由守卫的方法步骤
2019/01/27 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
vue 翻页组件vue-flip-page效果
2020/02/05 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
Python代码解决RenderView窗口not found问题
2016/08/28 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
python连接mongodb集群方法详解
2020/02/13 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
关于Theano和Tensorflow多GPU使用问题
2020/06/19 Python
pycharm专业版远程登录服务器的详细教程
2020/09/15 Python
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
幼师自荐信
2013/10/26 职场文书
幼师专业求职推荐信
2013/11/08 职场文书
公务员群众路线心得体会
2014/11/03 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
婚礼答谢礼品
2015/01/20 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS