#グローエフェクト描いてみた
Mapbox ブログで紹介されている、グローエフェクト。
とても表現がかっこいいので、ブログにあるMapboxスタジオでの実現方法を真似して、Mapbox GL JSで描いてみた。
グローエフェクトとは
「グロー(発光)エフェクト」とは、John M. Nelson氏が開発したカートグラフィー(地図製作)の手法のひとつで、マッピングしたデータを発光しているかのように表現するテクニックです。 (# Mapboxブログより引用)
ぼかした円をいくつか重ねた上で、中央に白いポイントを置いてあげることで(これがポイント)、光り輝くような表現を実現します(しているようです)。
結果
コード(グローエフェクト部分)
// データは手抜きで、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
}
})
参考