uni-app实现leaflet地图图标旋转

之前在 uni-app 上已经实现了 leaflet 的离线地图，详细可以参考上文 # uni-app使用瓦片实现离线地图的两种方案。

最近新增了一个定位的功能，其实就是常见的地图上的手机朝向哪儿，箭头就往哪儿指这个功能。

但是因为地图是基于 leaflet 做的，在 Trae 上进行了一番询问，Trae推荐采用简单实现方案，就是在 leaflet 上增加一个图标，然后通过图标旋转变换箭头朝向。

虽然我对 leaflet 不是非常熟悉，但是 Trae 作为程序员的"外挂"解答这个是没问题的，给出了两个实现方案。

方案1: 使用CSS调整

在创建图标的时候给图标增加一个 className，然后通过修改这个 class 的 transform: rotate(45deg) 进行旋转。

createLocationIcon() {
    const icon = L.icon({
        iconUrl: 'static/icon/location.png',
        iconSize: [60, 60],
        iconAnchor: [30, 30],
        popupAnchor: [1, -20],
        className: 'test-location'
    });
    this.locationIcon = L.marker([lat, lon], {
        icon: icon
    }).addTo(map);
},
updateLocation() {
    // 计算角度
    const bearing = this.calculateBearing(
        that.location.latitude,
        that.location.longitude,
        that.testPosition.latitude,
        that.testPosition.longitude
    );
    const icon = this.locationIcon.getElementsByClassName("test-location");
    icon.style.transform += `rotate(${bearing}deg)`;
}

.test-location {
    transform: rotate(20deg);
}

这种方案其实是比较简单的，通过确定旋转角度直接操作DOM的形式进行旋转，并且还可以增加一定的动画延迟效果。

方案2: 使用leaflet.rotatedMarker.js

使用 leaflet.rotatedMarker.js 也是比较方便的一种方法。

首先在 static/leaflet 文件夹下插入 leaflet.rotatedMarker.js 文件。

然后在代码中导入 import rotated from "@/static/leaflet/leaflet.rotatedMarker.js";

最后在创建图标的位置增加 rotationAngle 属性。

createLocationIcon() {
    const icon = L.icon({
        iconUrl: 'static/icon/location.png',
        iconSize: [60, 60],
        iconAnchor: [30, 30],
        popupAnchor: [1, -20],
        rotationAngle: 0
    });
    this.locationIcon = L.marker([lat, lon], {
        icon: icon
    }).addTo(map);
},
updateLocation() {
    // 计算角度
    const bearing = this.calculateBearing(
        that.location.latitude,
        that.location.longitude,
        that.testPosition.latitude,
        that.testPosition.longitude
    );
    // 设置旋转角度
    this.locationIcon.setRotationAngle(bearing);
}

上述两种方法均可以实现图标的旋转，不过我更推荐第二种实现方案。

简单方便，而且不需要操作DOM，减少性能开销。