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 相关文章推荐
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 Javascript
jquery异步循环获取功能实现代码
Sep 19 Javascript
JavaScript字符串String和Array操作的有趣方法
Dec 18 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
javascript计时器详解
Feb 28 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
JavaScript中常用的验证reg
Oct 13 Javascript
JavaScript验证知识整理
Mar 24 Javascript
node文字生成图片的示例代码
Oct 26 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 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入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
thinkPHP5框架中widget的功能与用法详解
2018/06/11 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
JS代码放在head和body中的区别分析
2011/12/01 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
Mac 安装 nodejs方法(图文详细步骤)
2017/10/30 NodeJs
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
Python设计模式之代理模式简单示例
2018/01/09 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
基于python中theano库的线性回归
2018/08/31 Python
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
域名注册、建站工具、网页主机、SSL证书:Dynadot
2017/01/06 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
社区戒毒工作方案
2014/06/04 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
教师节横幅标语
2014/10/08 职场文书
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript