如何在openlayers中画圆时显示渐变样式的动态文本？

Question

我无法在 openlayers 中使用“渲染器”选项在圆圈上显示文本样式。我认为此渲染器选项会覆盖文本样式。有没有办法在这种渐变风格上显示文字？ 我只是想以米为单位显示半径作为绘图圆的标题。

// Layers
var layer = new ol.layer.Tile({ source: new ol.source.Stamen({ layer: 'watercolor' }) });

    // The map
    var map = new ol.Map ({
      target: 'map',
      loadTilesWhileAnimating: true,
      loadTilesWhileInteracting: true,
      view: new ol.View ({
        zoom: 11,
        center: [260064, 6250762]
      }),
      controls: [ new ol.control.Attribution() ],
      interactions: [],
      layers: [layer]
    });

var stylex =  new ol.style.Style({
                    text: new ol.style.Text({
                        <!-- textAlign: "Start", -->
                        <!-- textBaseline: "Middle", -->
                        font: 'Normal 16px Arial',
                        text: 'Dynamic radius value!!',
                        fill: new ol.style.Fill({
                            color: '#fff'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#000000',
                            width: 3
                        }),
                        zIndex: 999999999,
                        offsetX: -45,
                        offsetY: 0,
                        rotation: 0
                    }),
                    renderer(coordinates, state) {
                        const [[x, y], [x1, y1]] = coordinates;
                        const ctx = state.context;
                        const dx = x1 - x;
                        const dy = y1 - y;
                        const radius = Math.sqrt(dx * dx + dy * dy);
                    
                        const innerRadius = 0;
                        const outerRadius = radius * 1.4;
                    
                        const gradient = ctx.createRadialGradient(
                            x,
                            y,
                            innerRadius,
                            x,
                            y,
                            outerRadius
                        );
                        gradient.addColorStop(0, 'rgba(255,0,0,0)');
                        gradient.addColorStop(0.6, 'rgba(255,0,0,0.2)');
                        gradient.addColorStop(1, 'rgba(255,0,0,0.8)');
                        ctx.beginPath();
                        ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
                        ctx.fillStyle = gradient;
                        ctx.fill();
                    
                        ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
                        ctx.strokeStyle = 'rgba(255,0,0,1)';
                        ctx.stroke();
                        
                        ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
                        ctx.textStyle = "center";
                        ctx.text = "deneme";
                        
                    }
                    
                });
    
    var vector2 = new ol.layer.Vector({
      name: 'Vecteur2',
      style: stylex,
      source: new ol.source.Vector()
    });
    vector2.setZIndex(99999);
    map.addLayer(vector2);
    
    <!-- var select = new ol.interaction.Select(); -->
    <!-- map.addInteraction(select); -->
    var draw = new ol.interaction.Draw({
        source: vector2.getSource(),
        type: 'Circle'
    });
    draw.on('drawstart', function(f){
    
        f.feature.setStyle(stylex);
        
    });
    draw.on('drawend',function(f){
        console.log("radius:"+f.feature.getGeometry().getRadius().toFixed(2)+" m");
        
    });
    map.addInteraction(draw);

我在上面添加的这些代码有什么问题？渐变风格很好看，可惜没有文字

开放层：v5

Answer 1

具有用于自定义渲染器和文本的单独样式对象的样式数组应该可以工作：

   var stylex =  [
                    new ol.style.Style({
                        renderer(coordinates, state) {
                            const [[x, y], [x1, y1]] = coordinates;
                            const ctx = state.context;
                            const dx = x1 - x;
                            const dy = y1 - y;
                            const radius = Math.sqrt(dx * dx + dy * dy);
                        
                            const innerRadius = 0;
                            const outerRadius = radius * 1.4;
                        
                            const gradient = ctx.createRadialGradient(
                                x,
                                y,
                                innerRadius,
                                x,
                                y,
                                outerRadius
                            );
                            gradient.addColorStop(0, 'rgba(255,0,0,0)');
                            gradient.addColorStop(0.6, 'rgba(255,0,0,0.2)');
                            gradient.addColorStop(1, 'rgba(255,0,0,0.8)');
                            ctx.beginPath();
                            ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
                            ctx.fillStyle = gradient;
                            ctx.fill();
                        
                            ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
                            ctx.strokeStyle = 'rgba(255,0,0,1)';
                            ctx.stroke();
                            
                            ctx.arc(x, y, radius, 0, 2 * Math.PI, true);
                            ctx.textStyle = "center";
                            ctx.text = "deneme";
                            
                        }
                    }),
                    new ol.style.Style({
                        text: new ol.style.Text({
                            <!-- textAlign: "Start", -->
                            <!-- textBaseline: "Middle", -->
                            font: 'Normal 16px Arial',
                            text: 'Dynamic radius value!!',
                            fill: new ol.style.Fill({
                                color: '#fff'
                            }),
                            stroke: new ol.style.Stroke({
                                color: '#000000',
                                width: 3
                            }),
                            zIndex: 999999999,
                            offsetX: -45,
                            offsetY: 0,
                            rotation: 0
                        }),
                    })
                  ];