Openlayers示例7 | Attributions
当地图因调整大小而变得太小时，属性将被折叠。这是因为当地图的宽度小于600像素时，可折叠选项被设置为true。
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<!-- 引入OpenLayers CSS样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css"
type="text/css">
<!-- 引入OpenLayers JS库 -->
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
<!-- css代码 -->
<style type="text/css">
.map {
width: 100%;
height: 600px;
}
</style>
</style>
<title>Attributions</title>
</head>
<body>
<div id="map" class="map"></div>
</body>
<script>
// https://openlayers.org/en/latest/apidoc/module-ol_control_Attribution-Attribution.html
const attribution = new ol.control.Attribution({
collapsible: false, // 指定是否可以折叠属性。如果未指定，源将通过其 attributionsCollapsible设置控制此行为。
});
const map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
// ol.control.defaults() 默认情况下包含在地图中的一组控件。除非另有配置，否则这将返回一个集合，其中包含每个控件
// https://openlayers.org/en/latest/apidoc/module-ol_control.html#.defaults
controls: ol.control.defaults({ attribution: false }).extend([attribution]), // 先把默认的设置为不显示，在通过extend来继承
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2,
}),
});
function checkSize() {
// 通过判断small是true还是false来设置属性信息是否折叠
const small = map.getSize()[0] < 600;
attribution.setCollapsible(small); // 指定是否可以折叠属性。如果未指定，源将通过其 attributionsCollapsible设置控制此行为。
attribution.setCollapsed(small); // 指定是否应在启动时折叠属性。
}
window.addEventListener('resize', checkSize);
checkSize();
</script>
</html>
