4

任意の Leaflet JS プラグインを Leaflet for R で使用する のサンプル コードを使用して、leaflet-side-by-side プラグインを実装しようとしました。シンプルに見えますが、これまでのところ成功していません。私は自分が間違っていることを理解できませんでした。返信ありがとうございます。ありがとう、

library(leaflet)
library(htmltools)
library(htmlwidgets)


LeafletSideBySidePlugin <- htmlDependency("leaflet-side-by-side","2.0.0",
                                          src = c(href="https://github.com/digidem/leaflet-side-by-side"),
                                          script="leaflet-side-by-side.js")

# A function that takes a plugin htmlDependency object and adds
# it to the map. This ensures that however or whenever the map
# gets rendered, the plugin will be loaded into the browser.

registerPlugin <- function(map, plugin) {
   map$dependencies <- c(map$dependencies, list(plugin))
   map
}

leaflet() %>% addTiles() %>%
   setView(lng = 12, lat = 50, zoom = 4) %>%
   # Register leaflet-side-by-side plugin on this map instance
   registerPlugin(LeafletSideBySidePlugin) %>%
   onRender("
            function(el, x) {
var mylayer1 = L.tileLayer(
          'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
            maxZoom: 18
            })
var mylayer2 = L.tileLayer(
          '//stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png',{
            maxZoom: 14
            })
            L.control.sideBySide(mylayer1, mylayer2).addTo(this);
            ")
4

2 に答える 2

1

Abuw 氏の回答に敬意を表したいと思います。それでもうまくいかない理由は、onRender JavaScript に一致しない「{」があるためです。

また、htmlDependency ソースが実際に存在することを確認してください。 jsdelivrは、npm および github を介して利用可能なほとんどの js ライブラリを application/javascript 形式で提供します。生の github パスの代わりにそれを使用すると、完全な作業コードは次のようになります。

library(leaflet)
library(htmltools)
library(htmlwidgets)


LeafletSideBySidePlugin <- htmlDependency("leaflet-side-by-side","2.0.0",
                                          src = c(href="https://cdn.jsdelivr.net/gh/digidem/leaflet-side-by-side@2.0.0/"),
                                          script="leaflet-side-by-side.js")

# A function that takes a plugin htmlDependency object and adds
# it to the map. This ensures that however or whenever the map
# gets rendered, the plugin will be loaded into the browser.

registerPlugin <- function(map, plugin) {
  map$dependencies <- c(map$dependencies, list(plugin))
  map
}

leaflet() %>% addTiles() %>%
  setView(lng = 12, lat = 50, zoom = 4) %>%
  # Register leaflet-side-by-side plugin on this map instance
  registerPlugin(LeafletSideBySidePlugin) %>%
  onRender("
        function(el, x) {
          var mylayer1 = L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
             maxZoom: 18
             }).addTo(this);
          var mylayer2 = L.tileLayer(
          '//stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png',{
             maxZoom: 14
             }).addTo(this);
        L.control.sideBySide(mylayer1, mylayer2).addTo(this);
        }")
于 2020-04-22T15:23:07.367 に答える
1

この質問に出くわすだけです。

各タイル マップ レイヤーの addTo() メソッドを見逃していると思います。ここにあるはずです。

leaflet() %>% addTiles() %>%
   setView(lng = 12, lat = 50, zoom = 4) %>%
   # Register leaflet-side-by-side plugin on this map instance
   registerPlugin(LeafletSideBySidePlugin) %>%
   onRender("
        function(el, x) {
          var mylayer1 = L.tileLayer(
            'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
             maxZoom: 18
             }).addTo(this);
          var mylayer2 = L.tileLayer(
             '//stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png',{
             maxZoom: 14
             }).addTo(this);
        L.control.sideBySide(mylayer1, mylayer2).addTo(this);
        ")
于 2017-08-22T14:12:04.453 に答える