< コード例 >
/**
* チャート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"])
}
})
< 画面例 >
コメントを投稿するにはログインしてください。