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 相关文章推荐
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
Sep 12 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
AngularJS表格添加序号的方法
Mar 03 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
基于jstree使用AJAX请求获取数据形成树
Aug 29 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
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
简体中文转换为繁体中文的PHP函数
2006/10/09 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
JavaScript对内存分配及管理机制详细解析
2013/11/11 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
Angular实现响应式表单
2017/08/04 Javascript
从零开始搭建一个react项目开发
2018/02/09 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
小程序实现投票进度条
2019/11/20 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
Python聊天室实例程序分享
2016/01/05 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
Python交互式图形编程的实现
2019/07/25 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Python importlib动态导入模块实现代码
2020/04/16 Python
什么是makefile? 如何编写makefile?
2012/08/08 面试题
工商企业管理实习自我鉴定
2013/12/04 职场文书
趣味运动会活动方案
2014/02/12 职场文书
二手房买卖协议书
2014/04/10 职场文书
2014年财政工作总结
2014/12/10 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书