Openlayers 地图不可拖动

Question

我想在简单的 angular 网站中显示地图。 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

看看我一年前的回答。

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

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

Answer 2

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

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

感谢大家的支持！！！

Openlayers 地图不可拖动

Openlayers map not draggable

maps

components

openlayers

typescript

angular