vue+leaflet 使用js自定义封装动画marker样式点

news2025/1/13 15:30:24

效果图

1. 引入leaflet

import L from 'leaflet'

2. 使用原生js实现

import L from 'leaflet';
import '../assets/css/blinkmarker.css';
L.blinkMarker = (point, property) => {
    // 使用js标签,便于操作,这个temDivEle的作用是将divEle通过innerHTML的方式获取为字符串
    var tempDivEle = document.createElement('div');
    var divEle = document.createElement('div');
    var spanEl = document.createElement('span');
    var bEl = document.createElement('b');
    var aEl = document.createElement('a');
    var sEl = document.createElement('span');
    var img = document.createElement('img');
    tempDivEle.append(divEle);
    divEle.append(spanEl);
    divEle.append(sEl);
    divEle.append(bEl);
    spanEl.append(aEl);
    divEle.append(img);
    // img.src = require('../assets/small-ship.png');
    // 设置上基础的样式
    divEle.classList.add('circle-container');
    spanEl.classList.add('pulse-icon');
    aEl.classList.add('dive-icon');
    bEl.classList.add('circle');
    sEl.classList.add('scircle');
    // 操作样式
    var style = document.createElement('style');
    style.type = 'text/css';
    document.head.appendChild(style);
    // 主体颜色
    if (property) {
        if (property.color) {
            spanEl.style.backgroundColor = property.color;
            if (!property.diveColor) {
                aEl.style.boxShadow = '0 0 6px 2px ' + property.color;
            }
        }
        // 标记大小
        if (property.iconSize) {
            spanEl.style.width = property.iconSize[0] + 'px';
            spanEl.style.height = property.iconSize[1] + 'px';
        }
        // 发散的color
        if (property.diveColor) {
            // 发散的重度
            if (property.level) {
                aEl.style.boxShadow = '0 0 ' + (property.level * 3) + 'px ' + property.level + 'px ' + property.diveColor + 'inset';
            } else {
                aEl.style.boxShadow = '0 0 6px 8px ' + property.diveColor + 'inset';
            }
        }
        // 发散的重度
        if (property.level) {
            if (property.diveColor) {
                aEl.style.boxShadow = '0 0 ' + (property.level * 3) + 'px ' + property.level + 'px ' + property.diveColor + 'inset';
            } else if (property.color) {
                aEl.style.boxShadow = '0 0 ' + (property.level * 3) + 'px ' + property.level + 'px ' + property.color + 'inset';
            } else {
                aEl.style.boxShadow = '0 0 ' + (property.level * 3) + 'px ' + property.level + 'px #fff' + 'inset';
            }
        }

        // 闪烁的速度
        if (property.speedTime) {
            aEl.style.setProperty('animation', 'pulsate ' + property.speedTime + 's infinite');
        }
    }
    var myIcon = L.divIcon({ className: 'my-div-icon', html: tempDivEle.innerHTML });
    var marker = L.marker(point, { icon: myIcon, title: property.title });
    return marker;
};

3. 实现 css

.circle-container {
    position: relative;
    z-index: 9999 !important;
}
.circle-container .circle {
    width: 15px;
    height: 15px;
    position: absolute;
    border: 2px solid #fff;
    border-radius: 50%;
    left: -1px;
    top: -1px;
    z-index: 9999 !important;
}
.circle-container .pulse-icon {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background-color: #fff inset;
    /* position: relative; */
    box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);
    z-index: 9999 !important;
}

.circle-container .scircle {
    display: inline-block;
    width: 3px;
    height: 3px;
    border: 1px solid #000;
    border-radius: 50%;
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 9999 !important;

}

.circle-container .dive-icon {
    content: "";
    box-shadow: 0 0 6px 8px #fff inset;
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite;
    animation-delay: 1.5s;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    height: 200%;
    width: 200%;
    animation: pulsate 2s infinite;
    position: absolute;
    margin: -60% 0 0 -60%;
    z-index: 9999 !important;
}

.circle-container .my-div-icon {
    z-index: 9999 !important;
}

@keyframes pulsate {
    0% {
        transform: scale(1, 1);
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
    50% {
        opacity: 0.6;
        -ms-filter: none;
        filter: none;
    }
    100% {
        transform: scale(1.5,1.5);
        opacity: 0.2;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
}

4. 在vue中引入js文件，实现效果

this.bindMarker = this.$L.blinkMarker([item.lat, item.lon], {
    iconSize: [15, 15],
    color: 'transparent',
    diveColor: '#fff',
    level: '8',
    speedTime: 1
});
this.bindMarker.addTo(this.map);