問題描述

我有一個 .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 中的傳單底圖上.圖像疊加將為用戶在區(qū)域周圍繪制邊界框提供參考，并在數(shù)據(jù)庫中查詢生成柵格的原始數(shù)據(jù)那個地區(qū).

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 的小冊子實現(xiàn)中，可以通過這種方式疊加圖像

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 中執(zhí)行此操作，我需要一個光柵對象，然后使用 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 函數(shù)可用于添加自定義行為使用本機 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執(zhí)行.從 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

這篇關于R傳單地圖上的疊加圖像的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！