地图 openlayer 不想显示 - Angular 16

Question

我正在尝试通过 openlayer 将地图集成到我的项目中。我遵循了不同的教程，但我做不到：

• 我显示了一个 div，但没有显示地图
• 我在控制台中没有错误
• 我安装了 npm install --save ol

请帮我找到解决方案

我的文件：App.component.ts

import { Component, OnInit } from '@angular/core';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit {
  title = 'threePercent';
  map!: Map;

  ngOnInit() {
    this.initMap();
  }

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

查看 App.component.html

<main>
    <div id="map" class="map-container"></div>
  </main>
<router-outlet></router-outlet>
<app-app-bar></app-app-bar>

查看 App.component.scss

.map-container{
    width: 300px;
    height: 300px;
}

我尝试遵循不同的教程，但找不到：

• https://dev.to/camptocamp-geo/openlayers-in-an-angular-application-mn1
• https://medium.com/@pro.gramistka/create-interactive-maps-in-angular-12-project-with-openlayers-ba6683d6fe5b

Answer 1

你导入了openlayers的css吗？

有不同的方法可以做到这一点，其中一种是

angular.json

"styles": [
  "src/styles.css",
  "node_modules/ol/ol.css"
],