背景

昨日、MapLibre GL JS の expression で書こうとしたけど未対応だった、distance expression。
Mapbox GL JS (ver3.0.1)での結果をあらためてまとめてみました。
なお、Mapbox GL JS の distance expressionは、投稿時点（2023.12.11）時点では、日本語ドキュメントでは「未対応」となっていますが、先日リリースされた ver 3.0.0 で実装された機能です。

書き方

コード

'circle-color': [
  'interpolate', 
  ['linear'], 
  [
    'distance', 
    { type: 'Point', coordinates: [center.lng, center.lat] } // ここでは、center = map.getCenter()
  ], 
  0, '#0ff',  // 近いと水色
  100*1000, '#ff0', // 100キロ離れると黄色
  200*1000, '#f0f' // 200キロ以上離れるとマゼンダ
],

結果

See the Pen maplibre expressions (within) by humo (@humo-tech) on CodePen.

まとめ

簡単に書けました。おぉ。これはいいですね。
駅から◯キロメートル離れた位置にある店舗、とかそういうのに使えますかね。

おまけ

先日、#30DayMapChallenge 時に試していたものがあったのを忘れていました。

これは「ポリゴンとポイント」の距離判定をしたものなんですが、タイルの切れ目で色塗りが変わってしまったりしたので、こういう使い方はあまり想定されていないのかな？という印象です。
（「ポイントとポイント」の使い方が一番しっくり来てます）