❝
注：当前使用的是 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样式
<body>
<div id="map" title="地图显示"></div>
<div class="custome-scale-line" id="custome-scale-line"></div>
</body>
设置比例尺控件居于地图顶部，并居中显示。
#custome-scale-line{
position: relative;
margin: 0 auto;
top: 10px;
width: 200px;
text-align: center;
color: #fff;
border-radius: 5px;
}
.custome-scale-line-inner {
margin: 1px;
border: 1px solid #eee;
border-top: none;
color: #eee;
font-size: 10px;
text-align: center;
background: #060505ba;
will-change: contents,width;
}
1.2. 创建比例尺控件
比例尺控件可以设置单位、类名、目标容器等参数，默认可以不传参数。对于自定义比例尺控件，需要传递自定义样式类名以及放置比例尺控件的目标容器。
const scaleLineControl = new ol.control.ScaleLine({
// 'degrees-度', 'imperial-英制单位', 'nautical-海里', 'metric-米', 'us',默认值'metric'
units: 'metric',
// 自定义css类样式名
className: 'custome-scale-line',
// minWidth: 100,// 最小宽度，默认64
// 放置比例尺控件的目标容器
target: document.querySelector("#custome-scale-line")
})
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([
scaleLineControl
])
})
// 方式2
map.addControl(scaleLineControl)
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: '微软雅黑';
}
#map {
position: absolute;
width: 100%;
height: 100%;
}
#custome-scale-line{
position: relative;
margin: 0 auto;
top: 10px;
width: 200px;
text-align: center;
color: #fff;
border-radius: 5px;
}
.custome-scale-line-inner {
margin: 1px;
border: 1px solid #eee;
border-top: none;
color: #eee;
font-size: 10px;
text-align: center;
background: #060505ba;
will-change: contents,width;
}
</style>
</head>
<body>
<div id="map" title="地图显示"></div>
<div class="custome-scale-line" id="custome-scale-line"></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 scaleLineControl = new ol.control.ScaleLine({
units: 'metric', // 'degrees-度', 'imperial-英制单位', 'nautical-海里', 'metric-米', 'us',默认值'metric'
className: 'custome-scale-line',// 自定义css类样式名
// minWidth: 200,// 最小宽度
target: document.querySelector("#custome-scale-line"),// 放置比例尺控件的目标容器
})
const map = new ol.Map({
target: "map",
// layers:[tdtLayer,tdtzjLayer,tdtImageLayer,tdtImagezjLayer],
loadTilesWhileInteracting: true,
view: new ol.View({
center: [11444274, 12707441],
zoom: 5,
worldsWrap: true,
minZoom: 1,
maxZoom: 20,
}),
// 鼠标控件：鼠标在地图上移动时显示坐标信息。
controls: ol.control.defaults().extend([
// 加载鼠标控件
// scaleLineControl
])
})
map.addControl(scaleLineControl)
map.addLayer(TDTImgLayer)
map.addLayer(TDTImgCvaLayer)
</script>
OpenLayers示例数据下载，请回复关键字：ol数据
全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试
【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏 + 关注 哦 ！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 !
