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

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

[前記事：v1.1.0〜v1.2.0の新機能](https://qiita.com/anagura0000/items/a0be9b4fb3a8c5b33323)

# Mapbox GL JS v1.3.0からの新機能
Mapbox GL JS v1.3.0は2019/08/29にリリースされました。

## 🍏 機能
### テキストを垂直に配置できるように ([#8399](https://github.com/mapbox/mapbox-gl-js/pull/8399))
`text-writing-mode`で`vertical`を指定すると垂直に配置できます。  
例えば、以下のように書くと、垂直に表示することができます。  
注意点としては、`text-writing-mode`は配列で指定することです。配列の順番が優先順位となります。

```jsx
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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270436/30c97c21-5349-c2ce-88e2-c6f0693b2bfa.png)


### `text/icon-allow-overlap`が`true`に設定されている場合に機能するように、可変テキストの配置を拡張([#8620](https://github.com/mapbox/mapbox-gl-js/pull/8620))

### 書式設定された式でtext-colorを使用して、ラベルの異なる部分を異なる色で描画できるように([#8068](https://github.com/mapbox/mapbox-gl-js/pull/8068))

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

```jsx
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": "東京都新宿区西新宿二丁目８番１号"
          }
        }]
      }
    },
    "layout": {
      "text-field": ["format",
        ["get", "name"], { "text-color": "red" },
        "\n", {},
        ["get", "address"], {"text-color": "blue"}
      ]
    }
});
```

![text-color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/270436/f9fe88f8-01d4-611a-e38b-024ffb3cf429.png)


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

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



# Mapbox GL JS v1.3.1からの新機能
Mapbox GL JS v1.3.1は2019/09/05にリリースされました。

## 🐞 バグ修正
- sourceのリロード中にマップが削除された場合にエラーが発生するバグを修正 ([#8711](https://github.com/mapbox/mapbox-gl-js/pull/8711))
- IE11でロード後にrender eventが発生しないことがあるバグを修正 ([#8708](https://github.com/mapbox/mapbox-gl-js/pull/8708))

# Mapbox GL JS v1.3.2からの新機能
Mapbox GL JS v1.3.2は2019/09/26にリリースされました。

## 🐞 バグ修正
- Firefox >=69 でキャッシュにアクセスする時のSecurityErrorを修正 ([#8780](https://github.com/mapbox/mapbox-gl-js/pull/8780))


# Mapbox GL JS v1.4.0からの新機能
Mapbox GL JS v1.4.0は2019/09/27にリリースされました。


## ✨ 機能
### `image` 演算子を追加 ([#8684](https://github.com/mapbox/mapbox-gl-js/pull/8684))
例えば`image`を使って以下のように指定することができます。

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

### 可変ラベル配置でのtext-offsetが可能に([#8642](https://github.com/mapbox/mapbox-gl-js/pull/8642))
- `text-variable-anchor`を指定した時に`text-radial-offset`が設定されてない場合でも`text-offset`の値を用いて表示できるようです。


## 🍏 改善
- raster terrainの読み込みの高速化と見た目の改善 ([#8694](https://github.com/mapbox/mapbox-gl-js/pull/8694))
- リサイズや*RenderedWorldCopies等に関するドキュメントの改善 ([#8748](https://github.com/mapbox/mapbox-gl-js/pull/8748), [#8754](https://github.com/mapbox/mapbox-gl-js/pull/8754))
- シングルタッチとマルチタッチのズームとパンの相互作用を改善([#7196](https://github.com/mapbox/mapbox-gl-js/pull/7196)), ([#8100](https://github.com/mapbox/mapbox-gl-js/pull/8100))

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




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

- `image`演算子を追加 ([#8684](https://github.com/mapbox/mapbox-gl-js/pull/8684))
- styleがMapbox APIと互換性があることを検証するための関数を追加 ([#8663](https://github.com/mapbox/mapbox-gl-js/pull/8663))