解决OpenLayers postcompose事件event.vectorContext获取失败的问题?

作者站长头像
站长
· 阅读数 26

openlayers 使用地图postcompose事件event.vectorContext 为什么获取不到呢?通过openlayers添加点然后实现点位闪烁效果

flash(feature) {
      var _this = this;
    var start = new Date().getTime();
    var listenerKey;

    function animate(event) {
        debugger;
        var duration = 1000;
        var vectorContext = event.vectorContext;
        var frameState = event.frameState;
        var flashGeom = feature.getGeometry().clone();
        var elapsed = frameState.time - start;
        var elapsedRatio = elapsed / duration;
        // var radius = ol.easing.easeOut(elapsedRatio) * 6 + 5;
        // var opacity = ol.easing.easeOut(1 - elapsedRatio);
        var radius = 10;
        var opacity = 1;
        console.log("radius:::" + radius + ":::opacity:::" + opacity)
        var style = new Style({
            image: new Circle({
                radius: radius,
                snapToPixel: false,
                stroke: new Stroke({
                    color: 'rgba(255, 0, 0, ' + opacity + ')',
                    width: 0.25 + opacity
                })
            })
        });
        vectorContext.setStyle(style);
        vectorContext.drawGeometry(flashGeom);
        if (elapsed > duration) {
            ol.Observable.unByKey(listenerKey);
            return;
        }
        _this.map.render();
    }

    listenerKey = _this.map.on('postcompose', animate);
}
回复
1个回答
avatar
test
2024-06-19

answer image

在ol6中,在图层上使用postrender事件,新的getVectorContext函数提供了对即时矢量渲染API的访问。

import {getVectorContext} from 'ol/render';

// construct your map and layers as usual

layer.on('postrender', function(event) {
  const vectorContext = getVectorContext(event);
  // use any of the drawing methods on the vector context
});
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容