Openlayers学习之加载鹰眼控件


Posted in Javascript onSeptember 28, 2020

本文实例为大家分享了Openlayers学习之加载鹰眼控件,供大家参考,具体内容如下

1、新建一个html页面,引入ol.js和ol.css文件,然后在body中创建一个div标签,用来作为地图加载的容器;

2、代码实现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 <link href="../css/ol.css" rel="stylesheet" />
 <script src="../lib/ol/ol.js"></script>
 <style type="text/css">
   /*自定义鹰眼样式*/
   .myOverview,.myOverview.ol-uncollapsible
   {
    bottom:auto;
    left:auto;
    right:0px;
    top:0px;
   }
   /*鹰眼控件展开时的控件外边框*/
   .myOverview:not(.ol-collapsed)
   {
    border:1px solid black;
   }
   /*鹰眼控件地图容器边框样式*/
   .myOverview .ol-overviewmap-map
   {
    border:none;
    width:300px;
   }
   /*鹰眼控件中显示当前窗口区域的边框样式*/
   .myOverview .ol-overviewmap-box
   {
    border:2px solid red;
   }
   /*鹰眼控件展开时其控件按钮图标的样式*/
   .myOverview:not(.ol-collapsed) button
   {
    bottom:auto;
    left:auto;
    right:1px;
    top:1px;
   }
 </style>
 <script type="text/javascript">
  window.onload = function () {
   //实例化鹰眼控件
   var overviewMapControl = new ol.control.OverviewMap({
   //加载鹰眼控件中显示的图层
   layers: [
     //加载瓦片数据源
     new ol.layer.Tile({
      source: new ol.source.OSM({
       'url':'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
      })
     })
   ],
   //鹰眼控件一开始为展开方式
   collapsed: false,
   //鹰眼控件的样式名称
   className:'ol-overviewmap myOverview'
   });
 
   //实例化地图对象
   var map = new ol.Map({
    target: 'map',
    layers: [
     new ol.layer.Tile({
      source: new ol.source.OSM()
     }),
    ],
    view: new ol.View({
     center: [0, 0],
     zoom: 3
    })
   });
 
   //将鹰眼控件加载到map中
   map.addControl(overviewMapControl);
  }
 </script>
</head>
<body>
 <div id="map"></div>
</body>
</html>

3、结果展示

初始化地图完成后,会在地图的右上角看见当前区域的鹰眼视图

Openlayers学习之加载鹰眼控件

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

Javascript 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
在HTML中插入JavaScript代码的示例
Jun 03 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
smartcrop.js智能图片裁剪库
Oct 14 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 #Javascript
Openlayers学习之地图比例尺控件
Sep 28 #Javascript
Openlayers实现地图的基本操作
Sep 28 #Javascript
TypeScript 运行时类型检查补充工具
Sep 28 #Javascript
基于openlayers实现角度测量功能
Sep 28 #Javascript
OpenLayer学习之自定义测量控件
Sep 28 #Javascript
Vue中父子组件的值传递与方法传递
Sep 28 #Javascript
You might like
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
PHP英文字母大小写转换函数小结
2014/05/03 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
js tab 选项卡
2009/04/26 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
jQuery 创建Dom元素
2010/05/07 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
javascript中类的定义方式详解(四种方式)
2015/12/22 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
AngularJS使用ng-repeat指令实现下拉框
2016/08/23 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
[02:15]2014DOTA2国际邀请赛 赛后退役选手回顾
2014/08/01 DOTA
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
Python识别html主要文本框过程解析
2020/02/18 Python
logging level级别介绍
2020/02/21 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
国际象棋商店:The Chess Store
2018/07/09 全球购物
2014年安全管理工作总结
2014/12/01 职场文书
教代会开幕词
2015/01/28 职场文书
置业顾问岗位职责
2015/02/09 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js