vue + leaflet实现图标指定方向随机旋转

效果 github地址 官方示例Demo

1. 安装leaflet-rotatedmarker

npm install 'leaflet-rotatedmarker' -S

2. 引入leaflet.rotatedmarker

import 'leaflet-rotatedmarker'

3. 实现

this.laryerGroup = this.$L.layerGroup()
data.forEach(item => {
	this.layerGroup.addLayer(this.getMarker(item))
})
this.layerGroup.addTo(this.map)

getMarker(item) {
	this.marker = this.$L.marker(item.latlng, {
		icon: this.$L.icon({
			iconUrl: img,
			iconSize: [15, 6],
			opacity: 1
		}),
		// 这里采用了随机数的方式决定图标的方向
		rotationAngle: Math.random() * 180
	})
	// 设置图标不同透明度
	if (item.naveStatus === '静止') {
		this.marker.setOpacity(0.4)
	}
	this.marker.on('mouseover', (e) => {
		// 鼠标移入事件
        if (this.overMarker) {
            this.overMarker.closeTooltip();
            this.map.removeLayer(this.overMarker);
        }
        let latlng = e.latlng;
        this.overMarker = this.$L
            .blinkMarker([latlng.lat, latlng.lng], {
                iconSize: [0, 0],
                color: 'transparent',
                diveColor: '#fff',
                level: '8',
                speedTime: 1
            })
            .bindTooltip(item.shipName, {
                permanent: true,
                offset: [3, -5],
                direction: 'top',
                className: 'anim-tooltip'
            })
            .openTooltip();
        this.overMarker.addTo(this.map);
        this.overMarker.on('click', (e) => {
            this.handleMarkerClick(item, e);
        });
        this.overMarker.on('mouseout', () => {
            this.overMarker.closeTooltip();
            this.map.removeLayer(this.overMarker);
        });
        this.map.addLayer(this.overMarker);
    });
    this.marker.on('click', (e) => {
        this.handleMarkerClick(item, e);
    });
	return this.marker
}

备注：marker的鼠标移入事件图标自定义样式blink样式为自定义封装方法，可移步vue+leaflet 使用js自定义封装动画marker样式点