オープンレイヤーマップにマーカーを挿入するにはどうすればよいですか?

Question

現在地図アプリケーションを構築中です。マークアップを追加するためにインターネットで見つけたすべての方法を試しましたが、まだ機能しません。私は何か間違ったことをしましたか？

これは私の Angular コードです:

どういうわけか Leaflet を使用する方がはるかに簡単ですが、Open Layers をすぐに諦めたくありません。

ああああ

Answer 1

can u try this example of code

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'
    });
  }
}