Angular OpenLayers 未显示自定义指针功能

Question

I'm trying to make a pinpoint for a map with openlayers and openstreetmap in angular but the pinpoint does not show.

The map however does get displayed and is funtional. To display the map itself I first encountered the issue that the width and height needed to be altered in css, maybe this is the same? But I do not know how I would need to style the layer.

import { Component, OnInit } from '@angular/core';
import Map from 'ol/Map';
import View from 'ol/View';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { fromLonLat } from 'ol/proj.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import VectorSource from 'ol/source/Vector';
import {Icon, Style} from 'ol/style';
import OSM from 'ol/source/OSM';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  map;
  testp;
  vectorSource;
  vectorLayer;
  rasterLayer;
  constructor() { }

  ngOnInit(): void {
    this.testp = new Feature({
      geometry: new Point(fromLonLat([3.7219431, 51.054633]))
    });

    this.testp.setStyle(new Style({
      image: new Icon(({
        color: '#8959A8',
        crossOrigin: 'anonymous',
        src: '../assets/car-parking.svg',
        imgSize: [20, 20]
      }))
    }));

    this.vectorSource = new VectorSource({
      features: [this.testp]
    });

    this.vectorLayer = new VectorLayer({
      source: this.vectorSource
    });

    this.map = new Map({
      target: 'map',
      layers: [ new TileLayer({
        source: new OSM()
      }), this.vectorLayer ],
      view: new View({
        center: fromLonLat([3.7219431, 51.054633]),
        zoom: 15,
      })
    });
  }

}

Answer 1

There might be an issue with the path to your icon. This worked for me:

import Style from 'ol/style/Style';
import Icon from 'ol/style/Icon';

...

this.testp.setStyle(new Style({
  image: new Icon(({
    color: '#8959A8',
    crossOrigin: 'anonymous',
    src: 'assets/car-parking.svg',
    imgSize: [20, 20]
  }))
}));