如何用ThreeJs实现大屏3D地图上的气泡图、渐变柱体和热力图功能？
摘要：前提 上一篇文章中我们完成了地图区块模型的渲染，在此基础之上本篇来讲解气泡图、3D柱形图以及3D热力图的实现方式。 首先，为了更好的关注点分离及与地图渲染模块的解耦，我们可以把所有类型的可视化元素抽象出一个图层基类BaseLayer： *
前提
上一篇文章中我们完成了地图区块模型的渲染，在此基础之上本篇来讲解气泡图、3D柱形图以及3D热力图的实现方式。
首先，为了更好的关注点分离及与地图渲染模块的解耦，我们可以把所有类型的可视化元素抽象出一个图层基类BaseLayer：
/**
* 图层基类
*/
abstract class BaseLayer {
map: ThreeMap
uuid: string
cfg: any
setting: LayerSetting
/**
* 初始化时机
*/
abstract init(initCfg): void
/**
* 每帧更新函数
*/
abstract update(timeStamp): void
/**
* 销毁函数
*/
abstract destroy(): void
/**
* 显示图层
*/
abstract show(): void
/**
* 隐藏图层
*/
abstract hide(): void
/*
*
*/
// ......
}
其中ThreeMap类型为上一篇中所实现的地图实例；LayerSetting为图层的配置内容。
图层的更新、销毁等生命周期交由地图/使用方接管。
class Threemap {
constructor() {
/* ... */
const animate = (timeStamp) => {
/* 更新图层 */
this.layers.forEach(layer => {
layer.update(timeStamp)
})
this.requestID = requestAnimationFrame(animate)
}
/* ... */
}
/*
......
*/
public addLayer(layer: BaseLayer, initCfg?) {
this.layers.push(layer)
layer.map = this
layer.init(initCfg)
}
public removeLayer(layer: BaseLayer) {
const idx = this.layers.findIndex(curLayer => curLayer === layer)
if(idx >= 0) {
this.layers.splice(idx, 1)
}
layer.destroy()
}
public clearLayer() {
this.layers.forEach(layer => {
layer.destroy()
})
this.layers = []
}
}
气泡图
气泡包括散点和作扩散动画的波纹两部分组成。