遅くなりましたが、Mapbox GL JSのv1.3.0〜v1.4.0の新機能紹介です。
どんどん更新されていきますね
Mapbox GL JS v1.3.0からの新機能
Mapbox GL JS v1.3.0は2019/08/29にリリースされました。
🍏 機能
テキストを垂直に配置できるように (#8399)
text-writing-mode
でvertical
を指定すると垂直に配置できます。
例えば、以下のように書くと、垂直に表示することができます。
注意点としては、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/icon-allow-overlap
がtrue
に設定されている場合に機能するように、可変テキストの配置を拡張(#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"}
]
}
});
✨ 改善
- タイルのロードロジックを改善してリクエストをより積極的にキャンセルし、ズームやパンを行うときのパフォーマンスを改善(#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にリリースされました。
🐞 バグ修正
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)
-
NavigationControl
にoriginalEvent
のプロパティを追加 (#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と合わせての公開となります