ポリゴンレイヤーがあり、データベースからロードしました。私はすべてのポリゴン名onmouseover
ポリゴンを表示したいと思います。最初にポリゴンの中心に追加しました。ポリゴンスタイルの場合と同じように、onmousover
に変更します。私はリーフレットには新しく、onmouseover
に変更する方法を教えてください。リーフレットのマウスオーバー時にデータベースからポリゴンにラベルを追加するには
var BoundariesLayer = L.geoJson(
Boundaries, {
style: boundariesStyle,
onEachFeature: boundariesOnEachFeature
}).addTo(mymap);
mymap.fitBounds(BoundariesLayer.getBounds());
var markers = new Array();
function boundariesOnEachFeature(feature, layer) {
markers.push(
L.circleMarker(
layer.getBounds().getCenter(), {
radius: 0.0,
opacity: 0,
fillOpacity: 0
}
)
);
var markersCount = markers.length;
markers[markersCount - 1].bindTooltip(
feature.properties.NAME_3, {
permanent: true,
className: "my-label",
direction: 'center'
}
);
markers[markersCount - 1].addTo(mymap);
markers[markersCount - 1].hideLabel();
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 3,
color: 'rgb(73,133,73)',
fillColor: 'rgb(73,133,73)',
fillOpacity: 0.2
});
}
function resetHighlight(e) {
BoundariesLayer.resetStyle(e.target);
}
function zoomToFeature(e) {
mymap.fitBounds(e.target.getBounds());
}
I編集しなくても簡単にコメントを追加できます) – nrhode