如何在Leaflet ImageOverlay中使用base64字符串而不是URL

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在Leaflet ImageOverlay中使用base64字符串而不是URL相关的知识,希望对你有一定的参考价值。

我正在使用ImageOverlay图层使用Leaflet在地图上打印叠加图像。如果我使用可在线访问的图像,即使用Leaflet example

var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);

一切正常。但是,我想使用base64编码的字符串作为图像。此字符串在我的脚本中的其他位置预先计算。

我应该如何插入这样的字符串而不是URL路径?

PS:我正在使用angularjs。

答案

只需将base64编码的图像字符串作为L.imageOverlay的第一个参数传递,即代替你的imageUrl

var map = L.map('map');

var imageUrl = 'data:image/jpeg;base64,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

以上是关于如何在Leaflet ImageOverlay中使用base64字符串而不是URL的主要内容,如果未能解决你的问题,请参考以下文章

如何在 iframe 中使用 Leaflet.js 中的地图

使用 Leaflet-react 时如何调用 fitBounds()?

如何在带有 webpack 的 React 应用程序中包含“leaflet.css”?

如何在Leaflet地图多边形上触发事件?

leaflet 如何绘制圆

如何仅使用 DOM 对象获取 leaflet.js 实例?