写在前面:在项目中本来想直接使用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);
}