时间戳

首页 > 解决方案 > OpenLayers 6.4.3 地图更新后不显示

angular - OpenLayers 6.4.3 地图更新后不显示

问题描述

我已经更新到 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 高度...这绝不是响应式设计...我怎样才能使它以响应方式运行？

标签： angulartypescriptopenlayers-6

解决方案

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

IE

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

推荐阅读