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"])


      }
    })

< 画面例 >