Question

我试图通过OpenLayers在页面上显示地图，看起来还可以，但是我注意到当我使用toBlob保存地图作为.png图像大小时，这是错误的。然后，我查看了html代码，并发现该层的实际大小与其div容器不同。

Div容器为512x512像素，但图层为384x384像素。该层的变换矩阵的值为1.33333，但不为1。

我需要一种方法来使我的图层恰好适合其容器的大小，但到目前为止我仍不明白如何实现这一目标。

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <style>
      html, body
      {
        height: 100%;
        width: 100%;
      }
      .container
      {
        margin: 0;
        height: 512px;
        width: 512px;
        font-family: sans-serif;
        background-color: rgb(23, 46, 107);
        position: absolute;
      }

    </style>
  </head>
  <body>
    <div id="map" class="container"></div>
     </body>
</html>

和js：

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';

 var layer = new VectorLayer
 ({
  source: new VectorSource
  ({
    format: new GeoJSON(),
    url: './data/countries.json'
  })
});

var map = new Map({
layers: [layer],
target: 'map',
view: new View({
  center: [0, 0],
  zoom: 2
})
});

OpenLayers：图层未填充容器

0 个答案: