Leaflet Javascriptで、GeoJSONから読み込んだポリラインに対してイベントをつける必要があり、
mouseover, mouseoutのイベントが発火しにくいので、調べてましたところ AlmostOver のプラグインで解決しました。
< コード例 >
HTML
<!-- Leaflet almostover -->
<script type="text/javascript" src="Script/js/leaflet.almostover.js"></script>
Javascript
// almost over //
lmap.almostOver.addLayer(DrawLine.amlinejson);
// @@ 線をクリックした時 @@ //
lmap.on('almost:click', function (e) {
if (DrawLine.thickLines) {
lmap.removeLayer(DrawLine.thickLines)
}
// if (RailLines.stationsjson) {
// lmap.removeLayer(RailLines.stationsjson)
// }
//console.log("--- e.target")
//console.log(e.target)
const layer = e.layer
const pp = layer.feature.properties
// 線を太くする //
const tgtjson = new getComlineJSON(datas, pp.NAME)
//console.log(tgtjson)
DrawLine.thickLines = L.geoJson(tgtjson, {
// スタイル //
style: {color: "#00FFFF", weight: 7}
}).addTo(lmap)
//const comline = pp.NM_COM + " " + pp.NM_LINE
//$("#raillinespn").text(comline)
// リクエスト引数リスト名 //
//const listnm = "国交 " + pp.NM_COM + " " + pp.NM_LINE
//alert(listnm)
// 駅簡略化マーカー描画 //
//const rl = new RailLines()
//rl.getStationsMarker(listnm)
});
< 画面例 >
マウスが乗った線を太くする