在Leaflet中,要實現地圖的旋轉功能,你可以使用Leaflet的內置工具欄控件,或者通過監聽鼠標事件來自定義旋轉行為。以下是兩種實現方法:
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '? OpenStreetMap contributors'
}).addTo(map);
// 添加工具欄控件,包括旋轉按鈕
L.control.toolbar({
position: 'topright'
}).addTo(map);
現在,你應該能在地圖右上角看到一個包含旋轉按鈕的工具欄。點擊這個按鈕,地圖就會開始旋轉。
如果你想要更復雜的旋轉控制,比如可以拖動旋轉,你可以通過監聽鼠標事件來實現自定義的旋轉行為。以下是一個簡單的示例代碼:
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '? OpenStreetMap contributors'
}).addTo(map);
// 記錄初始角度
var initialAngle = 0;
// 監聽鼠標按下事件
map.on('mousedown', function(e) {
// 記錄初始角度
initialAngle = map.getRotation();
});
// 監聽鼠標移動事件
map.on('mousemove', function(e) {
// 計算旋轉角度
var angle = (map.getRotation() - initialAngle + e.latlng.lng) % 360;
// 應用旋轉角度
map.setRotation(angle);
});
在這個示例中,我們通過監聽鼠標按下和移動事件來計算并應用旋轉角度。這樣,用戶就可以通過拖動鼠標來旋轉地圖了。注意,這里使用了取余操作來確保旋轉角度始終在0到359度之間。