Question

我在使用Internet Explorer 11（ edge 模式）的图层中显示svg图像时遇到问题。该图层显示在Chrome和FF上。地图本身似乎有效，因为我可以在同一个地图中看到另一个图层（从一个范围动态创建的简单ol.geom.Polygon）。

下面的代码显示了问题。它源自OpenLayers网站的static image example。我基本上只是更改了数据URI编码的svg图像的图像源：

// Map views always need a projection.  Here we just want to map image
// coordinates directly to map coordinates, so we create a projection that uses
// the image extent in pixels.
var extent = [0, 0, 1024, 968];
var projection = new ol.proj.Projection({
  code: 'xkcd-image',
  units: 'pixels',
  extent: extent
});

var map = new ol.Map({
  layers: [
    new ol.layer.Image({
      source: new ol.source.ImageStatic({
        attributions: [
          new ol.Attribution({
            html: '&copy; <a href="http://xkcd.com/license.html">xkcd</a>'
          })
        ],
        url: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiBpZD0ic3ZnMiIgd2lkdGg9IjEwMjQiIGhlaWdodD0iOTY4IiB2aWV3Qm94PSIwIDAgMTAyNCA5NjgiPgogIDxtZXRhZGF0YSBpZD0ibWV0YWRhdGExMCI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxkZWZzIGlkPSJkZWZzOCIgLz4KICA8Y2lyY2xlIHN0eWxlPSJmaWxsOiNlNjAwMDAiIGlkPSJjaXJjbGU0IiBjeD0iNTEyIiBjeT0iNDg0IiByPSIzMDAiIC8+Cjwvc3ZnPgo=',
        projection: projection,
        imageExtent: extent
      })
    })
  ],
  target: 'map',
  view: new ol.View({
    projection: projection,
    center: ol.extent.getCenter(extent),
    zoom: 0
  })
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://openlayers.org/en/v3.13.1/css/ol.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://openlayers.org/en/v3.13.1/build/ol.js"></script>

<div class="row-fluid">
  <div class="span12">
    <div id="map" class="map"></div>
  </div>
</div>

如果您在“IE10”文档模式中浏览小提琴，该图层将显示。

任何帮助？

Answer 1

IE11有bug，导致它在svg图像上将宽度和高度设置为0.

幸运的是，ol.source.ImageStatic有一个imageSize构造函数选项。所以你必须提前知道图像的宽度和高度，然后添加

imageSize: [width, height]

到您的ol.source.ImageStatic配置。

Answer 2

IE11确实有一个svg图像的错误，因为 ahocevar 指出了我。

我找到的解决方案是通过height在width对象上设置<img> / ol.source.ImageStatic#imageLoadFunction：

source: new ol.source.ImageStatic({
  attributions: [
    new ol.Attribution({
      html: '&copy; <a href="http://xkcd.com/license.html">xkcd</a>'
    })
  ],
  url: 'image.svg',
  imageLoadFunction: function(staticImage, src){
    var image = staticImage.getImage();
    image.width = 1000;
    image.height = 900;
    // Now load the svg
    image.src = src;
  },
  projection: projection,
  imageExtent: extent
})

使用OpenLayer3，Internet Explorer 11不显示基于svg的图层

2 个答案: