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

OpenLayers 加载全屏显示控件

news 来源：原创 2025/5/25 6:23:47

注：当前使用的是 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-full-screen

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

设置全屏显示控件居于地图右上角显示。

#full-screen-div{position: fixed;width: 30px;height: 30px;top: 70px;left: 10px;background:#ccc
}

1.2. 创建全屏显示控件

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

目前因为全屏显示时候，地图置于顶层的css样式无法调整，所以会导致地图上不显示全屏显示控件目标DIV（实际上存在于HTML页面结构中，只是被地图层遮住，导致用户看不见）

// 创建全屏显示控件
const fullScreenControl = new ol.control.FullScreen({// 全屏控件自定义CSS类名//className: "ol-custome-full-screen",// 按钮标识label: 'u2922',// 全屏按钮激活标识labelActive: 'u00d7',// 全屏按钮提示文本tipLabel: "全屏按钮",// 是否开启完全键盘访问keys:true,// 若想让全屏控件显示在地图HTML(viewport)外面，则提供target元素// target: document.getElementById('full-screen-div'),
})

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([// 加载全屏显示控件控件// fullScreenControl// new ol.control.FullScreen()])
})// 方式2
map.addControl(fullScreenControl)

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%;}#full-screen-div{position: fixed;width: 30px;height: 30px;top: 70px;left: 10px;background:#ccc}</style>
</head>
<body class="clearfix"><div id="map" title="地图显示"></div><div class="full-screen-div" id="full-screen-div"></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 fullScreenControl = new ol.control.FullScreen({// 全屏控件自定义CSS类名//className: "ol-custome-full-screen",// 按钮标识label: 'u2922',// 全屏按钮激活标识labelActive: 'u00d7',// 全屏按钮提示文本tipLabel: "全屏按钮",// 是否开启完全键盘访问keys:true,// 若想让全屏控件显示在地图HTML(viewport)外面，则提供target元素// target: document.getElementById('full-screen-div'),})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([// 加载全屏显示控件控件// fullScreenControl// new ol.control.FullScreen()])})map.addControl(fullScreenControl)map.addLayer(TDTImgLayer)map.addLayer(TDTImgCvaLayer)</script>