本文基于騰訊課堂老胡的課《跟我學Openlayers--基礎(chǔ)實例詳解》做的學習筆記碰煌,使用的openlayers 5.3.x api渗蟹。
源碼 見 1055.html 租悄,對應的 官網(wǎng)示例
https://openlayers.org/en/latest/examples/drag-rotate-and-zoom.html?q=drag
https://openlayers.org/en/latest/examples/full-screen-drag-rotate-and-zoom.html?q=drag
按住Shift并使用鼠標拖拽可以旋轉(zhuǎn)眶俩、縮放地圖
<!DOCTYPE html>
<html>
<head>
<title>鼠標拖拽</title>
<link rel="stylesheet" href="../include/ol.css" type="text/css" />
<script src="../include/ol.js"></script>
</head>
<style></style>
<body>
<div>  按住Shift并使用鼠標拖拽可以旋轉(zhuǎn)嫡丙、縮放地圖</div>
<div id="map" class="map"></div>
<script>
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([new ol.interaction.DragRotateAndZoom()]),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: "map",
view: new ol.View({
center: [0, 0],
zoom: 2
})
});
</script>
</body>
</html>