当前位置：首页 > article >正文

OpenLayers 加载鹰眼控件

article 2025/8/27 3:51:56

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key

地图控件是一些用来与地图进行简单交互的工具，地图库预先封装好，可以供开发者直接使用。OpenLayers具有大部分常用的控件，如缩放、导航、鹰眼、比例尺、旋转、鼠标位置等。这些控件都是基于

ol.control.Control基类进行封装的，可以通过Map对象的controls属性或者调用addControl方法添加到地图中。地图控件通过HTML插入到Map页面，可以利用CSS调整地图控件样式。OpenLayers初始化地图时利用ol.control.default默认加载了缩放控件（ol.control.Zoom）

本节主要介绍鹰眼控件。

1. 鹰眼控件

鹰眼叫做地图的鸟瞰图或者缩略图。在地图中，通过鹰眼可以知道地图当前的位置范围。在鹰眼中，可以移动或者拖动到目标位置。鹰眼显示范围大，内容相对粗略。OpenLayers鹰眼控件默认显示在地图左下角，可以通过修改CSS样式进行调整。

1.1. 创建鹰眼控件目标容器

创建鼠标位置DIV容器，并设置其CSS样式，鹰眼控件默认CSS类名为ol-overviewmap

<body><div id="map" title="地图显示"></div><div class="custome-overviewmap" id="custome-overviewmap"></div>
</body>

设置鹰眼控件居于地图右上角显示。

#custome-overviewmap{position: absolute;height: 160px;width: 170px;right: 0px;top: 10px;
}
.ol-overviewmap {left:0;bottom: 0;
}

1.2. 创建鹰眼控件

鹰眼控件可以设置自定义样式类名、目标容器、鹰眼图层等参数，默认可以不传参数。若想要将鹰眼控件至于目标容器中，需要传递目标容器样式类名以及放置鹰眼控件的目标容器（DOM对象）。

// 创建鹰眼控件
const overviewMapControl = new ol.control.OverviewMap({// 鹰眼控件自定义CSS类名className: "ol-overviewmap ol-custome-overviewmap",// 加载鹰眼图层，坐标系需要保持一致,若不设置鹰眼图层，将采用所有主地图图层取代layers: [new ol.layer.Tile({name:"天地图矢量图层",source: new ol.source.XYZ({url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2',wrapX:false})}),new ol.layer.Tile({name: "天地图矢量注记图层",source: new ol.source.XYZ({url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2',wrapX: false})})],// 控件展开标识collapseLabel: 'u00BB',// 控件折叠标识label: 'u00AB',// 设置控件展开collapsed: false,// 若想让鹰眼控件显示在地图HTML(viewport)外面，则需要提供target元素target: document.getElementById('custome-overviewmap'),// 收缩按钮提示文字tipLabel: "收缩按钮",// 自定义鹰眼控件视图，若不提供，则默认使用“EPSG:3857”投影坐标系// view:''
})

1.3. 加载鹰眼控件

加载鹰眼控件的方法有两种，一种是通过Map属性controls加载，另一种是通过Map方法addControl加载。

// 方式1
const map = new ol.Map({target: "map",view: new ol.View({center: [11444274, 12707441],zoom: 5,worldsWrap: true,minZoom: 1,maxZoom: 20,}),// 鼠标控件：鼠标在地图上移动时显示坐标信息。controls: ol.control.defaults().extend([overviewMapControl])
})// 方式2
map.addControl(overviewMapControl)

2. 完整代码

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>加载鹰眼控件</title><meta charset="utf-8" /><script src="../libs/js/ol-5.3.3.js"></script><script src="../libs/js/jquery-2.1.1.min.js"></script><link rel="stylesheet" href="../libs/css//ol.css"><style>* {padding: 0;margin: 0;font-size: 14px;font-family: '微软雅黑';}html,body{width:100%;height:100%;}#map {position: absolute;width: 100%;height: 100%;}#custome-overviewmap{position: absolute;height: 160px;width: 170px;right: 0px;top: 10px;}.ol-overviewmap {left:0;bottom: 0;}</style>
</head>
<body><div id="map" title="地图显示"></div><div class="custome-overviewmap" id="custome-overviewmap"></div>
</body>
</html>
<script>//==============================================================================////============================天地图服务参数简单介绍============================////================================vec：矢量图层=================================////================================img：影像图层=================================////================================cva：注记图层=================================////=========================其中：_c表示经纬度，_w表示投影=======================////==============================================================================//const TDTImgLayer = new ol.layer.Tile({title: "天地图影像图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地图注记描述",crossOrigin: "anoymous",wrapX: false})})const TDTImgCvaLayer = new ol.layer.Tile({title: "天地图影像注记图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2",attibutions: "天地图注记描述",crossOrigin: "anoymous",wrapX: false})})// 创建鹰眼控件const overviewMapControl = new ol.control.OverviewMap({// 鹰眼控件自定义CSS类名// className: "ol-overviewmap ol-custome-overviewmap",// 加载鹰眼图层，坐标系需要保持一致,若不设置鹰眼图层，将用所有主地图图层取代layers: [new ol.layer.Tile({name:"天地图矢量图层",source: new ol.source.XYZ({url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2',wrapX:false})}),new ol.layer.Tile({name: "天地图矢量注记图层",source: new ol.source.XYZ({url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=2a890fe711a79cafebca446a5447cfb2',wrapX: false})})],// 控件展开标识collapseLabel: 'u00BB',// 控件折叠标识label: 'u00AB',// 设置控件展开collapsed: false,// 若想让鹰眼控件显示在地图HTML(viewport)外面，则提供target元素target: document.getElementById('custome-overviewmap'),// 收缩按钮提示文字tipLabel: "收缩按钮",// 自定义鹰眼控件视图，若不提供，则默认使用“EPSG:3857”投影坐标系// view:''})const map = new ol.Map({target: "map",loadTilesWhileInteracting: true,view: new ol.View({center: [11444274, 12707441],zoom: 5,worldsWrap: true,minZoom: 1,maxZoom: 20,}),// 鼠标控件：鼠标在地图上移动时显示坐标信息。controls: ol.control.defaults().extend([// 加载鼠标控件// overviewMapControl])})map.addControl(overviewMapControl)map.addLayer(TDTImgLayer)map.addLayer(TDTImgCvaLayer)
</script>

❝

OpenLayers示例数据下载，请回复关键字：ol数据

全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试

❝

【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。

欢迎访问我的博客网站-长谈GIS：http://shanhaitalk.com

都看到这了，不要忘记点赞、收藏 + 关注哦！

本号不定时更新有关 GIS开发 相关内容，欢迎关注 !

OpenLayers 加载鹰眼控件

1. 鹰眼控件

1.1. 创建鹰眼控件目标容器

1.2. 创建鹰眼控件

1.3. 加载鹰眼控件

2. 完整代码

相关文章：

OpenLayers 加载鹰眼控件

Eigen与OpenCV矩阵操作全面对比：最大值、最小值、平均值

安全基础与协议分析

【Web前端】JavaScript入门与基础(一)

第一课：医学影像研究的科学思维与问题提出

前端大文件上传性能优化实战：分片上传分析与实战

数据的获取与读取篇---常见的数据格式JSON

【python代码】一些小实验

Linux服务器配置深度学习环境（Pytorch+Anaconda极简版）

Vue-创建应用/挂载应用/根组件模版-.vue单文件/应用配置

超低延迟音视频直播技术的未来发展与创新

虚拟文件(VFS)

Java 内存模型（JMM）深度解析：理解多线程内存可见性问题

转移dp简单数学数论

【大模型面试每日一题】Day 27：自注意力机制中Q/K/V矩阵的作用与缩放因子原理

Ubuntu24.04 LTS安装java8、mysql8.0

动静态库--

【检索增强生成（RAG）全解析】从理论到工业级实践

git clone时出现无法访问的问题

Lesson 22 A glass envelope

文件系统·linux

【Matlab】雷达图/蛛网图

【信息系统项目管理师】第24章：法律法规与标准规范 - 27个经典题目及详解

使用JProfiler进行Java应用性能分析

遥感解译项目Land-Cover-Semantic-Segmentation-PyTorch之一推理模型

最大似然估计（Maximum Likelihood Estimation, MLE）详解

【单片机】如何产生负电压?

Java 8 Stream 流操作全解析

java线程中断的艺术

【信息系统项目管理师】一文掌握高项常考题型-项目进度类计算