LoginSignup
4
3

More than 3 years have passed since last update.

Mapbox GL JS v1.3.0〜v1.4.0の新機能

Last updated at Posted at 2019-10-02

遅くなりましたが、Mapbox GL JSのv1.3.0〜v1.4.0の新機能紹介です。
どんどん更新されていきますね :thumbsup:

前記事:v1.1.0〜v1.2.0の新機能

Mapbox GL JS v1.3.0からの新機能

Mapbox GL JS v1.3.0は2019/08/29にリリースされました。

🍏 機能

テキストを垂直に配置できるように (#8399)

text-writing-modeverticalを指定すると垂直に配置できます。

例えば、以下のように書くと、垂直に表示することができます。

注意点としては、text-writing-modeは配列で指定することです。配列の順番が優先順位となります。

map.addLayer({
    "id": "points",
    "type": "symbol",
    "source": {
    "type": "geojson",
    "data": {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
            "type": "Point",
            "coordinates": [139.6916711, 35.6897150]
            },
            "properties": {
               "name": "東京都庁"
            }
        }]}
    },
    "layout": {
        "text-field": "{name}",
        "text-writing-mode": ["vertical", "horizontal"]
    }
});

text-writing-mode-vertical.png

text/icon-allow-overlaptrueに設定されている場合に機能するように、可変テキストの配置を拡張(#8620)

書式設定された式でtext-colorを使用して、ラベルの異なる部分を異なる色で描画できるように(#8068)

以下のようにすると部分ごとに色を分けることができます。

map.addLayer({
    "id": "points",
    "type": "symbol",
    "source": {
      "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": [{
          "type": "Feature",
          "geometry": {
            "type": "Point",
            "coordinates": [139.6916711, 35.6897150]
          },
          "properties": {
            "name": "東京都庁",
            "address": "東京都新宿区西新宿二丁目8番1号"
          }
        }]
      }
    },
    "layout": {
      "text-field": ["format",
        ["get", "name"], { "text-color": "red" },
        "\n", {},
        ["get", "address"], {"text-color": "blue"}
      ]
    }
});

text-color.png

✨ 改善

  • タイルのロードロジックを改善してリクエストをより積極的にキャンセルし、ズームやパンを行うときのパフォーマンスを改善(#8633)
  • タブキー等を押したときにアウトラインがフォーカスするように (#8520)
  • 線をround joinsする処理を改善 (#8275)
  • lineのレイヤーの処理のパフォーマンスを改善. (#8303)
  • map.showTileBoundaries = trueの見やすさを改善 (#8380)
    • haloが追加されたとのこと
  • MercatorCoordinate.meterInMercatorCoordinateUnits メソッドを追加 (#8524)
    • MercatorCoordinate.meterInMercatorCoordinateUnitsを使うとMercatorCoordinateでの1メートルの距離を返してくれます
  • 重複する値を持つレガシーフィルターの変換を改善(#8542)
  • ドキュメントとサンプルのWebサイトのソースをmapbox-gl-js-docsリポジトリに移動 (#8582)

🐞 バグ修正

  • ローカルのCJKフォントが、過剰にズームしたタイルでサーバー生成のフォントに切り替わるバグを修正(#8657)
  • deck.glを使用したカスタムレイヤーの精度の問題を修正 (#8502)
  • fillレイヤーとlineレイヤーが、同じソースからのfill extrusionsで正しくレンダリングされないバグを修正(#8661)
  • Blob URLからロードされたドキュメントのマップロードを修正 (#8612)
  • パッケージの依存関係からesmを削除 (#8586)

Mapbox GL JS v1.3.1からの新機能

Mapbox GL JS v1.3.1は2019/09/05にリリースされました。

🐞 バグ修正

  • sourceのリロード中にマップが削除された場合にエラーが発生するバグを修正 (#8711)
  • IE11でロード後にrender eventが発生しないことがあるバグを修正 (#8708)

Mapbox GL JS v1.3.2からの新機能

Mapbox GL JS v1.3.2は2019/09/26にリリースされました。

🐞 バグ修正

  • Firefox >=69 でキャッシュにアクセスする時のSecurityErrorを修正 (#8780)

Mapbox GL JS v1.4.0からの新機能

Mapbox GL JS v1.4.0は2019/09/27にリリースされました。

✨ 機能

image 演算子を追加 (#8684)

例えばimageを使って以下のように指定することができます。

"icon-image": ["image", "bus"]

可変ラベル配置でのtext-offsetが可能に(#8642)

  • text-variable-anchorを指定した時にtext-radial-offsetが設定されてない場合でもtext-offsetの値を用いて表示できるようです。

🍏 改善

  • raster terrainの読み込みの高速化と見た目の改善 (#8694)
  • リサイズや*RenderedWorldCopies等に関するドキュメントの改善 (#8748, #8754)
  • シングルタッチとマルチタッチのズームとパンの相互作用を改善(#7196), (#8100)

🐞 バグ修正

  • text-translateまたはicon-translateが有効な場合のcollisionBoxのレンダリングを修正 (#8659)
  • mapをリロードしてすぐに削除する時のTypeErrorを修正 (#8711)
  • tooltipにgeolocation controlボタンを追加 (#8735)
  • NavigationControloriginalEventのプロパティを追加 (#8693)
  • GeolocateControlでリサイズや画面の回転をするとfollow modeがキャンセルされるバグを修正(#8736)
  • contentやlocationを設定する前にPopup#trackPointerを呼ぶとエラーになるのを修正 (#8757)
  • Respect newline characters when text-max-width is set to zero
  • text-max-widthが0に設定された時に改行文字を優先する (#8706)
  • earcutをv2.2.0にアップデート (#8772)
  • icon-fitの可変ラベル配置を修正 (#8755)
  • Icons stretched with icon-text-fit are now sized correctly
  • icon-text-fitで引き伸ばされたアイコンのサイズが正しくなった (#8741)
  • icon-text-fitを使ったアイコンの衝突検出が正しく機能するように (#8741)

style-spec 13.9.0

style-spec 13.9.0は2019/09/27にリリースされました。
Mapbox GL JS v1.4.0と合わせての公開となります

  • image演算子を追加 (#8684)
  • styleがMapbox APIと互換性があることを検証するための関数を追加 (#8663)
4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3