openlayer打点实现波纹扩散效果

最新推荐文章于 2026-04-07 11:13:58 发布

原创

最新推荐文章于 2026-04-07 11:13:58 发布 · 1k 阅读

标签

#js #vue

收录于

使用OpenLayers实现地图上点击打点并伴随波纹扩散的效果，包括方法定义和事件调用，同时介绍了清除矢量图层的技巧。

openlayer打点模拟波纹扩散效果

方法定义

addAnimatePoint(point) {
            // 定义一个打点图层，必须是矢量层
            let that = this
            let pointAnimationLayer = new VectorLayer({
                source: new VectorSource()
            })
            // 可传类型为icon/circle
            let pointType = point.pointType ? point.pointType : 'circle'
            let imageStyle
            if (pointType == 'icon') {
                imageStyle = new Icon({
                    src: point.pointStyle.src,
                    color: point.pointStyle.iconColor || 'white'
                })
            } else {
                imageStyle = new CircleStyle({
                    fill: new Fill({
                        color: point.pointStyle.circleColor || 'red'
                    }),
                    radius: point.pointStyle.circleRadius || 5
                })
            }
            // 添加矢量层
            that.map.addLayer(pointAnimationLayer)
            // 创