Openlayers地图不可拖动

Question

我想在简单的有角度的网站上显示地图。 component.ts的代码是

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

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

  constructor() { }

  ngOnInit(): void {
    var map = new Map({
      layers: [
        new TileLayer({
          source: new OSM()
        }),
        new TileLayer({
          source: new TileDebug()
        })
      ],
      target: 'mapdiv',
      view: new View({
        center: [0, 0],
        zoom: 1
      })
    });
  }
} 

并且component.html的代码是

<div id = 'mapdiv'></div>

地图显示在浏览器中（Chrome），但不可移动（可拖动）。

Answer 1

看看我一年前I can't display the openlayer map properly until after a window resize做出的回答。

尽管问题有些不同，但我认为这可能是相关的。在创建组件的方式中，您会遇到计时问题，这可能会导致地图不显示或可能导致类似情况的发生。

在该问题中，您还有另一种解决方案也可以解决该问题。