Leaflet Javascript AlmostOver でポリラインのイベント

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)
         
         });

< 画面例 >

マウスが乗った線を太くする

Leaflet JavaScript OpenRailwayMap

Leafletの地図に鉄道線路、駅を表示する必要があり、探しましたところベースレイヤーでOpenRailwayMapというのが見つかり使ってみました。

 

< コード例 >

レイヤー選択にOpenRailwayMapを加える


{
        label: '鉄道路線図',
        url: 'http://{s}.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png',
        attr: {
          minZoom: 2,
          maxZoom: 19,
          tileSize: 256,
          attribution: '<a href="https://www.openstreetmap.org/copyright">© OpenStreetMap contributors</a>, Style: <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA 2.0</a> <a href="http://www.openrailwaymap.org/">OpenRailwayMap</a> and OpenStreetMap'
        },
        ldtp: "L"
      },

OpenStreetMapを重ねる必要があります。


   let baseMaps = {};
    let curkey = "";
    let objlayer;
    $.each(leyers, function (j, itm) {
      curkey = itm["label"];
      objlayer = L.tileLayer(itm["url"], itm["attr"]);
      baseMaps[curkey] = objlayer;
    });

    // layersコントロールにbaseMapsオブジェクトを設定して地図に追加
    // コントロール内にプロパティ名が表示される

    L.control.layers(baseMaps).addTo(lmap);
   
    let tgtbase = baseMaps[layerkey];
    tgtbase.addTo(lmap);

    //baseMaps["OpenRailwayMap"].addTo(lmap)

    // 鉄道地図の場合、OpenStreetmapも重ねる必要あるので //
    if (layerkey.includes("OpenRailwayMap")) {
      const addmap = layerkey.includes("satellite") ? "Google satellite" : "Open street map"
      const osbase = baseMaps[addmap]
      try {
        osbase.addTo(lmap);
      }
      catch (e) {
      }

    }
    else {
      $("#legend").hide()
    }

< 画面例 >

Leaflet JavaScript マウスオーバーでポリラインを強調

鉄道路線図が入った地図で、ポリラインのセグメントにマウスが乗った時、その線を強調させてみました。

< コード例 >


    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
    }

  }

< 画面例 >

Leaflet JavaScript マウスオーバーでマーカーを強調

< コード例 >

マウスオーバー用拡大アイコン


 // 通常サイズ用 //
  // 通常 //
        const icn = L.icon({
          iconUrl: "Img/aptower_50_" + iconcol + ".png",
          //shadowUrl: 'leaf-shadow.png',
          iconSize: [sz, sz]
        });
 
 // マウスオーバー用 //
        const icnmon = L.icon({
          iconUrl: "Img/aptower_64_yellow.png",
          //shadowUrl: 'leaf-shadow.png',
          iconSize: [38, 38]
        });

マウスが乗った時にマウスオーバー用拡大アイコンをセット
外れた時は元のサイズに戻す


// @@ マウスが乗った時 @@ //
        marker.on("mouseover", function (e) {
          // 大きい黄色のアイコンに変える //
          marker.setIcon(icnmon)
        })
        // @@ マウスが外れた時 @@ //
        marker.on("mouseout", function (e) {
          // からし色並サイズアイコンに戻す //
          marker.setIcon(icn)

        })

< 画面例 >

通常サイズ

拡大サイズ

Leaflet Javascript ツールチップがポリラインに重ならないようにする

< コード例 >


  /**
   * チャートWaypointツールチップ位置、オフセット取得
   * 三角形にして頂点(カレント)への方向の領域を返す
   * 
   * @param {type} prev 前回データ
   * @param {type} curr 今回データ
   * @param {type} next 次回データ
   * @returns {StaticMap.getTooltipDirection.staticmapAnonym$9} Direction文字列、
   * オフセットxy配列
   */
  getTooltipDirectionByArrow(prev, curr, next) {

    const DIRECTIONS = ["top", "right", "bottom", "left"]
    const OFFSETS = [[0, -10], [10, 0], [[0, 10]], [-10, 0]]

    const pll = [prev["LON"], prev["LAT"]]
    const cll = [curr["LON"], curr["LAT"]]
    const nll = [next["LON"], next["LAT"]]


    const tf = new MyTurf()

    let topdir = parseInt(tf.getBearing(cll, pll) + 45)
    let tondir = parseInt(tf.getBearing(cll, nll) + 45)
    topdir = topdir < 0 ? topdir + 360 : topdir
    tondir = tondir < 0 ? tondir + 360 : tondir
    const diffdir = Math.abs(topdir - tondir)

    // p -> c -> n が直線になってない場合 //
    if (diffdir > 190 && diffdir < 170) {
      // PとNの中間点 //
      const pnc = tf.midpoint(pll, nll)
      // PN中間点からのCへの方向 //
      let arrowdir = parseInt(tf.getBearing(pnc, cll) + 45)
      arrowdir = arrowdir < 0 ? arrowdir + 360 : arrowdir

      const arrowArea = Math.floor(arrowdir / 90)


      return {
        direction: DIRECTIONS[arrowArea],
        offset: OFFSETS[arrowArea]
      }
    }
    // 直線になってる場合、線なし領域最初を返す //
    else {
      return new StaticMap().getTooltipDirection(prev, curr, next)
    }

  }


  /**
   * チャートWaypointツールチップ位置、オフセット取得
   * 線が引かれてない領域を返す
   * 
   * @param {type} prev 前回データ
   * @param {type} curr 今回データ
   * @param {type} next 次回データ
   * @returns {StaticMap.getTooltipDirection.staticmapAnonym$9} Direction文字列、
   * オフセットxy配列
   */
  getTooltipDirection(prev, curr, next) {

    const AREAS = [0, 1, 2, 3]
    const DIRECTIONS = ["top", "right", "bottom", "left"]
    const OFFSETS = [[0, -10], [10, 0], [[0, 10]], [-10, 0]]

    const pll = [prev["LON"], prev["LAT"]]
    const cll = [curr["LON"], curr["LAT"]]
    const nll = [next["LON"], next["LAT"]]

    const tf = new MyTurf()
    let topdir = parseInt(tf.getBearing(cll, pll) + 45)
    let tondir = parseInt(tf.getBearing(cll, nll) + 45)
    topdir = topdir < 0 ? topdir + 360 : topdir
    tondir = tondir < 0 ? tondir + 360 : tondir


    const pavoidArea = Math.floor(topdir / 90)
    const navoidArea = Math.floor(tondir / 90)

    // 余った領域 //
    const putAreas = AREAS.filter(n => n !== pavoidArea && n !== navoidArea)

    return {
      //topdir: topdir,
      //tondir: tondir,
      //pavoidArea: pavoidArea,
      //navoidArea: navoidArea,
      //putAreas: putAreas,
      direction: DIRECTIONS[putAreas[0]],
      offset: OFFSETS[putAreas[0]]
    }

  }

Call


    const tff = new StaticMap()
    pdatas.forEach((p, i) => {
      plls.push([p["LAT"], p["LON"]])

      if (i > 0 && i < pdatas.length - 1) {
        //console.log("-- offset result " + p["IDENT"])

        // ツールチップ配置位置、オフセット //
        const ttpdir = tff.getTooltipDirectionByArrow(pdatas[i - 1], p, pdatas[i + 1])
        //console.log(ttpdir)
        ttpdirs.push(ttpdir["direction"])
        ttpoffsets.push(ttpdir["offset"])


      }
    })

< 画面例 >

Leaflet Javascript arrowheadプラグインで矢印をつける

飛行機の飛行経路チャートで方向がわかるようにするため矢印をつけるプラグインを探してたところ、ぴったりなのが見つかり早速使ってみました。

Leaflet ArrowHead

< コード例 >

HTML


<!-- Leaflet aroowhead -->
<script src="Script/js/leaflet-arrowheads.js"></script>
<script src="Script/js/leaflet.geometryutil.js"></script>

Javascript


 const ARROWHEADS_OPTIONS = {
      size: '12px',
      yawn: 50,
      fill: true,
      //frequency: 'endonly',
      frequency: '20000m',
      offsets: {end: '12px'}
    }

 this.lines = L.polyline(plls, POLYLINE_OPTIONS).arrowheads(ARROWHEADS_OPTIONS).addTo(this.smap)

< 画面例 >

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

航空情報 2023年 7月号 [雑誌]
価格:1,425円(税込、送料無料) (2023/5/24時点)