鉄道路線図が入った地図で、ポリラインのセグメントにマウスが乗った時、その線を強調させてみました。
< コード例 >
let thickLines
// -- フィルターされたJSONのfeaturesを走査 -- //
const geojson = L.geoJson(json, {
// 非強調、通常のスタイル //
style: function (feature) {
return {color: linecol, weight: 2.0}
},
onEachFeature: function (feature, layer) {
const pp = feature.properties
// @@ マウスが乗った時 @@ //
layer.on('mouseover', function (e) {
// 線を太くする //
const tgtjson = new RailLines().getComlineJSON(json, pp.NM_COM, pp.NM_LINE)
//console.log(tgtjson)
thickLines = L.geoJson(tgtjson, {
style: {color: linecol, weight: 7}
}).addTo(lmap)
const comline = pp.NM_COM + " " + pp.NM_LINE
$("#raillinespn").text(comline /*+ " " + tgtjson["distKM"] + " Km"*/)
})
// @@ 乗ったマウスが外れた時 @@ //
layer.on('mouseout', function (e) {
//$("#raillinespn").text("")
// 線を元に戻す //
lmap.removeLayer(thickLines)
})
},
pointToLayer: function (feature, latlng) {
},
})
// マップに追加 //
geojson.addTo(lmap);
// 消去用配列に追加 //
RailLines.lines.push(geojson)
/**
* 指定路線全線強調用GeoJSON取得
* @param {type} json 全路線JSON
* @param {type} com 会社名
* @param {type} line 路線名
* @returns {RailLines.getComlineJSON.raillinesAnonym$0} 連想配列
*/
getComlineJSON(json, com, line) {
const fts = json["features"]
const tf = new MyTurf()
let resfts = []
let ttldst = 0
fts.forEach((ft, i) => {
const pp = ft.properties
if (pp.NM_COM === com && pp.NM_LINE === line) {
resfts.push(ft)
const coords = ft.geometry.coordinates
coords.forEach((cd, k) => {
if (k > 0) {
ttldst += tf.getDistanceM(cd, coords[k - 1])
}
})
}
})
const distKM = Math.round(ttldst / 1000 * 100) / 100 // ???? 短い
return {
type: "FeatureCollection",
features: resfts,
distKM: distKM
}
}
< 画面例 >