Question

我有3个按钮

<button type="button" class="btn btn-outline-primary waves-effect " (click)="onClick('first')"
            [ngClass]="status === 'first' ? 'clicked' : ''">
            First
</button>

<button type="button" class="btn btn-outline-primary waves-effect " (click)="onClick('second')"
            [ngClass]="status === 'second' ? 'clicked' : ''">
            Second
</button>

<button type="button" class="btn btn-outline-primary waves-effect" (click)="onClick('third')"
            [ngClass]="status === 'third' ? 'clicked' : ''">
            Third
</button>

每个扩展一个div：第二个和第三个包含开放层地图（v5.3.0）的实例

<div *ngSwitchCase="'second'">
  <app-map-component></app-map-component>
</div>
<div *ngSwitchCase="'third'">
  <app-map-component></app-map-component>
</div>

app-map-component是包含开放层地图的简单角度组件

HTML

<div id="map" class="map"></div>

TS

import { Component, OnInit } from '@angular/core';
import OlMap from 'ol/Map';
import OlVectorSource from 'ol/source/Vector';
import OlVectorLayer from 'ol/layer/Vector';
import OlXYZ from 'ol/source/XYZ';
import OlTileLayer from 'ol/layer/Tile';
import OlView from 'ol/View';
import { fromLonLat, toLonLat, transform } from 'ol/proj';
import { Fill, Stroke, Style } from 'ol/style.js';
import Feature from 'ol/Feature';


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


  map: OlMap;
  source: OlXYZ;
  layer: OlTileLayer;
  view: OlView;
  vectorSource: OlVectorSource;
  vector: OlVectorLayer;

  constructor() { }

  ngOnInit() {
      this.initializeMap();
  }

  private initializeMap() {

    this.vectorSource = new OlVectorSource({
      wrapX: false
    });

    this.vector = new OlVectorLayer({
      source: this.vectorSource,
      style: new Style({
        fill: new Fill({
          color: 'rgba(0,123,255, 0.4)'
        }),
        stroke: new Stroke({
          color: '#007bff',
          width: 4
        }),
        image: new CircleStyle({
          radius: 7,
          fill: new Fill({
            color: '#90EE90'
          })
        })
      })
    });

    this.source = new OlXYZ({
      url: 'http://tile.osm.org/{z}/{x}/{y}.png'
    });

    this.layer = new OlTileLayer({
      source: this.source
    });

    this.view = new OlView({
      center: fromLonLat([52.661594, 52.433237]),
      zoom: 4
    });

    this.map = new OlMap({
      target: 'map',
      layers: [this.layer, this.vector],
      view: this.view
    });

    navigator.geolocation.getCurrentPosition((pos) => {
      const coords = fromLonLat([pos.coords.longitude, pos.coords.latitude]);
      this.map.getView().animate({ center: coords, zoom: 10 });
    });
  }

}

加载页面时，如果我单击“ 第二”按钮，则表示地图已正确加载，但是如果我单击了“ 第三”按钮，在“ 秒”之后，我看到一个空白的div。
在加载页面时，如果单击“ 第三”按钮，则表示地图已正确加载，并且在单击“ 第二”按钮时在' third '之后，地图已正确加载，但是如果我再次单击' third '按钮（在' second '之后），看到一个空白的div，依此类推

要恢复：

第二确定 ->第三空白
第三确定 ->第二确定 ->第三空白
第三确定 ->第二确定 ->第三空白 ->第二个确定 ->第三个空白 .. ..

我在控制台上没有看到任何错误，并且在切换按钮时似乎可以正确调用ngOnInit进行调试。我尝试致电this.map.updateSize()（来自this帖子），但没有结果。我也尝试使div id参数化来区分它们，但仍然没有结果。对这种奇怪的行为有任何想法吗？

编辑

检查HTML，我发现当我从“第二”按钮切换到“第三”按钮（仅在这种情况下）时，<div id='map'>包含两个div而不是一个

怎么可能？

OpenLayers地图未显示切换按钮

0 个答案: