javascript - OpenLayers problem with displaying icons on map

Question

I've got a problem with OpenLayers 6.5.0. I would like to show an icon on the map, but in spite of many attempts I have failed. I think it isn't a problem with the coordinates. I tried EPSG conversion. I have looked at the documentation and other available examples and have no idea what might be causing this problem.

var locations = [
  [15.94606, 51.57557],
  [15.94602, 51.57572],
  [15.94604, 51.57576],
  [15.946, 51.57581],
  [15.94588, 51.57586],
  [15.94567, 51.57591],
  [15.94543, 51.57597],
  [15.94527, 51.57602],
  [15.94513, 51.57605],
  [15.94502, 51.57607],
  [15.94497, 51.57609],
  [15.94499, 51.57609],
  [15.94497, 51.57611],
  [15.94501, 51.57616],
  [15.94525, 51.57636]
 
];

var lineString = new ol.geom.LineString(locations).transform('EPSG:4326', 'EPSG:3857')

    var startMarker = new ol.Feature({
        type: 'icon',
        geometry: new ol.geom.Point(ol.proj.transform([15.94606, 51.57557], 'EPSG:4326','EPSG:3857'))
    });
    var endMarker = new ol.Feature({
        type: 'icon',
        geometry: new ol.geom.Point(lineString.getCoordinateAt(1))
    });


    var lineLayer = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                    geometry: lineString,
                    name: 'Line'
                }),
                startMarker,
                endMarker
            ]
        }),
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'red',
                opacity: 0.5,
                width: 5
            }),
            'icon': new ol.style.Style({
                image: new ol.style.Icon({
                    anchor: [0.5, 1],
                    src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png'
                })
            })
        })
    });

var view = new ol.View({
  center: ol.proj.fromLonLat([15.94616, 51.57555]),
  zoom: 13
});

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    lineLayer
  ],
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
      collapsible: false
    })
  }),
  view: view
});

body,
html,
.map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js "></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css">
<div id="map" class="map"></div>

question from:https://stackoverflow.com/questions/65891159/openlayers-problem-with-displaying-icons-on-map

Answer 1

The style does not need an icon property, simply include the image with the stroke style

    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'red',
            opacity: 0.5,
            width: 5
        }),
        image: new ol.style.Icon({
            anchor: [0.5, 1],
            src: 'https://openlayers.org/en/v3.20.1/examples/data/icon.png'
        })
    })