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

OpenLayers 拖动旋转和缩放

news 2025/6/28 8:07:55

前言

在 OpenLayers 框架中已经封装了很多便利的交互控件，可以做到开箱即用，非常方便。像拖动缩放、绘制、选择等交互控件可以供开发者直接使用。本篇给大家介绍拖动旋转交互控件

1. 旋转控件简介

此控件通过按住shift键结合鼠标左键或右键进行使用。在按住键盘 shift 键的同时，鼠标点击地图进行拖动可以实现地图的旋转和缩放操作。但是此交互仅支持鼠标设备。

在使用旋转交互控件的时候，除了通过 map.addInteraction()的方式添加交互控件以外，还可以通过 Map 属性interactions以默认交互控件的形式进行添加。此时需要使用ol.interaction.defaults对象的defaults方法添加旋转控件实例。

// 地图交互控件
interactions: ol.interaction.defaults.defaults().extend([new ol.interaction.DragRotateAndZoom()])

2. 结合 View 对象实现地图旋转

通过 View 对象的adjustRotation方法可以实现地图相对旋转。该方法接受两个参数

delta：地图缩放和旋转的相对值，以弧度为单位。
anchor：旋转中心，即旋转的描点。可设置为地图中心点

根据 PI = 180º，1º = PI/180，然后设置地图绕中心点旋转 90º，正值为顺时针旋转，负值为逆时针。

// 绕中心点旋转
const center = map.getView().getCenter()
document.getElementById("rotate-center-p").addEventListener("click", evt => {// 顺时针旋转map.getView().adjustRotation(Math.PI / 2, center)
})
document.getElementById("rotate-center-n").addEventListener("click", evt => {// 逆时针旋转map.getView().adjustRotation(-Math.PI / 2, center)
})

3. 复位操作

在地图旋转或平移缩放操作之后，想回到初始的地图界面可以使用地图复位操作。通过 View 对象调用setRotation方法即可实现复位操作。该方法接收一个参数，即地图旋转值，以弧度为单位。当值为 0 的时候表示正北方向。

// 复位操作
document.getElementById("reset-view").addEventListener("click", evt => {// 调整视图为正北方向map.getView().setRotation(0)
})

4. 完整代码

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>OpenLayers 拖拽缩放和旋转</title><meta charset="utf-8" /><link rel="stylesheet" href="../../libs/css/ol9.2.4.css"><script src="../../js/config.js"></script><script src="../../libs/js/ol9.2.4.js"></script><style>* {padding: 0;margin: 0;font-size: 14px;font-family: '微软雅黑';}html,body {width: 100%;height: 100%;}#map {position: absolute;top: 50px;bottom: 0;width: 100%;}#top-content {position: absolute;width: 100%;height: 50px;line-height: 50px;background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);color: #fff;text-align: center;font-size: 32px;}#top-content span {font-size: 32px;}.view-rotate {position: absolute;right: 50px;top: 80px;padding: 20px 10px;color: #fff;border-radius: 5px;border: 1px solid #50505040;background: linear-gradient(135deg, #c850c0, #4158d0);}.rotate-btn {border-radius: 5px;border: 1px solid #50505040;padding: 5px 20px;color: #fff;margin: 0 10px;background: #4646466e;transition: background-color 10s ease-in-out 10s;}.rotate-btn:hover {cursor: pointer;filter: brightness(120%);background: linear-gradient(135deg, #c850c0, #4158d0);}</style>
</head><body><div id="top-content"><span>OpenLayers 拖拽缩放和旋转</span></div><div id="map" title="地图显示"></div><div class="view-rotate"><span id="rotate-center-p" class="rotate-btn">绕中心点旋转(顺时针)</span><span id="rotate-center-n" class="rotate-btn">绕中心点旋转(逆时针)</span><span id="reset-view" class="rotate-btn">复位</span></div>
</body></html><script>//地图投影坐标系const projection = ol.proj.get('EPSG:3857');//==============================================================================////============================天地图服务参数简单介绍==============================////================================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_w&x={x}&y={y}&l={z}&tk=" + TDTTOKEN,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_w&x={x}&y={y}&l={z}&tk=" + TDTTOKEN,attibutions: "天地图注记描述",crossOrigin: "anoymous",wrapX: false})})const map = new ol.Map({target: "map",loadTilesWhileInteracting: true,view: new ol.View({center: [102.845864, 25.421639],zoom: 6.5,worldsWrap: false,minZoom: 1,maxZoom: 20,projection: 'EPSG:4326',}),layers: [TDTImgLayer],// 地图默认控件controls: ol.control.defaults.defaults({zoom: false,attribution: false,rotate: false}),// 地图交互控件interactions: ol.interaction.defaults.defaults().extend([new ol.interaction.DragRotateAndZoom()])})map.on('click', evt => {console.log("获取地图坐标：", evt.coordinate)})// 复位操作document.getElementById("reset-view").addEventListener("click", evt => {// 调整视图为正北方向map.getView().setRotation(0)})// 绕中心点旋转const center = map.getView().getCenter()document.getElementById("rotate-center-p").addEventListener("click", evt => {map.getView().adjustRotation(Math.PI / 2, center)})document.getElementById("rotate-center-n").addEventListener("click", evt => {map.getView().adjustRotation(-Math.PI / 2, center)})
</script>