在Leaflet中预加载图像叠加层

Question

在我的项目中，我使用滑块按顺序在Leaflet Map上显示大约50个叠加图像。为了避免空白，我在循环中预加载图像：

imageArray.push(new imageItem(url+val));

然后，当我需要显示叠加层时，我必须将图像URL发送给Leaflet：

ovl=new L.imageOverlay(get_ImageItemLocation(imageArray[k]), bounds),
ovl.addTo(mymap);

其中get_ImageItemLocation()是：

function get_ImageItemLocation(imageObj) {
  return(imageObj.image_item.src)
}

我想知道这个程序在表现方面是否正确。有没有办法将Image对象发送到L.imageOverlay而不是url？我用它访问了两次图像吗？

Answer 1

如果您的图像缓存在浏览器中（主要取决于服务器发送的标头），则不会下载两次。 More on HTTP caching on MDN。 DevTools中的Network选项卡对于检查它非常有用：

查看传单文档和imageOverlay source，很明显它只需要网址，而不是实际的图片数据。

改变它不会太难，基本上只是替换setUrl method中的代码

this._image.src = URL.createObjectURL(blob); // where blob is your image data

类似

max-age

但是......我不会为此担心。只需确保您的图片已缓存（在响应标头中设置了正确的{{1}}），它就可以了。

Answer 2

  

是不是有办法将Image对象发送到L.imageOverlay而不是网址？

从Leaflet 1.2.0开始，Image Overlay API不接受除字符串之外的任何内容。

  

我是否用这个访问了两次图像？

您正在创建 <img>元素两次。我不认为这会产生很大的性能影响，特别是对于50个图像，并且每对实际上只有一个图像被插入到DOM中。

我们可以争论Leaflet Image Overlay是否也应该接受<img>节点而不是url字符串。但是您应该意识到Leaflet在<img>元素上内部应用了类和侦听器，因此您传入的节点将被修改。

这可能对您的案件没有问题，但可能适用于其他案件。

最后，我不确定这样做会有什么大的性能提升。

实际上，您甚至可以删除预加载<img>引用（只是保留重建URL的方法，或将URL字符串保留在内存中），因为唯一的一点是让浏览器开始提取图像并在缓存中准备就绪。

Answer 3

另一种方法，仅在叠加层共享相同的边界框时有效，将50个图像放在视频文件中并使用bool HasPicture; exchangeContact.TryGetProperty(ContactSchema.HasPicture, out HasPicture); 。然后，您的滑块必须将视频的播放时间设置为指向正确的帧，而不是切换图像。

Answer 4

如果您想在 <!-- File: example.blade.php --> @extends('layout') @section('content') <div> <h1>My view</h1> <p>Some content of my view</p> </div> @endsection @push('script') <script> alert('Hey there stackoverflow!'); </script> @endpush 中预加载图像，您可以像这样强制加载图像：

ImageOverlay

因此，您可以在所有叠加层上调用 let imageLayer = L.imageOverlay(imageUrl, imageBounds) imageLayer._initImage() imageLayer.once('load', () => { that.map.eachLayer(function (layer) { that.map.removeLayer(layer); }); imageLayer.addTo(that.map) }); 方法，向它们添加回调（以计算准备好的叠加层），然后使用适合您的逻辑（显示所有准备就绪或第一个准备就绪的时间）。这取决于您的需求。