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

OpenLayers 加载图层探查控件

news 来源：原创 2025/5/25 9:23:48

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key

地图控件是一些用来与地图进行简单交互的工具，地图库预先封装好，可以供开发者直接使用。OpenLayers具有大部分常用的控件，如缩放、导航、鹰眼、比例尺、旋转、鼠标位置等。

这些控件都是基于 ol.control.Control基类进行封装的，可以通过Map对象的controls属性或者调用addControl方法添加到地图中。地图控件通过HTML插入到Map页面，可以利用CSS调整地图控件样式。OpenLayers初始化地图时利用ol.control.default默认加载了缩放控件（ol.control.Zoom）

本节主要介绍图层探查控件。

1. 图层探查控件

图层探查控件可用于查看下层图层数据，当具有多个图层叠加显示时，上层图层会遮盖下层图层，可用图层探查控件进行辅助操作。基本原理为裁剪上层数据使得下层图层可见。探查控件可以通过监听键盘按下（下箭头、上箭头）事件调整探查半径，然后调用上层图层监听事件进行图层裁剪。

1.1. 添加键盘监听事件

通过键盘上下键修改探查范围。

// 探查半径
let radius = 75
// 键盘按下监听事件，控制探查范围大小
document.addEventListener('keydown', evt=> {if (evt.which === 38) {radius = Math.min(radius + 5, 150)evt.preventDefault} else if(evt.which === 40){radius = Math.min(radius - 5, 25)map.render()evt.preventDefault()}
})

1.2. 获取鼠标位置

监听鼠标移动、移除事件，实时获取鼠标位置

// 获取实时鼠标位置
let mousePosition = null
const container = map.getTargetElement()
container.addEventListener('mousemove', evt=> {mousePosition = map.getEventPixel(evt)map.render()
})
container.addEventListener('mouseout', evt=> {mousePosition = nullmap.render()
})

1.3. 裁剪图层

监听上层图层事件precompose，调用画布方法进行裁剪。

// 裁剪图层
TDTImgLayer.on('precompose', evt=> {// 矢量图层画布const ctx = evt.context const pixelRatio = evt.frameState.pixelRatioctx.save()ctx.beginPath()if (mousePosition) {// 显示一个以鼠标焦点为中心的圆圈ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio, radius * pixelRatio, 0,2 * Math.PI)ctx.lineWidth = 5 * pixelRatio // 圆圈边线宽度，5个像素单位ctx.strokeStyle = 'rgba(0,0,0,0.5)' // 圆圈边线样式ctx.stroke()}ctx.clip() // 裁剪画布
})

1.4. 恢复画布背景

裁剪图层，显示下层图层之后，需要恢复画布背景

// 恢复画布背景
TDTImgLayer.on('postcompose', evt=> {const ctx = evt.contextctx.restore()
})

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%;}</style>
</head>
<body><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=替换token",attibutions: "天地图注记描述",crossOrigin: "anoymous",wrapX: false})})const TDTVecLayer = new ol.layer.Tile({title: "天地图矢量图层",source: new ol.source.XYZ({url: "http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=替换token",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],center: [12992990, 13789010],// center: ol.proj.fromLonLat([102,25.5]),zoom: 15,worldsWrap: true,minZoom: 1,maxZoom: 20,}),controls: ol.control.defaults().extend([new ol.control.MousePosition()])})map.addLayer(TDTVecLayer)map.addLayer(TDTImgLayer)// 探查半径let radius = 75// 键盘按下监听事件，控制探查范围大小document.addEventListener('keydown', evt=> {if (evt.which === 38) {radius = Math.min(radius + 5, 150)evt.preventDefault} else if(evt.which === 40){radius = Math.min(radius - 5, 25)map.render()evt.preventDefault()}})// 获取实时鼠标位置let mousePosition = nullconst container = map.getTargetElement()container.addEventListener('mousemove', evt=> {mousePosition = map.getEventPixel(evt)map.render()})container.addEventListener('mouseout', evt=> {mousePosition = nullmap.render()})// 裁剪图层TDTImgLayer.on('precompose', evt=> {const ctx = evt.context // 矢量图层画布const pixelRatio = evt.frameState.pixelRatioctx.save()ctx.beginPath()if (mousePosition) {// 显示一个以鼠标焦点为中心的圆圈ctx.arc(mousePosition[0] * pixelRatio, mousePosition[1] * pixelRatio, radius * pixelRatio, 0,2 * Math.PI)ctx.lineWidth = 5 * pixelRatio // 圆圈边线宽度，5个像素单位ctx.strokeStyle = 'rgba(0,0,0,0.5)' // 圆圈边线样式ctx.stroke()}ctx.clip() // 裁剪画布})// 恢复画布背景TDTImgLayer.on('postcompose', evt=> {const ctx = evt.contextctx.restore()})
</script>