Добавление только произвольного изображения на карту листовки

Question

Я пытаюсь использовать буклет, чтобы показать карту меньшего размера, чем обычно, поэтому я не хочу использовать обычную систему листов. Меня не волнует плавное масштабирование и загрузка листов с более высоким разрешением, когда это необходимо. Вместо этого я пытаюсь добавить растровое изображение из файла изображения. Допустим, это файл , который появляется, когда я гуглю "карту рисованной руки"

Поэтому я пытаюсь

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, но я нашел сообщения о том, что он плохо себя ведет на 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 = '>'))

Для большого изображения, подобного этому если вы хотите уменьшить изображение, вы можете либо уменьшить его, используя 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 = '>'))