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:[]
 })

更新

我已经更新了上面的代码，以包含一个包含我的地图的容器。在更新之前，该容器具有一个附加的类，用于设置高度和宽度...现在将其忽略，需要将具体高度设为输入容器以显示地图...所以我必须输入xxx.px的高度...这绝不是响应式设计...如何使它表现为响应式？

Answer 1

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

即

f1

OpenLayers 6.4.3更新后地图未显示

1 个答案: