Início / coding / Perguntas / 79563071
Accepted
Salvador
Asked: 2025-04-09 05:17:13 +0800 CST

Como adicionar rótulo ao encarte usando addMiniMap no folheto

  • 772

Consigo adicionar rótulos à janela principal do folheto, mas não consigo descobrir como adicionar um rótulo à janela do mapa de inserção. Veja o exemplo abaixo:

library(leaflet)
main_map_with_labels <- leaflet() %>%
  addTiles() %>%
  setView(lng = -121.2722, lat = 38.1341, zoom = 10) %>%
  addMiniMap(
    tiles = providers$OpenStreetMap) %>%
  addLabelOnlyMarkers(lng = -121.2722, lat = 38.1341,
    label = "Lodi") # I want to add this label to the inset
main_map_with_labels

1 respostas

  1. Best Answer

    Se map.minimap._miniMapexistir, adicione um marcador diretamente a esse mapa interno do minimapa usando a classe htmlwidgets::onRender(). Esta função permite que você pegue o objeto do mapa diretamente usando this. O mapa de folhetos tem um objeto de minimapa abaixo, que é essencialmente outro mapa de folhetos. Portanto, podemos adicionar marcadores a ele usando JavaScript. Gostaria de ressaltar que isso não deve ser feito e que pode haver consequências imprevistas. addMiniMapé um plugin que não deveria incluir marcadores e não sei como ele reagirá a isso.

    fora

    library(leaflet)
library(htmlwidgets)

leaflet() %>%
  addTiles() %>%
  setView(lng = -121.2722, lat = 38.1341, zoom = 10) %>%
  addMiniMap(tiles = providers$OpenStreetMap) %>%
  onRender("
function(el, x) {
  var map = this;
  if (map.minimap && map.minimap._miniMap) {
    var mini = map.minimap._miniMap;
    L.marker([38.1341, -121.2722])  // [lat, lng]
      .bindTooltip('Lodi', {permanent: true, direction: 'top'})
      .addTo(mini);
  }
}
")

    Editar: Marcador apenas com texto

    Gostaria de acrescentar que isso é menos preferível, pois agora é muito difícil dizer exatamente para onde o marcador está apontando.

    Para mostrar apenas o texto, você pode criar um L.divIconcom algum CSS

    • preenchimento: 2px -> margens internas do texto para div
    • border-radius: 3px -> o raio do div
    • font-weight: negrito -> fonte mais grossa
    • fundo: rgba(255,255,255,0.4) -> fundo em (vermelho, verde, azul, alfa)
    • iconSize: [30, 20] -> largura, altura do ícone-div

    fora2

    library(leaflet)
library(htmlwidgets)
leaflet() %>%
  addTiles() %>%
  setView(lng = -121.2722, lat = 38.1341, zoom = 10) %>%
  addMiniMap(tiles = providers$OpenStreetMap) %>%
  onRender("
function(el, x) {
  var map = this;
  if (map.minimap && map.minimap._miniMap) {
    var mini = map.minimap._miniMap;
    
    L.marker([38.1341, -121.2722], {
      icon: L.divIcon({
        className: 'text-label',
        html: '<div style=\"background: rgba(255,255,255,0.4); padding: 2px; border-radius: 3px; font-weight: bold;\">Lodi</div>',
        iconSize: [30, 20],
        iconAnchor: [25, 10]
      })
    }).addTo(mini);
  }
}
")
    • 0

relate perguntas