更新后 OpenLayers 6.4.3 地图不显示

Question

我已经更新到 OpenLayers 上的最新版本，我已经检查了版本文档，没有任何重大更改。

代码在 VS 代码中编译没有错误，代码在 Chrome 中加载时偶尔没有问题，偶尔会出现此错误...图层只能添加到地图一次。

每次我加载一个层时，我都会检查该层，然后在重新加载之前将其删除，所以我不明白这是怎么可能的。

除了升级到 OpenLayers 6.4.3 之外，我没有做任何其他更改。

地图HTML:

  <div id="mapContainer" class="h100 w-100">
  <div id="map" class="map"
    style="padding: 0px; width: 100%; height: 100%;z-index: 0; position: 
    inherit; opacity: 1"
    [ngStyle]="{'cursor':mapvalues.mapCursor}">
    <div
      style="height: 200px;width: 50px;right: 0px;bottom: 0px; padding: 
       3px;margin: 0px;position: 
      absolute;z-index: 4999">
      <div style="float:left;padding: 3px; padding-right: 0px;padding-top: 
       0px">
        <lib-tool-zoom-sel></lib-tool-zoom-sel>
      </div>
      <div style="float:left;padding: 3px; padding-right: 0px;padding-top: 
       0px">
        <lib-tool-zoom-in></lib-tool-zoom-in>
      </div>
      <div style="float:left;padding: 3px; padding-right: 0px;padding-top: 
       0px">
        <lib-tool-zoom-out></lib-tool-zoom-out>
      </div>
      <div style="float:left;padding: 3px; padding-right: 0px;padding-top: 
        0px">
        <lib-tool-handcursor></lib-tool-handcursor>
      </div>
    </div>
  </div>
  </div>

地图CSS:

.mapWrap {
 height: 100%;
 overflow: hidden;
 padding-bottom: 22.25%;
 padding-top: 30px;
 }
 #mapWrap {
 width: 100%;
 // min-height: 400px;
 height : 100%;
 // position: inherit;
}

地图和视图.ts:

 import View from 'ol/View';
 import olMap from 'ol/Map';
 import { transform } from 'ol/proj';
 import { defaults as defaultInteractions } from 'ol/interaction';

 let view = new View({
 center:[Lng,Lat],
 zoom: 8,
 projection: 'EPSG:3857',
 maxZoom: 20,
 minZoom: 5
 });
 let map = new olMap({
 interactions: defaultInteractions({
 doubleClickZoom: false,
 dragPan: false,
 altShiftDragRotate: false,
 shiftDragZoom: false
 }),
 target: 'map',
 view: view,
 controls:[]
 })

更新

我已经更新了上面的代码，以包含一个包含我的地图的容器。在更新之前，这个容器附加了一个 class 来设置高度和宽度...现在忽略并需要在容器中输入具体高度才能显示地图...所以我必须在高度中输入 xxx.px...这绝不是响应式设计...我怎样才能使它表现在响应方式？

Answer 1

我为地图的容器添加了一个具体的高度。

即

<div id="mapContainer" class="h100 w-100">
    <div id="map"></div>
</div>

更新后 OpenLayers 6.4.3 地图不显示

OpenLayers 6.4.3 Map not showing after update

typescript

angular

openlayers-6