R传单地图上的叠加图像

2022-01-12 00:00:00 python r leaflet

问题描述

我有一个 .PNG 图像，它基本上代表光栅，但不是光栅格式.这些是提供给我的，否则我会自己将它们生成为栅格并避免这个问题.

I have a .PNG image which fundamentally represents is raster, but is not in a raster format. These are provide to me, otherwise I would generate them as rasters myself and avoid this problem.

我想将图像叠加在 R 中的传单底图上.图像叠加将为用户在区域周围绘制边界框提供参考，并在数据库中查询生成栅格的原始数据那个地区.

I would like to overlay the image on a leaflet basemap in R. The image overlay will just provide a reference for the user to draw a bounding box around a region, and query a database for the raw data that generated the raster in that region.

在 Python 的小册子实现中，可以通过这种方式叠加图像

In Python's implementation of leaflet the image overlay is possible in this manner 

center = [0,0]
zoom = 2

m = Map(center=center, zoom=zoom)
layer = ImageOverlay(url="filename.png", bounds=(( min_lat, min_lon), 
                                             (max_lat, max_lon)))
m.add_layer(layer)
return m

到目前为止，它看起来像在 R 中执行此操作，我需要一个光栅对象，然后使用 addRasterImage()，它似乎将光栅转换为 RGB 图像，然后将其覆盖在传单上地图.我最初有一个图像，只想将其添加为图层而不是需要光栅格式.谢谢.

Thus far it looks like to do this in R, I need a raster object that then use addRasterImage(), which appears to converts the raster to a RGB image and then overlays it on the leaflet map. I have an image initially and just want add it as a layer rather than a requiring a raster format. Thank you.

解决方案

如果您需要附加图像并且之后不更改它(bbox 或源)，那么您应该能够使用 htmlwidgets 访问本机传单.js:

If you need to append the image and not change it afterwards (bbox or source), then you should be able to do that using htmlwidgets to access native leaflet.js:

htmlwidget::onRender 函数可用于添加自定义行为使用本机 Javascript 到传单地图.这是一个什么高级用例，要求您了解 Javascript.使用 onRender您可以使用定义的任何 API 自定义地图的行为在 Leaflet.js 文档中.(来自传单 r 文档)

The htmlwidget::onRender function can be used to add custom behavior to the leaflet map using native Javascript. This is a some what advanced use case and requires you to know Javascript. Using onRender you can customize your map’s behavior using any of the APIs as defined in the Leaflet.js documentation. (from leaflet r documentation)

通过展示更广泛的本机功能，这为您提供了更多的灵活性.添加图像覆盖非常简单(example)并且类似于 python执行.从 r 和 js 文档版本中采用的一个简单示例可能如下所示:

This gives you a bit more flexibility by revealing the more extensive native functionality. To add an image overlay is rather straightforward (example) and similar to the python implementation. A simple example adopted from the r and js documentation versions might look like:

library(leaflet)

m <- leaflet() %>%
  addTiles() %>%  # Add default OpenStreetMap map tiles
  addMarkers(lng=-74.22655, lat=40.712216, popup="Bottom Right Corner") %>%
  htmlwidgets::onRender("
      function(el, x) {
        console.log(this);
        var myMap = this;
        var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';
        var imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];

        L.imageOverlay(imageUrl, imageBounds).addTo(myMap);
      }
      ")
m  # Print the map

相关文章