2

enter image description here

style: function () {
    var path = "./../../../assets/icon/"
    var featureImage = 'track.png';

    return new Style({
        image: new Icon({
            opacity: 1,
            src: path + featureImage,
            scale: 0.5
        }),

        //text: new Text({
        //text: '',
        //font: '15px sans-serif',

        fill: new Fill({
            color: '#000000'
        }),

        stroke: new Stroke({
            color: '#838383',
            width: 1
        }),

        //offsetX: 0,
        //offsetY: -7
    })
}

This is the code which I have added after my WFS layer, but image is not added to the layer.

2
  • Are you sure the path is correct? What geometry types are you displaying? An image style is only used for Point geometries. If you wish to display an icon over a polygon the style will need a geometry function.
    – Mike
    Sep 23, 2021 at 14:37
  • @Mike the geometry type is line string and path is correct.
    – Tojoy
    Sep 23, 2021 at 14:43

1 Answer 1

3

To display an image on a LineString you will need a style array, one style with geometry function which returns a Point geometry (e.g. the midpoint of the line) where the image is to be placed, and another style to display the original LineString geometry.

[
  new Style({
    geometry: function(feature) {
      const geometry = feature.getGeometry();
      if (geometry.getType() === 'LineString') {
        return new Point(geometry.getCoordinateAt(0.5));
      } else {
        return geometry;
      }
    },
    image: new Icon({
        opacity: 1,
        src: path + featureImage,
        scale: 0.5
    }),
  }),
  new Style({
    //text: new Text({
    //text: '',
    //font: '15px sans-serif',

    fill: new Fill({
        color: '#000000'
    }),

    stroke: new Stroke({
        color: '#838383',
        width: 1
    }),
  }),
]

If you need multiple icons on the LineString the geometry function would need to return a MultiPoint geometry, for example for 6 points including the start and end of the line

geometry: function(feature) {
  const geometry = feature.getGeometry();
  if (geometry.getType() === 'LineString') {
    const showPoints = 6;
    const points = [];
    for (let i = 0; i < showPoints; i++) {
      points.push(geometry.getCoordinateAt(i / (showPoints - 1)));
    }
    return new MultiPoint(points);;
  } else {
    return geometry;
  }
},
7
  • -The image is not coming over the linestring
    – Tojoy
    Sep 24, 2021 at 4:56
  • () were missing on getType()
    – Mike
    Sep 24, 2021 at 8:15
  • Now the image is coming at the mid point of line string .Now I have to get the image on entire Line String. Can you help?
    – Tojoy
    Sep 24, 2021 at 10:10
  • What do you mean by "entire line string"? It can be of any shape, horizontal, vertical ... A picture or two would help. Please edit your question and add some pics.
    – TomazicM
    Sep 24, 2021 at 10:15
  • And if answer helped you solve your initial problem, it's customary on GIS SE site to mark it as accepted, to let other users with similar questions/problems know that problem was resolved.
    – TomazicM
    Sep 24, 2021 at 10:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.