Bagaimana untuk memasukkan penanda pada peta Open Layers?

Question

Sedang membina apl peta. Mencuba setiap kaedah yang saya temui di internet untuk menambah markup tetapi masih tidak berfungsi. Adakah saya melakukan sesuatu yang salah?

Ini kod Angular saya:

Entah bagaimana lebih mudah untuk menggunakan Risalah, tetapi saya tidak mahu berputus asa pada Lapisan Terbuka begitu awal.

export class MapComponent implements OnInit{
  
  map! : Map;
  marker! :any;
  center = fromLonLat([5.5697, 50.6330]);
  iconFeature = new Feature({
    geometry : new Point(fromLonLat([5.5697, 50.6330]))
  })
  
  ngOnInit(): void {

    this.map = new Map({
      view : new View({
        center : this.center,
        zoom : 0
      }),
      layers : [

         new LayerVector({
          source : new SourceVector({
            features : [this.iconFeature]
          }),
          style : new Style({
            image : new Icon({
              anchor : [0.5, 46],
              src : '../assets/istockphoto-1153114937-2048x2048-removebg-preview.png'
            })
          })
         }),
         new TileLayer({
           source : new OSM()
         })
      ],
      target :  "map"
    })   
  }

}

Answer 1

boleh cuba contoh kod ini

import { Map, View } from 'ol';
import { Tile as TileLayer, Vector as LayerVector } from 'ol/layer';
import { OSM, Vector as SourceVector } from 'ol/source';
import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import { fromLonLat } from 'ol/proj';
import { Icon, Style } from 'ol/style';

export class MapComponent implements OnInit{
  
  map!: Map;
  center = fromLonLat([5.5697, 50.6330]);

  ngOnInit(): void {

    const marker = new Feature({
      geometry: new Point(fromLonLat([5.5697, 50.6330]))
    });

    const markerLayer = new LayerVector({
      source: new SourceVector({
        features: [marker]
      }),
      style: new Style({
        image: new Icon({
          anchor: [0.5, 1],
          src: '../assets/istockphoto-1153114937-2048x2048-removebg-preview.png'
        })
      })
    });

    this.map = new Map({
      view: new View({
        center: this.center,
        zoom: 0
      }),
      layers: [
        new TileLayer({
          source: new OSM()
        }),
        markerLayer
      ],
      target: 'map'
    });
  }
}