javascript - 图像在 osf 层顶部的静态图像层上显示错误

Question

我关注了 example从 openlayers 书中在 osf 层上添加静态图像。它有效，但我的图像 (256x256) 显示为矩形。我尝试使用投影坐标并查看了此处的其他帖子，但我无法理解为什么图像未显示为正方形:

// Create map
var map = new ol.Map({
  target: 'map', // The DOM element that will contains the map
  renderer: 'canvas', // Force the renderer to be used
  layers: [
    // Add a new Tile layer getting tiles from OpenStreetMap source
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  // Create a view centered on the specified location and zoom level
  view: new ol.View({
    center: ol.proj.transform([16.3725, 48.208889], 'EPSG:4326', 'EPSG:3857'),
    zoom: 4
  })
});

// Create an image layer
var imageLayer = new ol.layer.Image({
  opacity: 0.75,
  source: new ol.source.ImageStatic({
    attributions: [
      new ol.Attribution({
        html: ''
      })
    ],
    url: 'https://placebear.com/256/256',
    imageSize: [256, 256],
    projection: map.getView().getProjection(),
    imageExtent: ol.extent.applyTransform(
      [0, 0, 16.3725, 48.208889], ol.proj.getTransform("EPSG:4326", "EPSG:3857"))
  })
});

map.addLayer(imageLayer);

Answer 1

ol.source.ImageStatic 用于在 map 上放置地理引用图像(例如历史 map 的扫描图)。这是你的想法吗？如果您只想显示图像并将其锚定到 map 上的某个位置，您最好使用 ol.Overlay 或具有功能的 ol.layer.Vector带有 ol.style.Icon。

也就是说，只有当 ol.source.ImageStatic 上设置的 imageExtent 在投影 map View 上显示为正方形时，您的图像才会显示为正方形。