向传单地图添加任意图像

我正在尝试使用传单来显示比平时更小的地图，所以我不想使用普通的平铺系统。我不关心平滑缩放和在需要时加载更高分辨率的图块。相反，我尝试从图像文件添加光栅图像。可以这么说当我谷歌“手绘地图”时出现

So I try

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)

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

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

我未能找到确切原因addRasterImage这里失败了，但我发现有报道称它表现不佳 https://github.com/rstudio/leaflet/issues/371 on L.CRS.Simple投影，您将使用它来显示简单的矩形图像。

Using 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 = '>'))

对于像这样的大图像，如果您想让图像变小，您可以使用imageBounds在 javascript 端或设置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 = '>'))