经过上一篇文章的介绍,大家一定对OpenLayers的地图控件有一定了解了,现在接着介绍归属控件和全屏控件。
一、归属控件
归属控件(ol.control.Attribution)用于展示地图资源的版权或者归属,它会默认加入到地图中,现在我们来看看归属控件。
拷贝一份first文件夹中的simple_map.html到controls文件夹中,并修改文件名为attribution.html:
可以用浏览器直接打开Attribution.html,就可以再地图中看到归属控件了:
由于归属控件比较简单,就不详细介绍了。。。
二、全屏控件
通常情况下我们的地图视图都是在浏览器的客户区进行展示,就像这样:
但是如果我们想让地图全屏展示该怎么办呢?
全屏控件就能使地图全屏展示。
拷贝一份first文件夹中的simple_map.html到controls文件夹中,并修改文件名为fullScreen.html:
接着我们修改fullScreen.html的代码来添加全屏控件:
fullScreen.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Simple Map</title>
<link rel="stylesheet" href="../v5.3.0/css/ol.css" />
<script src="../v5.3.0/build/ol.js"></script>
</head>
<body>
<div id="map"></div>
<script>
let map = new ol.Map({
target: 'map', // 关联到对应的div容器
layers: [
new ol.layer.Tile({ // 瓦片图层
source: new ol.source.OSM() // OpenStreetMap数据源
})
],
view: new ol.View({ // 地图视图
projection: 'EPSG:3857',
center: [0, 0],
zoom: 0
}),
controls: ol.control.defaults().extend([
new ol.control.FullScreen()
])
});
</script>
</body>
</html>
修改的代码也很简单,就是初始化了一个ol.control.FullScreen类的实例,然后添加到地图保存控件的ol.Collection中。
然后使用浏览器打开fullScreen.html,可以发现全屏控件显示在地图的右上角,点击它可以让地图全屏显示: