Openlayers学习之加载鹰眼控件

更新时间：2020年09月28日 11:04:26 作者：桃李不言_下自成蹊

这篇文章主要介绍了Openlayers学习之加载鹰眼控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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、结果展示

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

OpenLayers3实现地图鹰眼以及地图比例尺的添加

js传递数组参数到后台controller的方法
下面小编就为大家分享一篇js传递数组参数到后台controller的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
json属性名为什么要双引号(个人猜测)
json属性名为什么要双引号？更加规范,利于解析、避免class等关键字引起的不兼容问题,需要的朋友可以参考下
2014-07-07
JS中对象与字符串的互相转换详解
下面小编就为大家带来一篇JS中对象与字符串的互相转换详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
小程序文字跑马灯效果
这篇文章主要为大家详细介绍了小程序文字跑马灯效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
ElementUI table无缝循环滚动的示例代码
这篇文章主要介绍了ElementUI table无缝循环滚动的示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08
Bootstrap作品展示站点实战项目2
这篇文章主要为大家分享了Bootstrap作品展示站点实战项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
javaScript中json字符串操作详细例子
JSON(JavaScript Object Notation)是JavaScript编程语言的一个子集,正因JSON是JavaScript的一个子集,所以它可清晰的运用于此语言中,这篇文章主要给大家介绍了关于javaScript中json字符串操作的相关资料,需要的朋友可以参考下
2023-11-11
如何在vscode中使用Typescript并运行详解
在VSCode中编写的TypeScript代码不能直接运行,需要先用tsc编译为JavaScript,然后才能运行,下面这篇文章主要给大家介绍了关于如何在vscode中使用Typescript并运行的相关资料,需要的朋友可以参考下
2023-05-05
javascript实现的仿51job地址多项选择方式效果
分享一个类似51job方式的地址选择效果
2009-12-12
jQuery检查元素存在性(推荐)
这篇文章主要介绍了JavaScript检查元素存在性的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-09-09