学习笔记—— leaflet 高亮marker

写在前面：在项目中本来想直接使用leaflet高亮marker的插件，但由于在项目中同时使用了leaflet聚类插件，导致高亮marker的显示效果与预期有差距，遂直接按照需求，自行定义了高亮marker

• 鼠标经过marker的时候，高亮目标区域

marker.on({
    mouseover: function(e) {
        L.regionLayerGeo.eachLayer(function(layer) {
            if (layer.feature.properties.Name === item.label) {
                // 适用于 `GeoJSON vector layers` ，通过 `setStyle` 方法，修改图层创建时定义的样式
                layer.setStyle({ fillOpacity: 0.3 });
            }
        });
    },
    mouseout: function(e) {
        L.regionLayerGeo.eachLayer(function(layer) {
            if (layer.feature.properties.Name === item.label) {
                layer.setStyle({ fillOpacity: 0 });
            }
        });
    }
});

• 高亮marker效果

先在视图范围外，新建一个带发光效果的marker，在点击地图marker时，发光marker移动到该marker上。

// 创建一个自定义范围的 `marker`
let contentHighlight = '<div style="width:10px;height:10px;"></div>';
L.highlightMarker = L.marker([0, 0], {
    icon: L.divIcon({
        html: contentHighlight
    })
}).addTo(L.LMap);

// 给 `marker` 添加发光效果
L.DomUtil.create('span', 'glow', L.highlightMarker._icon);
L.DomUtil.addClass(L.highlightMarker._icon, 'permanent');

// marker发光效果
.leaflet-marker-pane .glow {
    width: 0px;
    height: 0px;
    margin-top: 0px !important;
    margin-left: 4px !important;
    border-radius: 50%;
    opacity: 0;
    background: -webkit-radial-gradient(rgba(254, 211, 0, 1), rgba(255, 223, 67, 0) 70%);
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.permanent .glow {
    background: -webkit-radial-gradient(rgba(254, 211, 0, 1), rgba(255, 223, 67, 0) 70%) !important;
    -webkit-animation: highlight 2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -moz-animation: highlight 2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -ms-animation: highlight 2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -o-animation: highlight 2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: highlight 2s infinite cubic-bezier(0.68, -0.55, 0.265, 1.55);
}