Openlayers 地图不可拖动答案

【问题标题】：Openlayers map not draggableOpenlayers 地图不可拖动
【发布时间】：2020-04-07 00:54:15
【问题描述】：

我想在简单的角度网站中显示地图。 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) 上，但不可移动（可拖动）。

【问题讨论】：

澄清一下，您正在查看地图，包括 OSM 和调试，但您不能平移？
是的。地图可见，但无法平移和放大。
见github.com/openlayers/openlayers/issues/10732

标签： angular typescript components maps openlayers

【解决方案1】：

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

虽然问题有点不同，但我认为可能是相关的。在您创建组件的方式中，您遇到了时间问题，这可能导致地图不显示或可能导致类似您的情况。

在那个问题中，您还有另一个解决方案也可以解决这个问题。

【讨论】：

【解决方案2】：

在我的 component.html 文件中添加以下内容后，它工作正常。

<link rel="stylesheet" href="https://openlayers.org/en/v6.2.1/css/ol.css" type="text/css">

感谢大家的支持！！！

【讨论】：