仅将任意图像添加到传单地图答案

【问题标题】：Adding just an arbitrary image to a leaflet map仅将任意图像添加到传单地图
【发布时间】：2020-02-10 23:35:56
【问题描述】：

我正在尝试使用传单显示比平时更小的地图，因此我不想使用普通的平铺系统。我不在乎平滑缩放和在需要时加载更高分辨率的图块。相反，我试图从图像文件中添加光栅图像。假设我在谷歌搜索“手绘地图”时出现的 file

所以我试试

download.file('https://external-preview.redd.it/7tYT__KHEh8FBKO6bsqPgC02OgLCHAFVPyjdVZI4bms.jpg?auto=webp&s=ff2fa2e448bb92c4ed6c049133f80370f306acb3',
              destfile = 'map.jpg')
map = raster::raster('map.jpg')

# it seems like i need a projection to use a raster image.
# not sure what controls do I have over this, especially in
# absence of a proper map layer and it's likely
# part of the solution
crs(map) = CRS("+init=epsg:4326")

leaflet() %>%
    leaflet::addRasterImage(map)

结果输出与输入图像完全不同

如何拍摄任意图像并将其放置在传单地图上？

【问题讨论】：

这能回答你的问题吗？ Overlay image on R leaflet map
我投票决定将其作为副本关闭，但除了链接的解决方案之外，可能还有其他解决方案。据我猜测，尝试addRasterImage() 的colors= 参数并更改投影。
不太有效，因为它仍然强制我添加法线贴图图块并将我锁定在该坐标系中。我想我需要使用L.CRS.Simple 才能为图像提供适当的边界
@brian 通过稍微修改该答案，我能够根据我的规范添加叠加图像。不确定它是否值得在这里单独回答。只需要做leaflet(options = leafletOptions(crs = leafletCRS('L.CRS.Simple'))) %>% htmlwidgets::onRender("... 并调用javascript
您始终可以用您的解决方案回答您自己的问题。很好地记录问题对未来的读者很有用。

标签： r leaflet r-leaflet

【解决方案1】：

我没能找到 addRasterImage 在这里失败的确切原因，但我发现报告称 doesn't behave well 在 L.CRS.Simple 投影上，这是您要用来显示简单矩形图像的投影。

使用htmlwidgets::onRender可以直接使用javascript函数L.imageOverlay添加你想要的图片

library(leaflet)

# minimal custom image
imageURL = 'https://external-preview.redd.it/7tYT__KHEh8FBKO6bsqPgC02OgLCHAFVPyjdVZI4bms.jpg?auto=webp&s=ff2fa2e448bb92c4ed6c049133f80370f306acb3'

# get image data. we'll use this to set the image size
imageData = 
    magick::image_read(imageURL) %>% image_info()

leaflet(options = leafletOptions(crs = leafletCRS('L.CRS.Simple'))) %>% 
            htmlwidgets::onRender(glue::glue("
      function(el, x) {
        var myMap = this;
        var imageUrl = '<imageURL>';
        var imageBounds = [[<-imageData$height/2>,<-imageData$width/2>], [<imageData$height/2>,<imageData$width/2>]];

        L.imageOverlay(imageUrl, imageBounds).addTo(myMap);
      }
      ",.open = '<', .close = '>'))

对于像这样的大图像，如果您想让图像更小，您可以使用 javascript 端的imageBounds 缩小或将minZoom 设置为负值并使用setView 开始缩小。

leaflet(options = 
            leafletOptions(crs = leafletCRS('L.CRS.Simple'),
                           minZoom = -1)) %>% 
    setView(0,0,zoom = -1) %>%
            htmlwidgets::onRender(glue::glue("
      function(el, x) {
        var myMap = this;
        var imageUrl = '<imageURL>';
        var imageBounds = [[<-imageData$height/2>,<-imageData$width/2>], [<imageData$height/2>,<imageData$width/2>]];

        L.imageOverlay(imageUrl, imageBounds).addTo(myMap);
      }
      ",.open = '<', .close = '>'))

【讨论】：

有没有办法附加本地图片？