投稿者: Hisa

< コード例 >

  /**
   * チャート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"])


      }
    })

< 画面例 >

完全保存版エアライン最新案内。 もっと知りたい、世界のエアライン （MEDIA　HOUSE　MOOK　Pen＋） 価格：1,100円（税込、送料無料) (2023/5/24時点) 楽天で購入

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

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時点) 楽天で購入