本文介绍如何在OpenLayers3中实现地图鹰眼和比例尺功能。通过实例化ol.control.OverviewMap配置鹰眼样式、图层及展开状态，并使用ol.control.ScaleLine设置比例尺单位。代码演示了如何将控件添加到地图容器，实现小地图导航与比例显示。
OpenLayers3实现地图鹰眼以及地图比例尺的添加
本文分享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. 实现效果
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);实现效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。