add gradient feature

[a18750799019]

the offical example https://openlayers.org/en/latest/examples/custom-circle-render.html i try to add gradient feature like the example,but the new Style({ renderer(coordinates, state) { }) renderer(coordinates, state) didn't work in the vuelayers@0.11.37 can you show me a example or a method to draw gradient feature

[a18750799019]

the code is

 import { random, range } from "lodash";
import { OverviewMap } from "ol/control";
import Feature from "ol/Feature.js";
import { Circle } from "ol/geom.js";
import { Fill, Style } from "ol/style.js";
import VectorSource from "ol/source/Vector";
import VectorLayer from "ol/layer/Vector";
import { transform } from "ol/proj";
let source = new VectorSource({
  projection: "EPSG:4326",
});
let vectorLayer = new VectorLayer({
  source: source,
}); 
 let radius = 10000;
      source = new VectorSource({
        projection: "EPSG:4326",
      });
      console.log(source, "source");
      vectorLayer = new VectorLayer({
        source: source,
      });
      let pos = transform([118.647, 23.252], "EPSG:4326", "EPSG:3857");
      let circleFeature = new Feature({
        geometry: new Circle(pos, radius),
      });
      circleFeature.setStyle(
        new Style({
          fill: new Fill({
            color: "#0000ff",
          }),
          // stroke: new Stroke({
          //   color: '#0000ff',
          //   width: 10000,
          // }),
        })
      );
      source.addFeature(circleFeature);
      let ary = [];
      ary.push(circleFeature);
      vectorLayer.id = "gradientFeature";
      this.$refs.map.addLayer(vectorLayer);

---

that may not use vuelayer sufficient,but it work,and a circle added to the openlayer but when i try to make the circle as a gradient circle it even not found in openlayer,and the render() doesnot work at all

  circleFeature.setStyle(
    new Style({
      renderer(coordinates, state) {
        console.log(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,225,0,0)");
        gradient.addColorStop(0.6, "rgba(255,225,0,0.2)");
        gradient.addColorStop(1, "rgba(255,225,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();
      },
    })
  );

[a18750799019]

also,because the circle needed to be dynamic with time ,so i listen @postrender="loadGeometry"

      <vl-map
        ref="map"
        :load-tiles-while-animating="true"
        :load-tiles-while-interacting="true"
        data-projection="EPSG:4326"
        style="height: 700px;width: 1120px;"
        @postrender="loadGeometry"
      />

in the function,i can judge from the time to know where the circle will be,and i dont know whether can do this, i hope you can help me find a way to satisfy the two needs at a time

          <vl-style-box>
            <vl-style-icon
              src=""
              :scale="0.6"
              :anchor="[0.5, 1]"
            ></vl-style-icon>
          </vl-style-box>

[ghettovoice]

Hello @a18750799019 , vuelayers v0.11.x is based on openlayers v5, so I guess you are trying your code with v5 version. You can switch to vuelayers v0.12, it is based on openlayers v6 and then your code with gradient should work. Why gradient don't work with v5 I don't know, probably it is not used at all.

As for circle needed to be dynamic with time: sorry, don't get it. Can you clarify what do you need here? Add dynamically a circle feature?

[a18750799019]

yes, the openlayers v6 support gradient,and i use postrender to realize animation,thankyou,the problme has resolved.