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 相关文章推荐
jQuery 使用手册(三)
Sep 23 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
vue之debounce属性被移除及处理详解
Nov 13 Javascript
JS中多层次排序算法的实现代码
Jan 06 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
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
zTree插件下拉树使用入门教程
2016/04/11 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
2017/07/07 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
从源码看angular/material2 中 dialog模块的实现方法
2017/10/18 Javascript
在iFrame子页面里实现模态框的方法
2018/08/17 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
python dict remove数组删除(del,pop)
2013/03/24 Python
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
Python编程之属性和方法实例详解
2015/05/19 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Python tkinter label 更新方法
2018/10/11 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
Django实现基于类的分页功能
2019/10/31 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
环卫工人节活动总结
2014/08/29 职场文书
纪检干部个人对照检查材料
2014/09/23 职场文书
走群众路线学习笔记
2014/11/06 职场文书
会计求职信怎么写
2015/03/20 职场文书
社会实践活动总结格式
2015/05/11 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
欠款证明
2015/06/24 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python