^ 关注我，带你一起学GIS ^
注：当前使用的是 ol [9.2.4] 版本，天地图使用的key请到天地图官网申请，并替换为自己的key
前言
❝在 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>
❝OpenLayers示例数据下载，请回复关键字：ol数据
全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试
❝【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏 + 关注 哦 ！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 !
❝
OpenLayers示例数据下载，请在公众号后台回复：ol数据
全国信息化工程师－GIS 应用水平考试资料，请在公众号后台回复：GIS考试
❝
GIS之路公众号已经接入了智能助手，欢迎大家前来提问。
欢迎访问我的博客网站-长谈GIS：
http://shanhaitalk.com
都看到这了，不要忘记点赞、收藏+关注 哦！
本号不定时更新有关 GIS开发 相关内容，欢迎关注 
