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

Question

我正在尝试在 angular 中为具有 openlayers 和 openstreetmap 的 map 进行精确定位，但精确定位未显示。

然而，map 确实会显示出来并且是功能性的。 为了显示map本身，我首先遇到了css中需要更改宽度和高度的问题，也许这是一样的？ 但我不知道如何设置图层样式。

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

您的图标的路径可能存在问题。 这对我有用：

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