将任意图像添加到传单地图

Question

我正在尝试使用 leaflet 显示比平时更小的地图，所以我不想使用普通的平铺系统。我不关心平滑缩放和在需要时加载更高分辨率的图块。相反，我试图从图像文件中添加光栅图像。让我们说这个 file 当我 google "hand drawn map"

所以我试试

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)

生成的输出与输入图像完全不同

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

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

将任意图像添加到传单地图

Adding just an arbitrary image to a leaflet map

r

leaflet

r-leaflet