2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

MapboxAdvent Calendar 2021

Day 11

Mapbox GL JS で グローエフェクトを実現

Posted at

#グローエフェクト描いてみた
Mapbox ブログで紹介されている、グローエフェクト。
とても表現がかっこいいので、ブログにあるMapboxスタジオでの実現方法を真似して、Mapbox GL JSで描いてみた。

グローエフェクトとは

「グロー(発光)エフェクト」とは、John M. Nelson氏が開発したカートグラフィー(地図製作)の手法のひとつで、マッピングしたデータを発光しているかのように表現するテクニックです。 (# Mapboxブログより引用)

ぼかした円をいくつか重ねた上で、中央に白いポイントを置いてあげることで(これがポイント)、光り輝くような表現を実現します(しているようです)。

結果

かっこいい。
mapbox_glow_effect.png

コード(グローエフェクト部分)

コード全文はこちら

// データは手抜きで、turf.jsによる、randomPoint
const points = turf.randomPoint(10000, {bbox: [138.5, 35.6, 140.5, 37]}) 

// データを addSource
map.addSource('points', {type: 'geojson', data: points})

// 大きめの円をぼかして描画
map.addLayer({
  id: 'Glowy things 1',
  source: 'points',
  type: 'circle',
  paint: {
    'circle-color': '#6ff77c',
    'circle-radius': 10,
    'circle-blur': 3,
    'circle-opacity': 0.4
  }
})

// 少し小さめの円をより鮮やかな色で描画
map.addLayer({
  id: 'Glowy things 2',
  source: 'points',
  type: 'circle',
  paint: {
    'circle-color': '#00ff37',
    'circle-radius': 5,
    'circle-blur': 3,
    'circle-opacity': 0.4
  }
})

// 最後に、真っ白な円を1pxで描画 (ここがポイント)
map.addLayer({
  id: 'Glowy things 3',
  source: 'points',
  type: 'circle',
  paint: {
    'circle-color': '#ffffff',
    'circle-radius': 1,
    'circle-blur': 0,
    'circle-opacity': 1
  }
})

参考

2
1
1

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
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?