mle 0870 - izudon/izudon.github.io GitHub Wiki

0870 Variable label placement

map.addLayer({
    'type': 'symbol',
    'layout': {
        'text-field': ['get', 'description'],
        'text-variable-anchor': ['top', 'bottom', 'left', 'right'],
  • テキストが表示上重複した場合、下のレイヤのものは消されるが（たぶん）、
    テキストアンカーを変えて重複せず表示できるなら、適宜そうしてくれる（かしこい）。
  • 'text-variable-anchor': ['top', 'bottom', 'left', 'right'] は、
    テキストアンカーは「上・下・左・右」の（この順で）いずれでもいいですよという指定。

テキストアンカー

+--- * ---+ +---------+ +---------+ +---------+ 
| t e x t | | t e x t | * t e x t | | t e x t * 
+---------+ +--- * ---+ +---------+ +---------+

上・下・左・右

            +---------+
            | t e x t |
+---------+ +--- * ---+ +---------+ 
| t e x t *     [ ]     * t e x t |
+---------+ +--- * ---+ +---------+
            | t e x t | 
            +---------+

地点に対してはこういう表示位置になる。

  • アンカーが 上 なら 地点の 下 にテキスト表示される。
  • アンカーが 下 なら 地点の 上 にテキスト表示される。
  • アンカーが 左 なら 地点の 右 にテキスト表示される。
  • アンカーが 右 なら 地点の 左 にテキスト表示される。

回転アニメーション

map.rotateTo(180, {duration: 10000});
  • map.rotateTo() で、回転アニメーションにできる（map.flyTo() 同様）。
  • オプションに duration: 10000（単位：ミリ秒）で「10秒かけて」回転しろ。