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

news2024/9/26 3:26:59

效果 github地址官方示例Demo
在这里插入图片描述

安装leaflet-rotatedmarker

npm install 'leaflet-rotatedmarker' -S

引入leaflet.rotatedmarker

import 'leaflet-rotatedmarker'

实现

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
}